Question

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 link 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;
}

Answer 1

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.