web page layout issue in firefox 3.6 /mac os

Question

This web page does not display correctly in firefox 3.6 /mac os.

http://solcuisine.com/dev/?page_id=2

.. and here's how it looks in firefox3.6/mac:

firefoxmac.png located in dev/ directory of same domain (sorry, can't post more than one link here)

http://solcuisine.com/dev/firefoxmac.png

The css has been validated in w3.org. And the page looks okay in firefox 3.6 in vista/xp, safari, chrome, ie8/7 and opera. Can't figure out what's the specific problem in css.

Any help would be appreciated.

Answer 1

Found the problem:

You need to turn off "overflow:auto" in #content .page (style.css line 295)

It looks like this right now:

#content .page {
    background:url("images/pagecontent-bg.png") repeat-x scroll center bottom #FFFFFF;
    overflow:auto; /*DELETE THIS LINE*/
    padding-bottom:50px;
}

Then you need to add a "clear break". If you don't have it already, create a style called clear:

 .clear { clear:both; }

Then insert the clear break after the end of your right column. Like so:

<div class="right">
    ...your right columns is here...
</div>
<br class="clear" />

That will fix it.