PDA

View Full Version : Footer not positioning correctly in IE.


-fedexer-
09-18-2008, 03:23 PM
Well i was wondering if someone could give me a hand here, i have been trying to get this layout working, and so far it works perfectly as expected in FF but guess what... it's a no go with IE (we are not suprised ^^).

Well the outcome in IE is that the footer bar floats up onto the text as it expands downwards... which is not what we want at all. I will include the html code, css code, and the two images, umm hopefully someone can give me a hand here, or something :grin:.

As you can see it even validates correctly, which is strange.

Locally hosted, if you need to see this then ask :wink:

HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/styleSheet1.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="backingtop">
<div class="toparea">
<div class="content_holder">
<div class="topbar">
<div class="searchbox">
<form method="post" action="./search.php" name="searchform">
Search: <input name="search" type="text" class="userboxinput" />
</form>

</div>
</div>
<div class="contcontent">
<div class="maincontent">
<div class="navigation">example</div>
<div class="contenttext">
<p>example text</p>
<p>example text</p>
<p>example text</p>
<p>example text</p>
<p>example text</p>
<p>example text</p>
<p>example text</p>
<p>example text</p>
<p>example text</p>
<p>example text</p>
<p>example textexample textexample textexample text</p>
<p>example text</p>
<p>example text</p>
<p>example text</p>
<p>example text</p>
<p>example textexample textexample textexample textexample text</p>
<p>example textexample textexample textexample textexample text</p>
<p>example textexample textexample textexample textexample text</p>
<p>example textexample textexample textexample textexample text</p>
<p>example textexample textexample textexample textexample text</p>
<p>example textexample textexample textexample textexample text</p>
<p>example textexample textexample textexample textexample text</p>
<p>das</p>
<p>d</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>as</p>
<p>dasd</p>
<p>as</p>
<p>dasd</p>
<p>&nbsp;</p>
</div>
</div>
<div class="maincontentfoot"></div>
</div>

</div>


</div>

<div class="footer">
<div class="footerright">
<div class="footerleft"></div>
<div class="copyright" align="center">This website and its content is copyright of Alva Academy Parent Forum - Alva Academy Parent Forum 2008. All rights reserved. <br/> Web Developer &amp; Web Designer - Arran </div>
<div class="validated">
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10-blue"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a>

<a href="http://jigsaw.w3.org/css-validator/"><img
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" height="31" width="88" border="0"/>
</a>
</p>
</div>
</div>

</div>

</div>

</body>
</html>
CSS:
body{
background-color:#000033;
color:#ccffff;
top:0px;
left:0px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-decoration: none;
font: 14px Georgia, "Times New Roman", Times, serif;
}
p{
padding:0px;
margin:0px;
}
.toparea{
background-image:url(../images/layout%20v1/definatelayout_01.gif);
width:1056px;
height:718px;
background-repeat:no-repeat;
}
.backingtop{
background-image:url(../images/layout%20v1/definatelayout_02.gif);
background-repeat:repeat-x;
width:100%;
}

.topbar{
height:37px;
width:902px;
margin-left:99px;
margin-top:226px;
float:left;

}
.maincontent{
width:902px;
background-image:url(../images/layout%20v1/PF_05.gif);
background-repeat:no-repeat;
float:left;
}
.content{
margin-top:0px;
}
#main_cont{
width:100%;
}
.contcontent{
background-image:url(../images/layout%20v1/PF_07.gif);
background-repeat:repeat-y;
width:902px;
margin-top:0px;
float:left;
margin-left:99px;
}
.maincontentfoot{
background-image:url(../images/layout%20v1/the%20slices%202/images/definatelayout_06.gif);
background-repeat:no-repeat;
width:902px;
height:3px;
float:left;
}
.contenttext{
float:left;
width:678px;
padding:5px 10px;
}
.navigation{
float:left;
width:184px;
padding:5px 10px;
}
.footer{
height:95px;
width:100%;
float:left;
}
.footerleft{
background-image:url(../images/layout%20v1/the%20slices%202/images/definatelayout_09.gif);
background-repeat:no-repeat;
height:95px;
width:100px;
float:left;
}
.footerright{
background-image:url(../images/layout%20v1/the%20slices%202/images/definatelayout_10.gif);
background-repeat:repeat-x;
height:95px;
float:left;
width:100%;
}
.area{
padding:0px;
margin:0px;
width:100%;
}

.userboxinput{
margin:0;
border:0;
background:none;
border:1px dotted #00ffff;
color:#FFFFFF;
}
.searchbox{
width:300px;
height:37px;
float:left;
padding-top: 7px;
padding-left: 10px;
}
.content_holder{
width:100%;
}
.copyright {
padding-top:40px;
color:#B6B0F2;
float:left;
font-size:12px;
}
.validated{
float:right;
padding-top:40px;
}
.validated a:link, body_alink {
text-decoration: none;
}Firefox as desired:
http://i35.photobucket.com/albums/d192/arranator2/FFversion.jpg

IE messed up:
http://i35.photobucket.com/albums/d192/arranator2/IEversion.jpg

well hopefully someone can assist me.

domedia
09-18-2008, 04:30 PM
is it .footer?
If so, why is it floated?

-fedexer-
09-18-2008, 04:47 PM
it is .footer domedia :wink: and it is floated as it is in a larger div which has other floated elements, either way floated or not it still generates the same malfunction in IE.. hmm

Edit: i feel like an idiot, i decided to move the footer div, into the div above the one it is currently in, i then formatted that to have a width of 100% instead of 1056px (the image size), and lo and behold, this technique works as i would expect it to.

I just wonder why the previous method didn't work..