Float element's bug in Firefox

[Marfola]

Hi

I've set up a row with two or more float elements. Rather than appearing on the same row the second float element "familyDest" (as well as any successive float elments) are displayed in a new line row. This doesn't happen always. But it occurs about half the time. FYI: The problem is unique to Firefox. The floats work perfectly in IE6 and 7.

Here's my html code:

<div class="destIcoFamily">
<div class="iconDest">
<div class="destIcons">
<div class="destIco" onmouseover="fillArea('id_area_icotitle','Historical Interest');" onmouseout="fillArea('id_area_icotitle','&nbsp;');"><img src="uploads/pics/archaeology_01.gif" width="32" height="32" border="0" alt="" /></div>
<div class="destIco" onmouseover="fillArea('id_area_icotitle','Bird Watching');" onmouseout="fillArea('id_area_icotitle','&nbsp;');"><img src="uploads/pics/expeditions_01.gif" width="32" height="32" border="0" alt="" /></div>
<div id='id_area_icotitle' class='destLabel' ></div>
</div>
</div>
<div class="familyDest"><img src="uploads/tf/img/familyrate4.gif" alt="" />&nbsp;</div>
 </div>

And here's my css

div.destIcoFamily {
  padding: 0px; margin:0px;
  margin-top: 6px;
  margin-left: 36px;
  width:699px;
  display:table;
  overflow:hidden;
}

div.iconDest {
  padding: 0px; margin:0px;
  padding-top:3px;
  border-bottom: solid 1px #2767D2;
  height:40px; 
  vertical-align: bottom;
  width:623px;
  float: left;
  overflow:hidden;
}

div.destIcons {
 padding: 0px; margin:0px;
 display:table;
}

div.destIco {
      padding: 0px; margin:0px;
      vertical-align: bottom;
      width:36px; height:40px; 
      padding-right:5px;
      float:left;
    }
    .destIco a img {
      padding: 0px; margin:0px;
      border: none;
    }
    div.destLabel {
      height: 32px;
      padding-left:10px; padding-top:8px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      color: #00356B;
      text-decoration: none; 
      text-align:left;
      vertical-align:middle;
      float:left;
    } 

div.familyDest{
  padding: 0px; margin:0px;padding-bottom:3px;
  width:76px;height:40px; 
  vertical-align: middle;
  border-bottom: solid 1px #2767D2;
  float: left;  
  overflow:hidden;
}

[oluoch28394]

The problem might be here:
div.destIcons {
padding: 0px; margin:0px;
display:table;
}

display:table; inserts a line break before and after the element so try:

div.destIcons {
padding: 0px; margin:0px;
display:inline-table;
}

I don't think its a "bug in firefox", more like firefox is being compliant, while IE is being forgiving.

[Marfola]

I've tried the suggested solution

display:inline-table

but unfortunately the result is the same. The row breaks after each floating element.

[jibra]

Hi,
Just wanted to share that you're not the only one!
I have a site demonstrating similar characteristics.

It doesn't show the firefox bug when accessed on local files, but does when accessed from the remote server about 50% of the time - is your site OK when accessed from your local file system by firefox I wonder?

J