A–C
D–H
I–Z
Developer services
Project centers
Community resources
- Adobe Cookbooks (share code)
- CSS Advisor (browser bug fixes)
- Exchanges (share components)
- Adobe Labs
- Adobe Open Source
- Forums
- RSS feeds
- Bug base
- User groups
- Adobe Community Experts (ACE)
- Developer events
Integration
Product documentation
Downloads
Samples
Training and books
- Online training
- Classroom training
- Certification
- Adobe Developer Library
- Adobe Press
- Safari Books Online
Newsletters
Blogs
Archives
ADC program
Additional resources
CSS Advisor
Doubled float margin bug
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 (6)
To add a comment, please Log in.
Mi solucion fue // Me solution is
by byts on October 8, 2008
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
by Phil Parr on August 28, 2008
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
by neilcorke on November 24, 2007
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
by littlekindy on April 2, 2007
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
by LoriHC (Dreamweaver Team) on March 28, 2007
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
by Mahesh Babu.R on March 27, 2007
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