• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 910
  • Last Modified:

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.)
0
RichieHindle
Asked:
RichieHindle
  • 3
  • 2
  • 2
2 Solutions
 
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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
 
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now