Firefox div css trouble

[dirvish]

I've been staring at this problem for a while now and have come up with nothing. It has to be something simple...

This page: http://foundnews.com/index-new.php looks good in IE but goes all wacky in Firefox. What did I do wrong? It seems to be selectively applying things from my stylesheet (http://foundnews.com/fnn-style.css).

Any suggestions would be great!

[ampulator00]

I suggest you take a look at this:

http://validator.w3.org/check?uri=ht...1+Transitional

and this:

http://jigsaw.w3.org/css-validator/v...usermedium=all

Start theere; when I get more time, I'm going to going to test out what's wrong.

[dirvish]

Thanks, that helped me find some typos, but fixing those didn't change how it looks in Firefox.

[rmedek]

The big issue is that you don't have anything clearing the floated divs. So the footer is being pushed off to the side and that's the bg color you see under the floated divs.

After your last content div try adding "<div style="clear: both"><!-- clearing div --></div>". Hopefully that clears some of it up.

BTW, you're still missing a DOCTYPE, and if you're testing your pages in IE this means IE is viewing them in Quirks mode. I'd make sure things are validating, code for standards compliance, then debug for IE rather than the other way around.

[dirvish]

Originally Posted by rmedek

After your last content div try adding "<div style="clear: both"><!-- clearing div --></div>". Hopefully that clears some of it up.

Ahhh, yes. Much better! It is making the footer wider than everything else now, but I'll mess with that and see what I can do. Thanks!

[ronaldb66]

I'd strongly suggest validating the lot and fixing it, too; I did a quick validation and it showed up 63 errors. Some of those were typos, some were standards violations but shouldn't dramatically effect rendering (should be fixed, though), but I also saw a missing form end tag, which is much more serious an could throw off a stricter browser like FireFox.