I have a couple of things to note.
1) You have multiple instances of things in your stylesheet. For example, you have two “body”, “#header” and “#page” elements. I didn’t read it (I skimmed) enough to see if you have multiple calls for the same thing – like margins set so in one and differently in another – but the last one mentioned will override anything you have in the first.
2) IE views margins and padding differently than IE. For example, if you have a div that’s 200 pixels wide, with 20 pixels of padding, Firefox will render it as such:
200px + 20px (on left) + 20px (on right) = 240px total width.
IE will add in the padding, but still make the content div only 200 pixels wide, so that content is actually 160 pixels wide with 20px padding.
Then, on top of that, IE also likes to add in a nice 3 pixel margin to stuff like images and divs. The 3 pixels doesn’t seem like much, until you try to adjust your math to what you have added it up to be – not knowing about the 3 pixel difference in IE.
Now, what’s happening is you probably have the 3 pixel issue showing up, and it makes your divs too wide, and therefore causes it to drop. Also, if your margins and padding are off, the same thign will happen because of the differences in the way the two browsers render margins and padding.
Do NOT use the *html thing. It’s a hack. Avoid hacks at all costs. When IE7 comes out, most hacks will be rendered useless and your site will fall apart in IE7, causing you to go back through with the same headaches all over again.
In between the <head></head> of your document, put this in:
<!–[if IE ]>
<style type=”text/css”>
* {
margin:0;
padding:0;
border:0;
}
</style>
<![endif]–>
It’s called a “conditional comment”. It will target IE browsers only, and leave the others to ignore it completely. What the above says: “*” is a wildcard – saying “absolutely everything on the page should have a margin, padding and border of 0”. Anything that specifically states a margin, padding or border will still have it – but by default, it’s all removed.
If you still have the drop, then your math is off on a div and you need to add the adjustment to the conditional comment above.
That will fix your issues in IE.
