IE6 Float Problem

**sbbear** · 05-26-2008, 01:34 AM

Hey guys,

This problem has been bugging me for a while and I was really excited to stumble on your forum. I'm doing a redesign of the homepage of my site, and the design looks the same in IE7 and every other browser on PCs, Macs and Linux, but on IE6 and below 4 of my floating divs appear one on top of the other instead of 2 on top of 2. Here's the page: http://www.forabetteramerica.org/newindex.php . If anyone has a tip for me I'd be SO grateful!

**c55** · 05-26-2008, 02:46 AM

i dont have ie 6 on my computer so that i can not help you to review it. however, i have met this kind of problem. try this, "overfloat:hidden".

**styleman** · 05-26-2008, 04:50 AM

There is only one, easy and clear, way to fix that, you have to apply display:inline; for the blocks(#nibox, #nibox2, ...) and its going to be ok. That is because msie6 doubles the horizontal margins for block-level elements. But with display:inline it is going to be fixed

**LadynRed** · 05-26-2008, 09:04 AM

Quote:

That is because msie6 doubles the horizontal margins for block-level elements.

That is not entirely correct ! IE6 will double margins on floats but ONLY if you have also applied a margin to that element that goes in the same direction as the float, ie. float: left with a left margin, and float:right with a right margin.

To stop it from doing that, you do indeed need to add display:inline to the floated element.. BUT you should use conditional comments and a separate CSS file that contains ONLY the css needed to swat IE's bugs.

You've got a bunch of validation errors on that page, not the least of which is the script statements that are NOT inside your <head> section.

**sbbear** · 05-26-2008, 11:34 AM

Quote:

Originally Posted by styleman

There is only one, easy and clear, way to fix that, you have to apply display:inline; for the blocks(#nibox, #nibox2, ...) and its going to be ok. That is because msie6 doubles the horizontal margins for block-level elements. But with display:inline it is going to be fixed

Wow, thank you so much for your help. It worked like a charm! Any idea what the fix would be for IE 5 because I'm still having the same problem.

**Candygirl** · 05-27-2008, 04:43 AM

Quote:

Originally Posted by LadynRed

IE6 will double margins on floats but ONLY if you have also applied a margin to that element that goes in the same direction as the float, ie. float: left with a left margin, and float:right with a right margin.

That is not entirely correct !

I think it's more correct to say:
IE6 will double the horizontal margins on floats but ONLY if the margin occurs between the float and its container.

**LadynRed** · 03:03 PM

http://www.positioniseverything.net/...ed-margin.html

The point was that IE does NOT double float margins as a default but only under certain conditions.

**Candygirl** · 05-28-2008, 09:51 AM

Quote:

Originally Posted by LadynRed

http://www.positioniseverything.net/...ed-margin.html

Quote:

Originally Posted by positioniseverything.net

This bug only occurs when the float margin goes in the same direction as the float and is trapped directly between the float and the inside edge of the container box. Any following floats with a similar margin won't show the doubled margin. Only the first float in any given float row will suffer from the bug. Also, the doubled margin displays symmetry, working the same way to the right as it does to the left.

In my opinion, this seams to be not exact regarding to this test (it acts same way in quirks mode):

Code:

<!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=iso-8859-1" />
<title>double margin bug</title>
<style type="text/css">
* {margin:0;padding:0;}
div {float:left;background-color:red;}
p {float:left;margin-right:100px;width:100px;height:100px;background-color:green;}
</style>
</head>

<body>
	<div><p></p><p></p></div>
</body>
</html>

Here, we have a float left with a margin-right and the margin is doubled in IE6 when the margin is between the float and the container (I watch it in multiple IE. If someone has an other result in an official version of IE6 I would appreciate to learn about it). Or I might have misunderstood what you or positioniseverything were saying (English is not my mother language as you, of course, have understand

) ?

I know this might seams to be details but depending of the xhtml/css structure it could be helpful to know that the bug can occur with both lateral margins.

**wayfarer07** · 05-28-2008, 10:08 AM

This is why I avoid the use of margins on floating elements, unless it is on the top or bottom portion of the float. If I can find a way to substitute padding on the left or right to obtain the same results, I will. Unlike some other people on this forum (whom I have great respect for), I tend not to remember every reason that IE6 will break, and what the exact bugs are. Instead I develop habits that are based on the circumstances that cause floats to break.

A good habit to get into, for example, is to float right and left columns right and left, respectively, to allow a natural gap between the elements to let IE6 "breathe". This way, if additional styles need to be applied down the line, the layout will be flexible and able to adapt.

If you are like me, and tend to think abstractly, this approach may be helpful to you when dealing with floats. It is best, when doing CSS, to design your layouts for maximum flexibility.

**Candygirl** · 11:07 AM

Thank you for your detailed answer

Quote:

Originally Posted by wayfarer07

This is why I avoid the use of margins on floating elements, unless it is on the top or bottom portion of the float.

This is the way I used to do. But using padding is not always possible and I hate to be pushed using non logical property or heavier structure because of browser's bug (in that case the display:inline works pretty well).

I guess this is why I changed my mind and now try to understand every little small issue. In fact, understanding has layout, new formating context, exact bug's behaviors,... have really helping me making up quickly solid layout and, most thing, debugging faster existing layout.

Quote:

Originally Posted by wayfarer07

A good habit to get into, for example, is to float right and left columns right and left, respectively, to allow a natural gap between the elements to let IE6 "breathe".

Yes I agree with that; it helps a lot especially with %.

Quote:

Originally Posted by wayfarer07

If you are like me, and tend to think abstractly

I'm afraid I'm not

**LadynRed** · 05-28-2008, 02:22 PM

Quote:

Unlike some other people on this forum (whom I have great respect for), I tend not to remember every reason that IE6 will break, and what the exact bugs are.

If you've been dealing with IE's vagaries as long as I have, you'd have them committed to memory too

. I do my best to code my layouts to AVOID these bugs from happening, but it's just not always feasible and with 47 websites in my work queue, I don't have time to re-work every layout around that horrid browser when I can easily quash a bug with a single property in my CSS.