SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Margin ain't working :(

    Ok, for this small amount of code

    Code:
    <div id="centersite"> 
     <div id="logo"> 
       <h1>Premier Logistics</h1>
      </div>
    and my css as this

    Code:
    <!--
    #logo {
     background-image: url(roadheader.jpg);
     background-repeat: no-repeat;
     background-position: left top;
     height: 159px;
     width: 700px;
     margin: 0px;
    }
    body {
     margin: 0px;
     background-color: #F5F5F5;
     padding: 0px;
    }
    #logo h1 {
     margin: 0px 400px 0px 25px;
     padding: 2px;
     background-color: #FFFFFF;
     border: 1px solid #000000;
     text-align: center;
    }
    #centersite {
     margin-right: auto;
     margin-left: auto;
     width: 700px;
     margin-top: 0px;
     margin-bottom: 0px;
    }
    -->
    If I add about 15px of margin for the #logo h1 for the top, it actually pushes the whole thing down 15 pixels, rather then just push the h1 down 15 pixels

    Really weird. If I set it to 0px, the whole site hugs the top, which I want.

  2. #2
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    United States
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you notice, though, that I am doing this for the h1 tag, not just for #logo. I have a white background and borders around the h1 tag. When I have added padding, it just makes the space between the actual word and the top border get larger, but it stays stuck to the top of the page rather then moving itself down.

  4. #4
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is how padding and margins work:
    • Padding - between border and content (i.e. inside the border), takes on the background colour of the element.
    • Margin - between border and surrounding content (i.e. outside the border), is transparent so that the surrounding content can be seen through it.


    The only exception is that if you have 2 divs following each other in the flow of the document then only one of the margins between them will be used, the largest one. For example where a div with margin: 20px is followed by a div with margin: 10px then there will only be 20px of space between them.

    There is an exception to this too if the divs are floated then normal margins are used.

  5. #5
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am going to provide a visual example when I get to my own computer.

  6. #6
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, this picture is with 0px margin for the top of my h1
    http://www.btkdesigns.com/top.gif that is in comparison with the top of the browser window

    this is using mozilla and after I added 15px of margin to the top of my h1 tag

    http://www.btkdesigns.com/mozillatop.gif

    also, that is in comparison with the top of the browser window. It is shoving everything down 15px rather then the h1. See what I mean?

    Here is my complete css if it helps

    Code:
    #logo {
     background-image: url(roadheader.jpg);
     background-repeat: no-repeat;
     background-position: left top;
     height: 159px;
     width: 698px;
     margin: 0px;
     border-right-width: 1px;
     border-left-width: 1px;
     border-right-style: solid;
     border-left-style: solid;
     border-right-color: #000000;
     border-left-color: #000000;
    }
    body {
     margin: 0px;
     background-color: #EEEEEE;
     padding: 0px;
    }
    #logo h1 {
     margin: 15px 400px 0px 25px;
     padding: 2px;
     background-color: #E9EAD5;
     border: 1px solid #000000;
     text-align: center;
     display: block;
    }
    #centersite {
     margin-right: auto;
     margin-left: auto;
     width: 700px;
     margin-top: 0px;
     margin-bottom: 20px;
    }

  7. #7
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    United States
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand now. I'll do some research and see what I can come up with.

  8. #8
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, cuz I am lost on this one

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You are suffering from the mozilla top margin bug where static positioned block elements will sometimes use the top margin of the first child element instead of their own.

    It seems that adding a top border will stop this effect. So the following code could be used to correct the display.
    Code:
    html>body #centersite {border-top: 1px solid black; margin-top: -1px;}
    Now the first example you gave will render correctly in mozilla.

    Paul

  10. #10
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul

    While you were working on that, I was working on an alternative design for the site. I will definitly take a look at your solution though. BTW - what exactly does having the side carrot html > body do?

    hey, if you have a couple seconds, or anyone for that matter, could you tell me how this renders in IE 5.5?
    http://www.btkdesigns.com/logistics/

    Thanks
    Bryan

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    what exactly does having the side carrot html > body do
    IE doesn't understand the child selector (>) so you can use it to give mozilla a different property or measurement etc if required.

    I've only got IE6 running at the moment so I can't check in 5.5.( Looks fine in IE6).

    Paul

  12. #12
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks


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
  •