Link to home
Start Free TrialLog in
Avatar of RichieHindle
RichieHindle

asked on

Firefox: Gaps between float:left divs

This HTML:

<html>
<body style='font-size: 90%'>
<div style='float: left; width: 4em; background-color: orange;'>Div A</div>
<div style='float: left; width: 4em; background-color: pink;'>Div B</div>
<div style='float: left; width: 4em; background-color: orange;'>Div C</div>
</body>
</html>

renders perfectly in IE, with the three divs touching each other.  In Firefox 1.0, there's a one-pixel white gap between Div B and Div C.  Does anyone have a workaround?

This HTML will be programmatically generated according to formatting specified by an end-user, so it has to work regardless of the font size, the widths of the divs, the colours, etc.  (Removing the font-size: 90% makes it work,  but that's no good - it has to work with arbitrary formatting.)
Avatar of VirusMinus
VirusMinus
Flag of Australia image

Does the font size have to be a percentage? Try using ems instead of %ages
<body style='font-size: 1em'>
<div style='float: left; width: 4em; background-color: orange;'>Div A</div>
<div style='float: left; width: 4em; background-color: pink;'>Div B</div>
<div style='float: left; width: 4em; background-color: orange;'>Div C</div>
<br style="clear:both;"/>
</body>

seems to fix it
Avatar of RichieHindle
RichieHindle

ASKER

The specified font size doesn't really matter.  If I don't specify a size (ie. I remove the font-size: 90%) then it still goes wrong if you zoom the page in or out using Ctrl-Plus or Ctrl-Minus.  I suspect the gaps are sub-pixel, and it's pot luck whether at any given font size they round up to one pixel or down to none.  It's probably just luck that they don't appear when no font size is specified.
SOLUTION
Avatar of seanpowell
seanpowell
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Sean: Yow, that's horrible, but it works.  8-)

I have a similar problem with horizontal gaps appearing between lines, where a line is a div with line-height: 0.5em.  I've fixed that by using line-height: 10px instead.  Even with different font sizes that looks fine.

More seriously, I've hit a simillar rounding error on IE.  This HTML:

<html>
<body>
<div style='width: 20em;'>
<div style='margin-left: -1px; float: left; width: 4em; background-color: orange;'>Div A</div>
<div style='margin-left: -1px; float: left; width: 4em; background-color: pink;'>Div B</div>
<div style='margin-left: -1px; float: left; width: 4em; background-color: orange;'>Div C</div>
</div>
<div style='clear: both; width: 20em;'>
<div style='margin-left: -1px; float: left; width: 3em; background-color: orange;'>Div A</div>
<div style='margin-left: -1px; float: left; width: 5em; background-color: pink;'>Div B</div>
<div style='margin-left: -1px; float: left; width: 4em; background-color: orange;'>Div C</div>
</div>
</body>
</html>

should show the two 'Div C's lining up 8em from the left margin (the only difference between the two rows is 4em/4em vs. 3em/5em).  But in IE6 at the Smaller text size, they're off by one pixel.  Presumably this is another similar rounding error.  Any suggestions?  (If you want to suggest "Yes, open another question!" then I'll do that 8-)
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Sean: Very cunning, but I can't apply that to the general case.  Since you've already answered this question perfectly as far as the question went, I've awarded you the points and opened a new question (http:Q_21201761.html) explaining the problem in more detail.  Hope to see you there!