Accessibility

CSS Advisor

Doubled float margin bug

by CSSAdvisorAdmin on October 31, 2006
Edited by: sfegette on February 7, 2012
Avg Rating 4.1 (19)   |   Log in to rate post.

Tagged with Margin , Explorer 6.0 , Explorer 5.0 , Explorer 5.5 , Float , Explorer for Mac

Problem

When a margin is applied to a floated box on the same side as the direction the box is floated AND the floated box is the first one inside its containing box, the margin is doubled. (In other words, a left-floated box with margin-left set to move it away from its containing box will be twice as far away from the left edge of the containing box as intended.)

Solution

Specify display: inline; for the affected float.

Detailed description

This bug only reproduces when the floated element's margin extends in the same direction as the float itself, and is between the float and the container box's inside edge. Subsequent floats with similar margins won't reproduce this bug- just the first float in any row of floated elements.




Text ID: DOUBLED_FLOAT_MARGIN



Comments (7)

To add a comment, please Log in.




Floating ELEMENTS INSIDE A FLOATED CONTAINER

i cant get to fix the code once i float an element inside a container box, the background disappears it pushes up, im not sure what makes dat please help guys, its a government site

Mi solucion fue // Me solution is

display: inline; /* bug for IE6 in CSS*/

Sample CSS:

Error for IE6:
div.flotante {
float: left;
margin-left: 10px;
}

SAFE for IE6 is:
div.flotante {
float: left;
margin-left: 10px;
display: inline;  /* <---Solution for bug IE6 */
}

Possible Fix

I learned about this when it showed up during a Dreamweaver Browser Compatibility check. I'd created a class that floated a <span> to the right, but had also given the span a right margin value of 45px.
My fix was to remove the margin value and give the span 45px of padding on the right instead.
I ran the Compatibility check again and passed with flying colors. Also no apparent difference when viewing in a browser.
I can't say this will work in situations with other page elements, but it did the trick here. I should also mention that I'm designing with an XHTML 1.0 Strict DOM.

Hack

Since this bug only affects Internet Explorer, if the hack causes problems with other browsers, simply target IE by putting the declaration within a rule inside a style sheet that resides in conditional comments!

Is a Hack is needed

if i use "_display:inline" for resolve the bug, so ,if i remove the float property, what will be happen in ie? maybe we will forget the "_display:inline",so it's right in Non-ie explorer and will be wrong in ie. so, i think we need not use the "_display" hack.

ps: i learn littte english, so ...

Compatibility issues under different scenarios

Hi Mahesh

Can you elaborate on the scenarios that would cause compatibility issues with other browsers? This would help expand everyone's understanding of the problem and the solution. Thanks!

Should be used as a Hack

display:inline should be used as a hack as it only affects IE like this "_display:inline", if not used as hack there will be compatibilty issues with other browsers under different scenarios





CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (103)
Mozilla/Firefox (52)
Opera (18)
Safari (38)
CSS Properties
Background (25)
Border (10)
Color (10)
Float (23)
Font (6)
Margin (11)
Padding (9)
Position (40)
Text (30)
Width/Height (27)