views:

470

answers:

3

In this case, internet explorer doesn't seem to give the right amount of margin. It looks like it measures the margin from the top of the box and ignores the padding. Why is this? Is there a good workaround? Here's an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
        <title></title>

        <style type="text/css">
            .messagebox
            {
                border: solid 2px black;
                background: blue;
                color: white;
                padding: 10px; /* Problem only when padding set */
            }

            h1, h2, h3, h4 
            {
               margin-top: 12px;
            }

        </style>
    </head>
    <body>
        <div class="messagebox" style="width: 300px">
            <h4 style="text-align: center">In IE, this text is 10px higher than in FF.</h4>
        </div>
    </body>
    </html>

I'm working in IE7 and FF3. Thanks.

A: 

You may try

body{
zoom:1;
}

I'm not sure if this will help, but it could be a quick fix if it does!

Kevin Brown
Tried it--no luck.
Kyle Ryan
+2  A: 

Welcome to the IE box model bug

Matt Lacey
The quick fix to this problem is to change your doctype to HTML 4.01 strict.
KeRiCr
Thanks for the link. With regard to the doctype tag, I changed it to HTML 4.01 strict but it doesn't seem to make a difference: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Kyle Ryan
A: 

I don't have a specific answer but I have struggled with the differences between IE and FF as it relates to margins and padding.

You may need to explicitly put in the doc type tag. Especially strict mode. That should get them force them into the same layout model. From there on you are dealing with an art rather than a science.

Good luck.

Tom Hubbard