<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.
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
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.
div { position:absolute; top:0; left:0 } Code (markup): Should work when div with width 100% is the first child of body element.
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
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); }
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
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); }
Which puts you ahead of a great number of 'experts' in the field, who seem to have no understanding at all of default behaviors. If you will go to file:///[path to Firefox]/res/html.css you may view Firefox's default stylesheet. cheers, gary