Header Layout in FireFox vs. IE

Hi all,

My site is https://www.eyemagic.net/store, and if you look at the two sites in IE vs. FireFox, you will notice that the header in FireFox has a greater height and is all spread out.

Does anyone have any advice for how to fix this? This one is killin me!!

Thanks!

Hi Dave,

Looks like you're making progress on the site as I write (or, well, since I just saw how old your post is, you made some progress since posting): in IE7 the only issue I see now is a gap in the border.

Unfortunately style problems are typical with IE (note that you'll want to test in each version of IE, as each has their own problems with css).

Best advice: use Firebug if you are not already. It is built for FireFox, but has a version for IE as well.

Also, if you have not already found them, search for IE Quirks (one of several methods of tricking MS browsers into behaving). If you look with keywords (like 'border' and 'height') you can get some good workarounds.

wbmangy,

Thanks for the reply. IE7 doesnt really have any issues besides that break in the border (btw do you know how to fix that? :)

The problem really comes with Firefox. The header is all spaced out. If you click another one of the links on the main navigation from the store (PRODUCTS for example), the header shrinks back down (although it still doesnt look good, this site was obviously optimized for IE).

Is there anything I can do to fix this besides completely converting the code to CSS? I really dont have time to learn how to do that...

Thanks,

Dave