IE vs. Firefox CSS help

[David]

I've been fiddling around with my site's CSS page for a couple hours now to no avail. Basically, I made images to use as my site's navigation buttons and loaded them up. In firefox they look perfect, exactly where I wanted them. Internet Explorer, however, drops them all by about 5-10 pixels so they're dipping below the navigation bar. I've so far failed to find a solution to this and am calling a quits for the night. Can anybody here tell me what's causing this?

the site: http://dave-terry.com

the CSS: http://dave-terry.com/wp-content/themes/untheme-two-column/style.css

 

[fade]

Pretty sure you're experiencing the infamous "box model problem". IE differs from the rest of the browsers in how it deals with nested paddings. Your best bet is to use only margins. The "mystery space at the top of the page" pops up a good bit with IE.

(ASIDE: despite the fact that people are constantly down on MS and the lack of standards compliance in IE, this is the one place MS got it right (according to W3C) and everyone else got it wrong)

 

[David]

Problem semi-fixed. Thanks Fade! I got rid of some of the padding: 0;s and the displacement reduced down to 1 pixel. I'd prefer it flush with the navigation bar, but it at least looks decent enough now for me to concentrate on something else.