oo7ml
10-22-2006, 06:09 AM
Can anyone tell me what these two sections of code are for. Why is there html, body and another one called body
html, body { margin: 0;
padding: 0;
}
body { padding-bottom: 20px;
text-align: center;
}
#container {
text-align: left;
margin: 0 auto;
width: 780px;
}
#header {
border: 1px solid black;
margin: 20px;
padding: 20px;
}
#sidebar {
border: 1px solid black;
width: 300px;
margin-left: 20px;
float: left;
display: inline;
}
#content {
margin-left: 342px;
margin-right: 20px;
border: 1px solid black;
padding: 20px;
}
#footer {
margin: 20px 20px 0 20px;
padding: 20px;
border: 1px solid black;
clear: left;
}
drhowarddrfine
10-22-2006, 08:33 AM
The first is used to set all margins and padding to zero. Browsers have their own default for that and it's better to set them on your own.
The second body is used to those items individually.
WebJoel
10-22-2006, 08:35 AM
Can anyone tell me what these two sections of code are for. Why is there html, body and another one called body
html, body { margin: 0;
padding: 0;
}
body { padding-bottom: 20px;
text-align: center;
}....
IE assumes a pixel or two for most elements, which is wrong. It is the basis of the 'box-model error' and the hack for it is to re-set the declarations of Margin, padding (and border) to "zero".
All compliant browsers do this by default, so this is targeted 100% at IE.
The reason for "padding-bottom" on the body is because IE for some reason fails to properly apply any margin-bottom to a container like a wrapper DIV. For the most part, if you have a wrapper like
#wrapper {width:500px; margin:25px auto 25px auto;}
and if the content that fills this 500-px wide DIV exceeds one full screen-height, you would expect that there would be 25-pixels margin on the top, auto left&right, and 25-px margin on the bottom of the DIV. This doesn't happen. You you apply the equivelent of a 'margin' albeit, it is the 'inside' declaration of padding-bottom, and the value of 25px. This gives you a 25-pixel 'faux margin' or more correctly, "padding" on the bottom of the screen.
text-align:center; would center the text. I've seen this improperly used in attempts to center the container DIV itself, but if a width is declared and the margin is set to "margin:0 auto;", the DIV will be correctly centered anyway.
And not to worry that there are more than one "body {}", -all will be obeyed so long as they do not conflict with each other, in that case, the LAST one created will be the overriding one obeyed.