margin differences in IE and FF esp. top and bottom

S

state.cs

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

C A Upsdell

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; }
 
M

Mayeul

(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.
 
S

state.cs

(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.
 
C

C A Upsdell

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top