CSS Guru needed, clearing a DIV?

[bigred]

Hey,

I'm currently transferring everything over to Wordpress for use as a CMS for my college at uni, however the default browser on all of the uni computers is Mozilla 1.7.8 and the website doesn't display correctly. The white should continue down to the footer, leaving the grey bars on the side. See the screenshot here, http://www.dur.ac.uk/alexander.marshall/theme/1.PNG

I think its something to do with the CSS .clear DIV not working in Mozilla, so I need to find a solution. CSS really isn't my thing, so any help would be much, much, much appreciated!

You can see the site here, http://www.cuths.com/development/

Thanks,
Alex

 

[Al Vallario]

I'm not sure how outdated Mozilla 1.7.8 is (Current version is 1.7.13), but it looks fine here on Firefox 1.5.0.2. I think you're right in diagnosing the problem though.

You could always go for the faux-columns technique (I'm just throwing that name at it, I assume it's the same principle) and set the DIV background as the page background (ie. create a background image which is white, the correct width, centre it and set it to repeat-y). Either that or it will be a lot of messing about with floats and suchforth...

 

[bigred]

Hey,

Thanks for your help. I stumbled across a solution just after posting, how typical

The bottom of the sidebar was originally <div class="clear"></div>
however changing that to <div class="clear">&nbsp</div> makes Mozilla render it correctly. This old version of Mozilla must ignore empty DIV's, or something, anyway I'm glad it works now

Alex

 

[blade007]

yes this &nbsp; is a trick for firefox because an empty div doesn't render properly most of the time.

 

[robmiller]

1.7.8 is new-ish. Probably has the same rendering engine as Firefox around 0.9.x or maybe even 1.0.

 

[TerraS]

Try putting in a comment section instead of the space. The space will be rendered otherwise.

<div class="clear"><!--x--></div>