margin differences in IE and FF esp. top and bottom

state.cs · Oct 15, 2008

Readers,

I am in the process of learning CSS. I wrote the following CSS and
HTML:

<style type="text/css">
.wrapper {
width:470px; background-color:#000000; color:#FFFFFF;
}
.testing {
margin:5px; background-color:#CCCCCC;
}
</style>

<body style="background-color:#FFFFCC; margin:0; padding:0;">
<div class="wrapper">
<div class="testing">What's up dude?</div>
</div>

IE 5.5, 6 and 7 display a 5px black area all 4 sides of div.testing.
FF 2 and Chrome display 5px black area only on the right and the left,
but nothing on the top and bottom. I would like FF and Chrome to
display a 5px on the top and the bottom as does IE. How can I achieve
that?

Can someone please indicate the reason for such difference between IE
and FF/Chrome and how I can overcome it in future? I have read the box
model and various CSS hacks, but with limited practical knowledge, I
am a little confused.

Thank you.

C A Upsdell · Oct 15, 2008

Readers,

I am in the process of learning CSS. I wrote the following CSS and
HTML:

<style type="text/css">
.wrapper {
width:470px; background-color:#000000; color:#FFFFFF;
}
.testing {
margin:5px; background-color:#CCCCCC;
}
</style>

<body style="background-color:#FFFFCC; margin:0; padding:0;">
<div class="wrapper">
<div class="testing">What's up dude?</div>
</div>

IE 5.5, 6 and 7 display a 5px black area all 4 sides of div.testing.
FF 2 and Chrome display 5px black area only on the right and the left,
but nothing on the top and bottom. I would like FF and Chrome to
display a 5px on the top and the bottom as does IE. How can I achieve
that?

Can someone please indicate the reason for such difference between IE
and FF/Chrome and how I can overcome it in future? I have read the box
model and various CSS hacks, but with limited practical knowledge, I
am a little confused.

The <body> tag is inside the <html> tag, and browsers do create margins
and/or padding for the <html> block. This will get rid of any html
margins and padding on any browser.

html { margin:0; padding:0; }

Mayeul · Oct 16, 2008

(e-mail address removed) a écrit :

Can someone please indicate the reason for such difference between IE
and FF/Chrome and how I can overcome it in future? I have read the box
model and various CSS hacks, but with limited practical knowledge, I
am a little confused.

Hi,

It always help to provide an URL to the test case.

Anyway, you don't see the 5px at the top and bottom because .wrapper's
and .testing's vertical margins collapse:

http://www.w3.org/TR/CSS21/box.html#collapsing-margins

So the inner box's margin does not force the outer box to grow
vertically, and then, no additionnal black background.

You could get these black areas on all edges by using 5px padding in the
outer box, rather than relying on the inner box's margin. It works with
IE too.

state.cs · Oct 16, 2008

(e-mail address removed) a écrit :

Hi,

It always help to provide an URL to the test case.

Sorry about that; I was working on a local (non-public) web server.

Anyway, you don't see the 5px at the top and bottom because .wrapper's
and .testing's vertical margins collapse:

http://www.w3.org/TR/CSS21/box.html#collapsing-margins

I did go through this but there were some aspects I did not
understand, thereby limiting overall understanding of collapsing
margins. When I drew a border around div.wrapper, I was able to see
that the 5px top and bottom margin existed - just that they weren't
colored black in FF/Chrome but they were colored black in IE. That
confused me.

So the inner box's margin does not force the outer box to grow
vertically, and then, no additionnal black background.

You could get these black areas on all edges by using 5px padding in the
outer box, rather than relying on the inner box's margin. It works with
IE too.

That definitely helped. Instead of adding a margin to div.testing it
helps adding padding to div.wrapper. Thanks for your suggestions.

GTalbot · Nov 25, 2008

The <body> tag is inside the <html> tag, and browsers do create margins
and/or padding for the <html> block. This will get rid of any html
margins and padding on any browser.

html { margin:0; padding:0; }

Chuck, are you sure about this?

No browser that I know of styles the html with a margin and a padding
on the <html> block element.

http://www.gtalbot.org/DHTMLSection/BrowsersDefaultValues.html

Regards, Gérard

C A Upsdell · Nov 25, 2008

GTalbot said:
Chuck, are you sure about this?

No browser that I know of styles the html with a margin and a padding
on the <html> block element.

Hmmm. I remember it happening, but a check with a suite of modern
browsers did not reveal any that does. Perhaps with an old browser?
I've been making websites for a long time: sometimes from habit I design
around problems that no longer exist; and often my older sites retain
workarounds for browsers which are long extinct. Sigh.

Top NOT top?	2	Feb 13, 2021
Align img inside nav tabs section	5	Dec 29, 2023
Image on header	2	May 2, 2024
How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
Dropdown menu in a fixed navbar	2	Apr 1, 2024
vertical scrolling + margin-bottom	4	Jan 1, 2008
Why is the e.target not working here?	1	Dec 29, 2022
How to position the tooltip comment on these buttons?	9	Nov 4, 2023

margin differences in IE and FF esp. top and bottom

state.cs

C A Upsdell

Mayeul

state.cs

GTalbot

C A Upsdell

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads