margin 0 causes margin-top to extend dramatically

**2kool2** · Dec 12, 2002 12:43

Hi,

I have been using the following to "control" my tags:

Code:

body {margin:-10px 0px 0px -10px} /* Netscape margin fix */
html,body{font:100%/120% Verdana,Helvetica,sans-serif; color:black; background:white;}
html,body,div,p,form,ul,li,h1,img,label{padding:0px; margin:0px; border:0px}

The problem is that when I use p / h1 inside a div or table cell it displays a ludicrously large (1000+px) top margin (maybe padding but don't think so).

So far my only solution is to state margin:1% in the p / h1 tags that follow

Code:

h1{font:bold 100%/120% Verdana,Helvetica,sans-serif; color:#669999; margin:1%; margin-top:3%}

p {font:80%/120% Verdana,Helvetica,sans-serif; color:black; margin:1%; margin-top:3%}

Has anyone else come across this?
Could it be due to mixing pixels and percentages (margin:0px with margin-top:3%)?
Is there a more elegant method of correction?

Would it be best to remove h1 and p from the global definition?

This problem may be browser specific, I'm using IE6.

Any help appreciated.

**Mike** · Dec 13, 2002 18:53

I notice your code has "netscape fix" in it; does it really eliminate the margin in netscape? What I would do is

Code:

<style>
body  {margin: 0px;}
</style>

<body marginheight="0" marginwidth="0">

That won't validate with W3C, but it will get rid of the NS margin.

Oh, you don't need to define the HTML tag in your css, it's useless to do so, and you should just keep the formatting for each element separate.

**2kool2** · Dec 16, 2002 09:53

Thanks for the response.

The netscape fix does work but not as shown in the snippet shown as it is overwritten by the definitions that follow it.

html and body tags are only included for completeness though, as far as I am aware, the html definition does nothing.

After further testing (with long hand css) the problem I am experiencing still persists.

It is definitely envolves the margin:0px definition. It seems that once defined in pixels it requires redefining if % is used.

Code:

body{font:100%/120% Verdana,Helvetica,sans-serif; color:black; background:white;}
body,div,p,form,ul,li,h1,img,label{padding:0px; margin:0px; border:0px}

p {font:80%/120% Verdana,Helvetica,sans-serif; color:black; margin:0%; margin-top:3%}

If the margin:0% is removed, then a p tag is placed in a div or td, the height is somehow taken as a very large quantity.

I have yet to try this in reverse i.e. state margin:0% in the global definition and observe the consequences.

Has anyone else observed this effect and found a solid work around?

cheers.

mike 2k:)2

**Bill Posters** · Dec 17, 2002 03:26

Fwiw, where values are 0 (zero), no unit is required (as 0px = 0% = 0pt = 0em = ...).

margin: 0;

GIve it a try and let us know what happens.

User Tag List

Thread: margin 0 causes margin-top to extend dramatically

Thread Tools

Display

margin 0 causes margin-top to extend dramatically

Bookmarks

Bookmarks

Posting Permissions