Hi all, I recently began putting together a website and when testing in Firefox and IE 7.0 i notice a slight difference.

Here is the site I am working on:
http://sandiego.calipartybus.com

If you view it in IE 7.0, you will notice there is a space between the menu bar and the content below it. However, in Firefox there is not.

I know this isn't the prettiest coded site, but it's what I know.

If anyone has any suggestions on how to fix the IE layout problem it would be much appreciated.

Thanks in advance!

Heres a clear example of where its coming from:



Try removing the selected button completely and see if it still has a gap, if not, its caused by your selected button (the one above)

Edit: Nevermind, thats not even a selected button. Just an IE bug apparently...

I found a way to make that one line up, still searching to get rid of the lines. I haven't gone over all the CSS (and don't really plan to...) but this does fix it.

Add the ID "fix" to the TR that contains the navigation menu items, then do this:

 <style type="text/css">
#fix td a {float: left;}
</style>

That will make the space only 1pixel high, but its not fixed completely.

Try validating your html, you have a lot of errors in there. If it doesn't work, try floating the image in your navigation: "#navigation a img { float: left; }"
This could be some sort of ie image margin bug.

There is no IE image margin bug.... and IE7 has beaten most of it's predecessor's bugs.

I suspect it has more to do with those hideous tables. However, make sure you zero out margins AND padding on the img tag.