Help me make my CSS compatible with Firefox please!

[blurredvision]

I've been working on my personal site for a couple of weeks now. I wanted to learn CSS, so I taught myself by building my own page from the ground up. It looks great in IE7, but there's a small issue with the middle div container in Firefox 2. If you look at my site here in both IE7 and Firefox, you'll see that in Firefox, the middle div container has an empty space inserted at the top, making the graphic not line up.

I'm guessing this is an easy fix, but I've only learned the basics of CSS, I'm no master yet. These cross-browser problems are beyond my skills at the moment. And just in case someone happens to find something wrong in another browser, I'm not worried about supporting any more than these two. Only about 8-10 people visit the site on a regular basis, and we all use IE7 and Firefox.

Thanks for any help!

 

[brikis98]

do yourself a big favor: get firebug and learn how to use it well. it lets you edit your CSS/HTML/JS on the fly, inspect the DOM, inspect the layout and much more.

taking a brief look at your site, a quick possible fix is to set margin: 0 on the h1 tag around forum navigation.

 

[blurredvision]

Originally posted by: brikis98
do yourself a big favor: get https://addons.mozilla.org/en-US/firefox/addon/1843">firebug</a> and learn how to use it well. it lets you edit your CSS/HTML/JS on the fly, inspect the DOM, inspect the layout and much more.

taking a brief look at your site, a quick possible fix is to set margin: 0 on the h1 tag around forum navigation.

Setting the h1 tag to a top margin of 0 fixed it, thanks a lot. Also, thanks for the extra bit of info and advice.

I should be getting a CSS book in tomorrow to reference in the future, so hopefully I'll be able to figure this stuff out on my own.