[thelist] CSS Spacing differences between IE & Moz

Tue Jul 9 22:59:07 CDT 2002

Hi All,

I have a simple page I'm constructing. In this I have a <div> whose top is absolute positioned and in this div I have an <H1>.

Viewing this in IE and Moz 1 I get very different vertical positioning of the text on the page, with IE placing the text higher than does Moz... the distance appears to (closely) approximate that between the top of the text and its baseline.

I've also noticed that Mozilla genarates larger indents than IE for things such as lists...

I suspect something to do with different interpretation (or default) handling of margins, but would love to have a better understanding of the causes so that I can build a solution where text placement is consistent across browsers.

Testing is currently on IE 5.0, 5.1 & 5.1.5, and Moz 1.0 & 1.1a, all on Mac platform.

The relevant parts of the stylesheet in question are (apologies for the line-wrap):

body
    {
        margin:             0px 0px 0px 0px;
        padding:            0px;
        text-decoration:    none;
        font-family:        Verdana, Geneva, Helvetica, "Trebuchet MS", Arial, sans-serif;
        font-size:          11px;
        font-weight:        normal;
        color:              #003399;
        background-color:   #fff;
    }
#leftcol
    {
        position:           absolute;
        top:                90px;
        padding:            0px;
        margin-left:        10px;
        margin-top:         15px;
        margin-right:       40%;
        margin-bottom:      10px;
        width:              58%;
        background-color:   #ffffff;
    }
#leftcol h1
    {
        font-size:          24px;
        font-weight:        bold;
        background:         transparent;
    }
#leftcol p
    {
        margin-top:         8px;
        margin-bottom:      6px;
        text-align:         justify;
        background:         transparent;
    }

And the html that uses this looks like this

<body>
.
.
.
<div id="leftcol>
    <h1>Some header text</h1>
</div>

Thanks for any shedding of light on this

Best regards

Rob