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.)
LVL 14
RichieHindleAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

VirusMinusCommented:
Does the font size have to be a percentage? Try using ems instead of %ages
0
VirusMinusCommented:
<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
0
RichieHindleAuthor Commented:
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.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

seanpowellCommented:
Richie, your statements so far are absolutely correct - it's just the rounding off with the rendering engine.

If it's just a single pixel, then add this to your div styles:
margin-left:-1px;

Sean
0
RichieHindleAuthor Commented:
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-)
0
seanpowellCommented:
Sure, change how you're floating the div's. Then we don't need the margin fudge:


<html>
<body>

<div style='width: 20em;'>
      <div style='float: left; width: 8em; background-color: orange;'>
            <div style='float: right; width: 4em; background-color: pink;'>
                  Div B
            </div>
            Div A
      </div>
      <div style='float: left; width: 4em; background-color: orange;'>
            Div C
      </div>
</div>

<div style='clear: both; width: 20em;'>
      <div style='float: left; width: 8em; background-color: orange;'>
            <div style='float: right; width: 5em; background-color: pink;'>
                  Div B
            </div>
            Div A
      </div>
      <div style='float: left; width: 4em; background-color: orange;'>
            Div C
      </div>
</div>

</body>
</html>

Sean
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RichieHindleAuthor Commented:
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!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.