Site-specific: Firefox vs. IE CSS peculiarities

Question

I'm trying to learn CSS. I've taken great pains to get everything right. My pages all validate and they look correct on Firefox and mostly correct on Chrome. However IE is all over the place. In relation to Firefox, the following is wrong in IE (in order of importance):

1. the main body box is pushed below where the left boxes end
2. the upper-right drop-down stuff (mouse over "Settings") is totally off in the weeds (it's off in Chrome also but in a different way)
3. "Recipes" tab is supposed to have no visible bottom border
4. search button is askew in relation to search box
5. logged out version: the upper-right login elements are askew

Logged in: http://www.mcrackan.com/recipes/csstest-loggedin.htm

Logged out: http://www.mcrackan.com/recipes/csstest-loggedout.htm

CSS: http://www.mcrackan.com/recipes/css/default.css

Links, functionality, etc. are not guaranteed to work on these pages. It's just static snapshots to show layout.

Can anyone point me in the right direction for whatever I'm doing wrong?

Answer 1

What version of IE are you running? Sounds like most of your issues may be caused by the IE Box Model Bug.

Answer 2

I never start a new website design in css without putting Eric Meyer's Reset CSS in first.

It resets all the differences in all the browsers, so that you've got a even playing field to start from. From there-out, everything should be the same in all browsers.

Answer 3

You need to Reset your CSS (Dean, above recommends Eric Meyer's Reset CSS). I prefer Yui Reset CSS (I actually like their own Reset / Fonts / Grids CSS). As part of doing this you also need to use Standards Mode.

Finally, you need to be aware that some things will differ in browsers no matter what. So if you run into this situation, it's either work around it, or live with it.