CSS Forum

**missang24** · 07-09-2008, 04:25 PM

Hi everyone!

I am having a huge problem getting footer div's to line up correctly in Internet Explorer.

Please check out the site:

Quote:
http://www.huronia.biz/site
See the problem at the bottom in I.E? Works fine in FF (except the links.php page I am screwing around with it)

They are half off the image. Here is my embedded stylesheet for this particular div:

Quote:

<!--
#apDiv9 {
position:absolute;
width:583px;
height:53px;
z-index:8;
left: 212px;
top: 688px;
}

Here is the complete code:

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">  </style>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
<link href="stylesheet.css" rel="stylesheet"
type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<div id="apDiv1"><img
src="images/huronia-newest2_02_header.jpg" alt="Header"
height="197" width="638" /></div>
<p> </p>
<p> </p>
<p> </p>
<div id="apDiv2">
<div id="apDiv5"></div>
</div>
<div id="apDiv3"><img
src="images/huronia-newest2_03_welcome.jpg" height="46"
width="629" /></div>
<div id="apDiv4"><img
src="images/huronia-newest2_07_footer.jpg" align="absbottom"
height="78" width="637" /></div>
<div id="apDiv10">
<p>Welcome to the Huronia Area Aboriginal Management Board
website.  We hope you find it informative and up to
date.   </p>
<p>The Huronia Area Aboriginal Management Board will support the
building of strong Aboriginal communities to provide their members with
better employment and training opportunities.</p>
<p>The Huronia Area Aboriginal Management Board will increase the
capacity building, control, and responsibility for program design and
implementation within the Aboriginal communities.</p>
<p>The Huronia Area Aboriginal Management Board will meet the
special needs of Aboriginal people living in urban areas, youth, and
persons with disabilities.</p>
</div>
<div id="apDiv11"><img src="images/group_canoe4.jpg"
height="326" width="250" /></div>
<div id="apDiv6"><img
src="images/huronia-newest2_01_top_left.jpg" height="285"
width="184" /></div>
<div id="apDiv7"><img
src="images/huronia-newest2_07_bottom_left.jpg" height="287"
width="184" /></div>
<div id="apDiv8">
<div align="center">
<p><a href="index.php"><b
onmouseout="this.style.color = 'black';"
onmouseover="this.style.color
= 'red';" align="justify">MAIN</b></a></p>
<p><a href="about.php"><b
onmouseout="this.style.color = 'black';"
onmouseover="this.style.color
= 'red';" align="justify">ABOUT</b></a></p>
<p><a href="events.php"><b
onmouseout="this.style.color = 'black';"
onmouseover="this.style.color
= 'red';" align="justify">EVENTS</b></a></p>
<p><a href="programs.php"><b
onmouseout="this.style.color = 'black';"
onmouseover="this.style.color
= 'red';" align="justify">PROGRAMS</b></a></p>
<p><a href="services.php"><b
onmouseout="this.style.color = 'black';"
onmouseover="this.style.color
= 'red';" align="justify">SERVICES</b></a></p>
<p><a href="contact.php"><b
onmouseout="this.style.color = 'black';"
onmouseover="this.style.color
= 'red';" align="justify">CONTACT</b></a></p>
<p><a href="links.php"><b
onmouseout="this.style.color = 'black';"
onmouseover="this.style.color
= 'red';" align="justify">LINKS</b></a></p>
</div>
</div>
<div id="apDiv9">
<p class="style1"><a href="index.php">MAIN</a>
| <a href="about.php">ABOUT</a> | <a
href="events.php">EVENTS</a> | <a
href="programs.php">PROGRAMS</a> | <a
href="services.php">SERVICES</a> | <a
href="contact.php">CONTACT</a> | <a
href="links.php">LINKS</a> </p>
</div>
</body>
</html>

What can I do to fix this issue in I.E, without making it worse in FF?

Any help would be great!!!

**wayfarer07** · 07-09-2008, 06:22 PM

IE is probably choking on one of your validation errors http://validator.w3.org/check?verbos....biz%2Fsite%2F. Don't worry about the missing alt tags, for now, however, as they won't mess with a layout.

**LadynRed** · 07-09-2008, 08:13 PM

Your other BIG problem is all that absolute positioning, you really do not NEED all that at all. Learn to use the normal document flow and floats and you'll have less trouble. IE has some pretty ugly bugs when it comes to absolute positioning.

**missang24** · 07-10-2008, 08:47 AM

Ok, thanks for your input guys / gals.

I still do not however, know how to fix the issue with the footer links being mispositioned at the bottom in I.E. ....

LadyinRed: I am a complete newb when it comes to CSS..... What do you suggest I change the position: absolute to? Do you think that should fix the issue all together?

Any help would be great on this, this is one of my beginner projects, and I am kind of on a deadline. I would appreciate any insight .

Thanks again!

**wayfarer07** · 07-10-2008, 10:39 AM

She is just pointing out what she knows from many years of experience: that absolute positioning is a very ridged and fragile way to to build a webpage. Personally, I do use it, but sparingly.

I usually only use absolute positioning when I know the exact height and width of an element, and it is convenient for me to "nail down" the exact pixel location. I rarely use it for text areas, since it is better to use expanding divs for those areas. The most common item that I position absolutely is a logo. I also sometimes make false "image maps" with a background image and blank block-level anchor tags.

As far as the type of positioning you should be using, the answer is the default position: static (you don't need to specify this). However, changing all of the positioning to static will definately not fix things here, since static blocks don't react the the {top: ..px} and {left: ..px} commands.

So as far as being a beginner, and also on a tight deadline, you may be stuck with your choice for now, unless you are going to learn floating and clearing on a tight schedule.

As far as your footer problems, I suggest you create a conditional comment to send a rule only to IE, then put a larger margin on the top of it, or figure out another way to move it down some, only in that browser.