Float Rendering Problem In FireFox

[BoulderBum]

Okay, so I have this site that looks great in IE, bad in Firefox.

Basically what I want is a section that has an image floating to the left, an image floating to the right, and text in between that continues beneath the left section.

The HTML gets spit out in a format like this:

<div style="clear: both">
  <div style="float: right">
    <div style="height:203px;width:182px;">
      <img style='border-width: 0px;'  src='...'/>
    </div>
  </div>
  <div style="float: left">
    <img align="left" src="..." 
           style="border-width:0px; margin-right:17px" />
    <strong>Title here,</strong> 
    A lot of text goes here... 
  </div>
</div>

In FireFox, all of the elements get stacked right on top of each other and knock off the alignment of everything else. Can anyone tell me how to get this to render properly in Firefox and, even better, can someone tell me what I'm doing wrong?

Oh, by the way, to see the real world prototype that doesn't render well in firefox, you can visit here:

http://rockcapital.web140.discountasp.net/Default.aspx

MCP, MCTS - .NET Framework 2.0 Web Applications

 

[Vragabond]

It's because your #content has a display: table; specified to it. What is with that? Where have you seen such a technique being used? Why do you use a code that clearly instructs an element to behave unnaturally (and then don't even follow through, as tables need rows and cells and yours doesn't have that), is not supported across browsers and causes nothing but problems? Again, it works in IE because IE ignores the display property. Remove that display and things should fall into place. If you need help with clearing floats after that, look around here -- there have been many posts with regards to that, but a simple solution is to add [tt]overflow: auto;[/tt] to your #content.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[BoulderBum]

The live site is based on a purchased HTML template (tweaked a little for my technology/site). Not sure why they chose "display: table" to be honest.

I experimented a little after I wrote the last note, however, and noticed that even without the display: table thing (which I'll try removing soon), Firefox still doesn't like the floating elements unless I specify fixed widths for the left and right divs.

MCP, MCTS - .NET Framework 2.0 Web Applications

 

[Vragabond]

On the live page, all I did was:

1. Remove display: table; from the #content.
2. Add overflow: auto; to the #content to make content wrap around the floated elements.

And the page looked perfect. I don't know what is not working at your end.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[BoulderBum]

I started removing the "display: table" where I found them, but it doing so eventually messed up the background image, so I stopeed.

As for the "overflow: auto" it didn't seem to do anything for me in FireFox.

I resigned to use absolute widths so the floating elements fell into place in FireFox, but there is still one problem: there's a vertical offset for the #content equal to the size of the section with all the floating elements.

(See

http://rockcapital.web140.discountasp.net/Default.aspx

)

Does that page render properly for you in FF?

MCP, MCTS - .NET Framework 2.0 Web Applications