IE 8 / Firefox margins

Hello,

I’ve recently created 3 graphics that consist of header, content, footer, which are written in the html as the following:


<div id="wrapHeader"></div>
<div id="wrapContent">test</div>
<div id="wrapFooter"></div>

… with the CSS:


#wrapHeader {
     background: url('/images/bg_head.png') no-repeat;
     width:900px; height:97px;
     margin-left: -25px;
}

#wrapContent {
     background: url('/images/c_head.png') repeat-y;
     width:900px; height:auto;
     padding: 12px;
}

#wrapFooter {
     background: url('/images/foot_head.png') no-repeat;
     width:900px; height:56px;
     padding: 12px;
}

IE doesn’t need any margins to correct the graphics and line them up in the center properly, firefox does, though in IE 8 it looks like you actually did not declare the margins at all.

Please look at the screenshots I’ve uploaded.

Thanks.

Unless you specify your own default margins and padding, the browser default values will be used.

Generally where you get different results like that in different browsers it means you forgot to specify your own default to override the browser defaults in the browsers where the defaults differ from yours.

Default margins, an example would be? The only method I can think of is setting the margins to 0, if you mean that? Thanks for the quick answer by the way…

That is one option. It doesn’t really matter what you choose as long as it works for your site. The reason for using your own default value is to avoid the problem of different browsers having different defaults.

I don’t understand what your problem is. There are no default margins to begin with (other than the 8px that browsers put on body). The second and third boxes are 24px wider than the first due to the padding.

All three boxes naturally align their left edges, and the two lower boxes stick out to the right. Edit the bigger boxes by reducing the width by an amount equal to the combined left and right padding, i.e. 24px. Better yet, wrap all three in another box with the desired width, and remove the width property from the now inner boxes.

To center the boxes horizontally, give each box {margin: 0 auto;}, or if using a master-wrap, on it.

All the above presumes you have a proper DTD to trigger standards mode.

cheers,

gary

Some browsers have an 8px default margin, others use different default values. You can’t rely on it unless you set it yourself.

Ok, I finally fixed it. It was a simple error, - I applied the paddings on both, content, and footer, thats why it looked so weird. Thanks to all of you.

Show me which browsers have other than an 8px margin. I usually do set it myself, to zero, because I don’t want any margin, not because of alleged browser differences.

cheers,

gary

Well to start with both Firefox and Opera allow the browser owner to change the browser defaults to whatever they want and so with those two browsers the default can be anything at all.

Also it is only the body of modern browsers that commonly has an 8px margin. Other elements in the page will have different default margins and there are no guarantees that different browsers will set any of them the same unless you override the default with your own. After all there is nothing in the standard that specifies what the default margins for any element are supposed to be.

I ask

Show me which browsers have other than an 8px margin.
and you reply:

with a user configuration choice.

Also it is only the body of modern browsers that commonly has an 8px margin. Other elements in the page will have different default margins and there are no guarantees that different browsers will set any of them the same unless you override the default with your own. After all there is nothing in the standard that specifies what the default margins for any element are supposed to be.
Again, which common graphic browsers use conflicting default values? (I’ll grant you the older IE and Opera versions which used margin instead of padding for list indents, however the value was and still is 40px.)

You’re setting a strawman argument. If you want to control a property value, then do so, but don’t make the specious argument that it’s for cross browser compatibility, because it’s not.

cheers,

gary

Was just about to point that out - but if that was being applied differently in IE than FF, then you don’t have a DOCTYPE and IE is in quirks mode.

Though that plays to one of my rules - NEVER declare padding the same time as width… This is why I’d slap an extra container around all three so I only have to set my width and centering ONCE instead of on each and every child item.

Shouldn’t have lined up in the first place anyways though - you’ve got margin-left:-25px on only the first one for god knows what reason…

Kinda funny, first one 900px wide with 25px slide to the left, second two 924px wide without slide… Not sure what you were trying to accomplish.

Of course since it’s a fixed width, I’d not have three separate images there, I’d have one and slide it around. Just put the header over the footer and then a tall version of your repeat-y tile to the left… would probably if .png even be a smaller total filesize.

Oh, and you know that you don’t need the single quotes if you don’t have spaces in your filenames, right?


<div id="pageWrapper">
	<div id="header"></div>
	<div id="content">test</div>
	<div id="footer"></div>
</div>


#pageWrapper {
	width:900px;
}
#header {
	height:97px;
	background:url(/images/pageBackground.png) 0 0 no-repeat;
}
 
#content {
	padding:12px;
	background:url(/images/pageBackground.png) -900px 0 repeat-y;
}
 
#footer {
	height:56px;
	padding:12px;
	background:url(/images/foot_head.png) 0 -97px no-repeat;
}

One 1800x153 image would probably be smaller than your three thanks to .png’s rather robust encoder, and it’s two less handshakes for faster page loads…

…and that one extra div makes it simpler to change the width, change it to semi-fluid if desired, play with padding until blue in the face without having to spend time on any extra math… and makes it work all the way back to IE 5.x