HTMLHelp Forums > CSS Margins in IE versus Firefox

Full Version: CSS Margins in IE versus Firefox

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

Airika

Oct 27 2008, 06:52 PM

I'm having trouble with my layout and how it looks in Firefox, and how it looks in IE. It looks great in Firefox, everything is aligned the way I'd like to be, but in IE, everything is out of order and such, and I think it's my margins and padding.

Link: http://rolkurstables.dark-equine.net/amirnew.php

CODE

body {
    background: #bfadad;
}
#top {
    background: #bfadad;
}
#container {
    background: url(images/body.png) repeat-y;
    width: 677px;
}
#header {
    height: 339px;
    background: url(images/header.png) no-repeat;
}
#footer {
    background: url(images/footer.png) no-repeat;
    height: 50px;
    clear: both;
    margin-top: -170px;
    padding-left: 190px;
    text-align: center;
}
#content {
    width: 460px;
    float: left;
    margin-top: -160px;
    padding-left: 190px;
}
#pictureleft {
    width: 260px;
    height: 200px;
    float: left;
    margin-top: -100px;
    padding-left: 190px;
}
#pictureright {
    width: 200px;
    height: 200px;
    float: left;
    margin-top: -200px;
    padding-left: 452px;
}
#pedigree {
    width: 260px;
    float: left;
    margin-top: 3px;
    padding-left: 190px;
}
#stats {
    width: 200px;
    float: left;
    margin-top: -195px;
    padding-left: 452px;
}
#achievements {
    width: 260px;
    float: left;
    margin-top: 6px;
    padding-left: 190px;
}
#breeding {
    width: 200px;
    float: left;
    margin-top: -271px;
    padding-left: 452px;
}

pandy

Oct 28 2008, 12:30 AM

You use no doctype. That guarantees browsers are in Quirks Mode.
http://hsivonen.iki.fi/doctype/

What you see is the old box model problem. In the standards box model the width of a box means content width. Padding and borders are added outside that. IE before version 6 had its own box model where width meant total width, including padding and margins. When in Quirks Mode newer versions of IE emulate the quirkier rendering of older versions. That includes using the faulty box model.

Put a doctype that triggers Standards Mode (AKA Strict Mode) on. Once you have a doctype you can also validate and fix the errors - they aren't many.

http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.