SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast 2kool2's Avatar
    Join Date
    May 2001
    Location
    UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    margin 0 causes margin-top to extend dramatically

    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 2k: )2
    <work> http://webSemantics.co.uk </work>
    <rest> http://2kool2.com/ </rest>
    <play> http://bangersandmash.com/ </play>

  2. #2
    ********* Genius Mike's Avatar
    Join Date
    Apr 2001
    Location
    Canada
    Posts
    5,458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Mike
    It's not who I am underneath, but what I do that defines me.

  3. #3
    SitePoint Enthusiast 2kool2's Avatar
    Join Date
    May 2001
    Location
    UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    mike 2k: )2
    <work> http://webSemantics.co.uk </work>
    <rest> http://2kool2.com/ </rest>
    <play> http://bangersandmash.com/ </play>

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •