PDA

View Full Version : IE6 float 50% bug


OnlineWD
08-29-2009, 11:55 AM
Have found this bug and cannot fix it ..

http://www.onlinewebsitedesign.net/float-test.html (http://www.onlinewebsitedesign.net/progress/mytogobook.com/float-test.html)

Change width of window and right float is clear then not cleared, flickers as changing width. Any ideas please?

Cary
08-29-2009, 07:42 PM
Sometimes browsers come up with more than 100% when they add 50% and 50%, or 27% and 73%, etc. You need to reduce the widths so this can't happen. Otherwise, one div will have to drop down.

OnlineWD
08-29-2009, 10:53 PM
Well it works perfectly in Firefox. It does make sense because possibly percentages still produce in DOM pixels, therefore if window size means 100% width is 901px, well one side must be 450px and other 451px but IE might try to make both 451px resulting in one element breaking the float.

The problem is this is an integral part of my two column design, I could use a two column table but would prefer to use CSS.

DWcourse
08-29-2009, 11:00 PM
Maybe:
<div style="width:100%;">
<div style="background:#ccc; float:left; width:50%; height:200px;"></div>
<div style="background:#666; margin-left:50%; height:200px;"></div></div>

OnlineWD
08-30-2009, 02:02 AM
Yep that works nicely thanks. Produces 3px bug for right div though in IE6, adding margin-right:-3px to left div does nothing.

DWcourse
08-30-2009, 02:10 AM
Try this (can be a class or use the ID of the object as the selector)/

<!--[if IE]>
<style type="text/css">
.mybuggyelement { zoom: 1;}
</style>
<![endif]-->

OnlineWD
08-30-2009, 02:48 AM
No difference, isn't zoom:1 a IE7 fix for clearing floated elements. I don't think there are any clear issues here, it's simply adding 3px onto left float. Normally to fix 3px I add conditional margin-left:-3px to the non floated element but cannot do that here because it already has margin-left:50%.

DWcourse
08-30-2009, 03:20 AM
Here's adobe's page about it: http://cli.gs/2L6JB7

It needs to go in the header after the rest of the css and be applied to the non-floated div.

domedia
08-31-2009, 05:22 PM
This is called the IE 3px jog bug. It was a really mysterious bug until some fixes came.