CSS class display

I am having a CSS class with the following code. I am trying to put a DIV at a distance of 140px from the top of webpage and to put it in the middle (equal distance from left and right). It is displaying correctly in Firefox and Google Chrome but not displaying correctly in Internet Explorer 8. Can anyone tell me what is the problem with this code? Also can anyone give me some l开发者_JAVA百科ink with browser compatibility guide?

div.main
{
    padding: 0px;
    width: 980px;
    /*height:1350px;*/
    /*border: 1px solid red;*/
    margin: 0 auto; /*helps in getting the DIV to be in middle i.e. equal distance from left and right*/
    overflow: hidden;   
    margin-top:140px;
}

---

I find QuirksMode most helpful for browser compatibility info, plus it has some other great info.

The problem, however, depends on more than just the CSS. In order to answer your question, we'll need to see some HTML and the rest of the CSS you've got. And a description of what's incorrect with IE's rendering. Without seeing that, my first suggestion is to make sure you're using a strict DOCTYPE.

Note that centering the DIV will only center it in the containing block (probably BODY), which, wichout an explicit width, will only be as wide as the content and not the full width of the window.

---

margin-top:140px; is "the problem". To reach your aim use:

• padding-top instead of margin-top;
• if you cann't - make a wrapper div and apply padding-top to it;
• or apply position: relative/absolute; top: 140px; to the div. It is suitable sometimes.