can someone plese clarify how to set width for an html document. i have set the width for my body tag and even made a wrapper div to set the width but still the page is running a few pixels wide? what am i doing wrong?
+1
A:
The body tag has a default margin in all browsers. Maybe it's lacking a margin: 0px?
While it may be okay to do according to the rules (I don't know whether it is), giving the body tag a width doesn't sound right to me. If you need to confine your content to a certain area, better use a container <div> directly underneath <body>.
Pekka
2010-01-14 21:28:52
Think you mean "margin: 0"
Bobby Jack
2010-01-15 00:01:26
It's also perfectly valid to give the body a width, and adding a div JUST to avoid setting a width on the body is far worse, IMO - unnecessary noise in the markup
Bobby Jack
2010-01-15 00:03:07
+2
A:
You probably need to assign zero to the padding and the margin of body & html:
html, body {
margin: 0;
padding: 0;
}
Y. Shoham
2010-01-14 21:29:09
A:
width for my body tag
Some browsers (such as many versions of Internet Explorer) do not allow you to set a width on the body element. It is usually better to add a wrapper div and style that instead
the page is running a few pixels wide
You probably aren't removing the default padding and/or margin (different browsers have different defaults)
David Dorward
2010-01-14 21:30:08
Padding doesn't account in width, unless the browser in question is MSIE running in quirks mode (which you actually don't want it to be -fix it with right doctype).
BalusC
2010-01-14 23:32:32
I think that was David's point - if the body's width is set at 100% but has padding or margin, they act IN ADDITION to that 100%
Bobby Jack
2010-01-15 00:05:41
A:
To follow up on what @pekka said:
The body tag has a default margin in all browsers
Browsers have different default styles, and this likely explains the extra margin or padding that you're seeing. For your css to behave as you expect, it's generally adviced to reset your css. In short, but defining certain styles across all elements, you eliminate these browser inconsistencies and can then trust that your styles will cascade as you want them too. This is why setting the margin on the HTML and BODY elements eliminates the extra space mentioned in the question.
Eric Meyer has good thoughts on this, and his reset is the one I've seen most frequently used across the web. However, it should be noted that the extensive example below shouldn't be used without though. Tweak it to fit your project's needs
Ex (From Eric Meyer's Reset, link below):
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
Check out these discussions for a more detailed explanation:
http://meyerweb.com/eric/tools/css/reset/
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Jack
2010-01-14 22:30:41
A:
Elements (such as the body tag) all have default margins and paddings, many of which are nonzero. That probably explains the extra pixels.
html, body {
width: 800px;
margin: 0;
padding: 0;
}
This is an example of a CSS Reset: the concept is to eliminate browser-specific defaults so that you can control the exact appearance across all browsers. In this incremental reset, we eliminate margin and padding on the two elements that are probably responsible for your extra pixels.
Andres Jaan Tack
2010-01-14 23:34:33