SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question firefox and margin-top

    Hi, this is my first topic here.

    Why Firefox don't show the "margin-top" and "margin-bottom" of the first and
    last elements of the code below?

    The code:

    XHTML

    <!DOCTYPE ETC> .....
    <body>
    <div id="rap">
    <h1 id="header">Header</h1>
    <h1 id="content">Content</h1>
    <h1 id="footer">Footer</h1>
    </div>
    </body>
    ....
    CSS
    * { margin:0; padding:0; }

    body { background-color:#099; }

    #rap { margin:10px auto; width:760px; background-color:black; }

    h1 { margin:105px; width:750px; border:1px solid green; }

    #header { background-color:red; }

    #content { background-color:white; }

    #footer { background-color:blue; }
    Thanks from BraSil

  2. #2
    Not yet perfect mattalexx's Avatar
    Join Date
    Oct 2005
    Location
    Taos, NM, US
    Posts
    441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    I think you can get rid of the "rap" DIV. Just take the styles from it and apply it to BODY
    Matt Alexander
    Alexander Site Design

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    margin collapse
    http://www.maxdesign.com.au/presenta...op/slide46.htm
    a bit more heavy explanation
    http://complexspiral.com/publication...psing-margins/

    PS there usually is only one H1 tag on a page

    width 750 + left right margin of 2 x 105 = ?

    A dirty simple trick is to add a border top bottom to the wrapper

  4. #4
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ops, i posted wrong css code. The correct is:


    * { margin:0; padding:0; }

    body { background-color:#099; }

    #rap { margin:10px auto; width:760px; background-color:black; }

    h1 { margin:5px; width:750px; }

    #header { background-color:red; }

    #content { background-color:white; }

    #footer { background-color:blue; }
    @ all4nerds: the h1 is only for this example .

    Firefox would not have to show the margins as the IE (6)?

    how I can resolve this problem?

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    read my post Please , H1 is block level and don't need a width set , with a margin or padding or border they adjust to a screen or container ( wrapper )

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<!-- saved from url=(0022)http://www.domain.com/ -->
    	<style type="text/css">
    	* { margin:0; padding:0; }
    
    body { background:#099; }
    
    #rap{margin:10px auto;width:760px; background:black;border-top:1px solid #ffff00;border-bottom:1px solid #ffff00;}
    
    h1{margin:5px;border:1px solid green; }
    
    #header{background:red;}
    
    #content{background:white;}
    
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    
    <div id="rap">
    
    <h1 id="header">Header</h1>
    
    <h1 id="content">Content</h1>
    
    <h1 id="footer">Footer</h1>
    
    </div>
    
    </body>
    </html>

  6. #6
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, but firefox don't show the margin-top black (the color of div rap) as in IE 6.

  7. #7
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by c4g3 View Post
    Ok, but firefox don't show the margin-top black (the color of div rap) as in IE 6.
    Hello

    My example looks the same in IE 6 7 FF OP ?

  8. #8
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @all4nerds

    Yes, but if you removed all the borders?

    and thank you

  9. #9
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    See links above, you can't always get what you want, you get what you need M J

    PS div for main containers and proper use of H and P tags , there are ways to solve this by separating css (hack) or use floats, etc, both use more code and also need understanding, H Tags usually only need padding, and your model is rather theoretical

    PS use a border color the same as your body background color

  10. #10
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, man... Just one more thing...

    And if i set the "overflow:auto" in the #rap? Same effect, but no extra padding or border... Any problem with this?

  11. #11
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    No

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Ok, but firefox don't show the margin-top black (the color of div rap) as in IE 6.
    Due to collapsing margins the margin on the h1 collapses and would effectively become the margin on #rap instead thus pushing #rap further down the page. As #rap already has a 10px top margin then the effect is just to collapse the h1's margin to zero.

    Collapsing margins are a complicated subject and you should read the links all4nerds pointed to, or my own take on this.

  13. #13
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Or in other words, if you want headaches use them, other wise try to avoid them

    ( Padding on wrapper and use h1 p h2 p p h3 p p, etc so that you can control there margin or better padding on the p tags , not that difficult )
    Last edited by all4nerds; Sep 2, 2007 at 19:14.

  14. #14
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, thank you again!


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
  •