Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   margin differences in IE and FF esp. top and bottom (http://www.velocityreviews.com/forums/t640043-margin-differences-in-ie-and-ff-esp-top-and-bottom.html)

state.cs@gmail.com 10-15-2008 09:22 PM

margin differences in IE and FF esp. top and bottom
 
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 10-15-2008 10:50 PM

Re: margin differences in IE and FF esp. top and bottom
 
state.cs@gmail.com wrote:
> 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 10-16-2008 10:11 AM

Re: margin differences in IE and FF esp. top and bottom
 
state.cs@gmail.com 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.

--
Mayeul

state.cs@gmail.com 10-16-2008 01:48 PM

Re: margin differences in IE and FF esp. top and bottom
 
On Oct 16, 5:11*am, Mayeul <mayeul.marg...@free.fr> wrote:
> state...@gmail.com 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.


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.



>
> --
> Mayeul



GTalbot 11-25-2008 05:04 AM

Re: margin differences in IE and FF esp. top and bottom
 
On 15 oct, 17:50, C A Upsdell <cupsd...@upsdell.invalid> wrote:

> 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/...ultValues.html

Regards, Gérard

C A Upsdell 11-25-2008 02:23 PM

Re: margin differences in IE and FF esp. top and bottom
 
GTalbot wrote:
> On 15 oct, 17:50, C A Upsdell <cupsd...@upsdell.invalid> wrote:
>
>> 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.


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.


All times are GMT. The time now is 03:58 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.