Help with float/absolute divs in ie6

Ryan_Taylor · 01-27-2010, 01:04 AM

I've got a very simple landing page that does not display properly in IE6. The "absolute div" is pushed to the right of the "center div" when it shouldn't be. If I remove the floats, the absolute div displays fine, but I'm using "float left" to align the 3 divs right next to each other.

Everything looks fine in FF, IE8, Safari, etc. Just can't get older versions of IE to work.

Can anyone good with CSS help me figure out how to fix this?

Thanks!

Code:

<style type="text/css">
<!--
body {
    background-color: #372d2b;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
#container {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    height: 550px;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}
#button {
    position: absolute;
    padding-top: 295px;
    height: 119px;
    width: 418px;
    padding-left: 75px;
}
#left {
    float: left;
}
#center {
    float: left;
}
#right {
    height: 416px;
    }
-->
</style>
</head>

<body>
<div id="container">
<div id="button"><a href="go.php"><img src="images/button.jpg" width="418" height="119" border="0" /></a></div>
<div id="left"><img src="images/left_panel.jpg" width="199" height="416" /></div>
<div id="center"><img src="images/center_panel.jpg" width="302" height="416" /></div>
<div id="right"><img src="images/right_panel.jpg" width="299" height="416" /></div>
</div>
</body>

mywebwork · 01-27-2010, 01:53 AM

I feel your pain Ryan, the "Floating DIV" bug with IE6 is well-documented and is one of the two major pains in supporting IE6 (the other one being the lack of support for transparent PNG files, or at least 24-bit ones).

These links may either help or confuse the situation:

IE Float model and the reality | CSS Class

Internet Explorer Float/Margin Bugs

Good luck with it!

Bill

Ryan_Taylor · 01-27-2010, 09:01 AM

Excellent - this was helpful. Thanks for the links!

Orlando Web Design · 01-27-2010, 09:30 AM

great articles, thanks for posting.

clickbump · 01-27-2010, 05:52 PM

Have you tried specifying a doctype to force the browser out of quirks mode? If not, add this to the top of your template?

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

stevepaul25 · 01-28-2010, 06:59 AM

Have you tried to use your code in 800x600? try to include body width:100%. I'm not sure if it will work though

01-27-2010, 01:04 AM	#1
Ryan_Taylor Advanced Warrior War Room Member Join Date: Feb 2008 Location: Chicago, IL Posts: 660 Thanks: 10 Thanked 17 Times in 9 Posts	Help with float/absolute divs in ie6 I've got a very simple landing page that does not display properly in IE6. The "absolute div" is pushed to the right of the "center div" when it shouldn't be. If I remove the floats, the absolute div displays fine, but I'm using "float left" to align the 3 divs right next to each other. Everything looks fine in FF, IE8, Safari, etc. Just can't get older versions of IE to work. Can anyone good with CSS help me figure out how to fix this? Thanks! Code: <style type="text/css"> <!-- body { background-color: #372d2b; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } #container { width: 800px; margin-right: auto; margin-left: auto; height: 550px; padding: 0px; margin-top: 0px; margin-bottom: 0px; } #button { position: absolute; padding-top: 295px; height: 119px; width: 418px; padding-left: 75px; } #left { float: left; } #center { float: left; } #right { height: 416px; } --> </style> </head> <body> <div id="container"> <div id="button"><a href="go.php"><img src="images/button.jpg" width="418" height="119" border="0" /></a></div> <div id="left"><img src="images/left_panel.jpg" width="199" height="416" /></div> <div id="center"><img src="images/center_panel.jpg" width="302" height="416" /></div> <div id="right"><img src="images/right_panel.jpg" width="299" height="416" /></div> </div> </body>

01-27-2010, 01:53 AM	#2
mywebwork Senior Warrior Member War Room Member Join Date: Sep 2008 Location: Honolulu, Hawaii, USA & Montreal Canada Posts: 2,218 Blog Entries: 1 Thanks: 759 Thanked 724 Times in 505 Posts	Re: Help with float/absolute divs in ie6 I feel your pain Ryan, the "Floating DIV" bug with IE6 is well-documented and is one of the two major pains in supporting IE6 (the other one being the lack of support for transparent PNG files, or at least 24-bit ones). These links may either help or confuse the situation: IE Float model and the reality \| CSS Class Internet Explorer Float/Margin Bugs Good luck with it! Bill

01-27-2010, 09:30 AM	#4
Orlando Web Design Laurence Samuels War Room Member Join Date: Oct 2009 Location: Orlando, FL - USA Posts: 357 Thanks: 63 Thanked 44 Times in 41 Posts Contact Info	Re: Help with float/absolute divs in ie6 great articles, thanks for posting.
	Orlando Web Design: This 'aint your typical web co. Tax Deed Foreclosures : Build $1 million of real estate wealth. I will show you how Relationship Stories: Avoid the Altar.com-A million reasons to avoid marriage Snowshoe Rentals - acne wash - acnefree

01-28-2010, 06:59 AM	#6
stevepaul25 Warrior Member Join Date: Jan 2010 Posts: 9 Thanks: 0 Thanked 0 Times in 0 Posts	Re: Help with float/absolute divs in ie6 Have you tried to use your code in 800x600? try to include body width:100%. I'm not sure if it will work though
	Vinyl Banner Torani

01-27-2010, 09:01 AM	#3
Ryan_Taylor Advanced Warrior War Room Member Join Date: Feb 2008 Location: Chicago, IL Posts: 660 Thanks: 10 Thanked 17 Times in 9 Posts	Re: Help with float/absolute divs in ie6 Excellent - this was helpful. Thanks for the links!