...

View Full Version : footer divs are not side by side in IE8 Vista



jasonpc1
05-23-2010, 04:41 PM
divs are not side by side in IE8 Vista but shows ok in IE8 XP and firefox XP.

they show one under the other with a 50% gap on the right hand side.

what should i change to my code to get them side by side.



<div id="footer2010">
<div class="copyright2010">Copyright &copy; 2009-<?=date("Y");?></div>
<div class="copyright2010">disclaimer</div>
<div class="clear"></div>
</div>




.copyright2010 { float: left; width: 50%; text-align: center; background-color:#4F4F4F; color: #FFFFFF; font-size:8pt; line-height: 30px; }

.footer2010 { margin:0 auto; }

.clear { height: 0; font-size: 1px; margin: 0; padding: 0; line-height: 0; clear: both; }

Excavator
05-23-2010, 05:02 PM
Hello jasonpc1,
Maybe you have another problem you did not show? The bit you posted will work fine with a DocType and valid code.
when pasted into my standard blank webpage your two .copyright2010 divs side by side in FF3.x, IE8 and IE7.


I have no way to check it in IE6, it's certainly possible for that browser to mess up on the 50% part.

jasonpc1
05-23-2010, 07:59 PM
the problem happens in IE8 on vista machines.


edit.

sorry just had it confirmed it is using IE 7 !! my fault. sorry, i shall get them to update their browsers

Excavator
05-24-2010, 12:16 AM
Like I said, what you posted should work. Show us the rest of your code and maybe we can find the error.

Did you validate? See the links in my signature line about validation.


Here's a snippet that shows your code working and a second footer coded a different way -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #FC6;
margin: 0;
}
.footer2010 {
margin: 0;
overflow: auto;
}
.copyright2010 {
width: 50%;
float: left;
text-align: center;
background:#4f4f4f;
color: #fff;
font-size:8pt;
line-height: 30px;
}
/* second footer */
.newfooter2010 {
margin: 100px 0 0 0;
overflow: auto;
text-align: center;
background:#4f4f4f;
color: #fff;
font-size:8pt;
line-height: 30px;
}
.newcopyright2010 {
width: 50%;
float: left;
}
.twocopyright2010 {
margin: 0 0 0 50%;
}
</style>
</head>
<body>
<div class="footer2010">
<div class="copyright2010">Copyright &copy; 2009-
<?=date("Y");?>
<!--end .copyright2010--></div>
<div class="copyright2010">disclaimer</div>
<!--end .footer2010--></div>
<div class="newfooter2010">
<div class="newcopyright2010">Copyright &copy; 2009-
<?=date("Y");?>
<!--end .copyright2010--></div>
<div class="twocopyright2010">disclaimer</div>
<!--end footer2010--></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum