1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to make horizontal stripe across the top of entire page touching edge of browser?

Discussion in 'CSS' started by Mitchell, Apr 22, 2010.

0
  1. #1
    <body>
    <div>​
    </div>​
    </body>

    CSS

    div {background-color: rgb(150,150,200); width: 100%; height: 50px;}

    I notice all my elements except <body> leave a gap between the browser edge and the element. Why is this.
    This xhtml and css code I give you makes a purple stripe running horizontally across the top of my browser. Unfortunately the purple does not completely fill out and touch the top and side edges of my browser. Can someone tell me why and suggest a way to make it do so.

    Thanks.
     
    Last edited: Apr 22, 2010
    Mitchell, Apr 22, 2010 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Most browsers give body an 8px margin. Others may give html 8px padding. Here is Firefox's default style for the two elements: 
    html {
  display: block;
  }

body {
  display: block;
  margin: 8px;
  }
    Code (markup):
    To fix, do: 
    html, body {
  margin: 0;
  padding: 0;
  }
    Code (markup):
    cheers,

    gary
     
    kk5st, Apr 22, 2010 IP
  3. Mitchell

    Mitchell Peon

    Messages:
    204
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for your response.

    I do not think this will work in my case because I am trying to create just a stripe using the <div> tags. If I use the <body> tags, my entire page will be filled with purple.

    Perhaps there is a default margin for the <div> tag as well. How do people over come this. This should be common. The page I am typing on meets the top edge of the browser window but not the sides.
     
    Mitchell, Apr 23, 2010 IP
  4. Paweł

    Paweł Active Member

    Messages:
    210
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    55
    #4 
    div {
position:absolute;
top:0;
left:0
}
    Code (markup):
    Should work when div with width 100% is the first child of body element.
     
    Paweł, Apr 23, 2010 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    I didn't say to use the body element, I said to zero its margin.

    No, there's not a default margin on div in any browser. I imagine you're viewing in IE, which incorrectly collapses body's top margin through html. Zero the body's margin.

    gary
     
    kk5st, Apr 23, 2010 IP
  6. Mitchell

    Mitchell Peon

    Messages:
    204
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    That worked. Thank you very much.

    body {background-color: rgb(220,220,220);}

    div {
    width:100%;
    height:60px;
    position:absolute;
    top:0;
    left:0;
    background-color: rgb(200,200,250);
    }
     
    Mitchell, Apr 23, 2010 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    That is an especially bad suggestion as it takes the div out of the document flow. It only appears to work because it is positioned relative to html, not body.

    cheers,

    gary
     
    kk5st, Apr 23, 2010 IP
  8. Mitchell

    Mitchell Peon

    Messages:
    204
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I am sorry Gary. I misunderstood.

    I tried your suggestion and it worked. I now have a better understanding of default behavior.

    I am using Firefox by the way.

    html, body {background-color: rgb(220,220,220); margin: 0; padding: 0;}

    div {
    width:100%;
    height:60px;
    background-color: rgb(200,250,250);
    }
     
    Mitchell, Apr 23, 2010 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    Which puts you ahead of a great number of 'experts' in the field, who seem to have no understanding at all of default behaviors. :p

    If you will go to file:///[path to Firefox]/res/html.css you may view Firefox's default stylesheet.

    cheers,

    gary
     
    kk5st, Apr 23, 2010 IP
  10. Mitchell

    Mitchell Peon

    Messages:
    204
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Thanks. I will check it out.
     
    Mitchell, Apr 23, 2010 IP