My website's margins aren't right in FireFox

[Reduced Logic]

I recently switched to FireFox and my website (http://reducedlogic.000k2.com/) doesn't adjust properly. It looks "squished" to the left (which throws the text off). I'm guessing it's a CSS problem. I'm not sure what to do about it. I tried the W3C CSS validator, but it didn't help any. It looks perfectly fine in IE. Can anyone help?

[dabbler]

I looked in IE and Firefox and they look pretty much the same - in the light incarnation at any rate.

[DCElliott]

Because you are using absolute positioning they look pretty much the same. Your use of absolute positioning will hurt you in the long run compared with using a two column floated menu design, though, since you will not be able to add a full-width footer element and such if you wished to in the future.

You also need to work out a way to cache your rollover images since there is a very noticable delay in the hover image the first time which is annoying to the user. There are a couple of techniques for doing this including one that has the original and rollover actually both in the same image. The image is displayed as a background and then the background origin is switched so that the alternate comes into view. I can suggest resources for this if you are interested.

DE

[dabbler]

Those CSS rollovers using images are pretty impressive, too. I have tended to go for CSS menus rather than the normal rollover images, partly because of those annoying delays when they are loaded, but also because of the speed of page loading, and the ease of maintenance. (especially using a php include for the menu. Only one menu to keep up to date if I expand the site.