Wed, 2005-10-19 15:13
Hi,
Why do I see, sometimes, style sheets that combine style for both "body" and "html"?
Like
html, body {
styles..blah;
}
I understand the "body" part ... but what is the html element all about? Is it always linked to the body selector?
Thanks
Dodge
Wed, 2005-10-19 16:26
#1
html, body - what does this mean?
Hi
IE actually sees the html as another container outside the body. Really handy to use because others don't see it.
However, IE MAC has issues!!!!
Put height:100% in both html and body and you get a super wide page, for example.
Trevor
Wed, 2005-10-19 23:12
#2
html, body - what does this mean?
<html> and <body> are two separate elements and can each be styled. In most (all?) browsers there is some space around your page, by default. In IE and Firefox, this is due to the default stylesheet's "body {margin: 8px;}". In Opera, the default is "body {padding: 8px;}". Safari/Konqueror users may run your own tests. Also, I was under the impression that some browser, somewhere, used "html {padding: 8px;}", but can't recall which or where I heard it.
To see the dichotomy, run this document. Test thoroughly before styling html, as different browsers have very different approaches.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator"
content="
HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
<title>html & body padding & margins</title>
<style type="text/css">
/*<![CDATA[*/
html {
border: 1px solid red;
margin: 8px;
padding: 18px;
background: #ecc url(bullseye.jpg) right top no-repeat;
}
body {
border: 1px solid green;
margin: 8px;
padding: 18px;
background: #efe url(bullseye.jpg) left top no-repeat;;
}
p {
background-color: #fff;
border: 1px solid black;
margin: 0;
}
/*]]>*/
</style>
</head>
<body>
<p>a sample sentence.</p>
</body>
</html>cheers,
gary
Thu, 2005-10-20 08:52
#3
html, body - what does this mean?
kk5st wrote:
<html> and <body> are two separate elements and can each be styled.
If that's true it makes my divitis article a lot better 
Thu, 2005-10-20 10:09
#4
html, body - what does this mean?
Hi
Just for a bit of fun then, set a fixed repeating image in the html style and a non-repeating one (that doesn't fill the page!) in the body.
Now compare browsers.
I tend to simply switch things off in html, not set things.
Trevor
Thu, 2005-10-20 12:57
#5
html, body - what does this mean?
That's very interesting... I had no idea there was anything beyond the out limits of "body"!
Trevor - you mention turning everything "off" in the html element - how is this done?
And if one uses the global reset is this effectively "turning" it off if it's not selected and styled?
/* global reset */
* {
padding: 0;
margin: 0;
}
Thanks all for the explanation.
Daf
Thu, 2005-10-20 13:02
#6
html, body - what does this mean?
Hi
I have a default style sheet as follows:
html,body,p,div,img,h1,h2,h3,h4,li,ul,dl,ol,dd,dt,form,table,td,tr{
/*** Let's go commando ***/
margin:0;
padding:0;
border:0;
border-collapse:0;
border-spacing:0;
}
input,select{
margin:0;
padding:0;
}
body{
font-family:verdana,arial,sans-serif;
font-size:76%; /*** Note: see http://www.thenoodleincident.com/ style the rest of font sizes in ems ***/
Trevor
Thu, 2005-10-20 13:13
#7
html, body - what does this mean?
Wow - you leave no stone unturned do you? 
That's interesting as well - thanks for letting me see that. 
Daf
Thu, 2005-10-20 13:32
#8
html, body - what does this mean?
ClevaTreva wrote:
font-size:76%; /*** Note: see http://www.thenoodleincident.com/ style the rest of font sizes in ems ***/
I don't understand this, I believe "style all font-sizes in %" is better.
As far as font-size is concerned, ems and % are the same. By using font-size as ems in a style you may end up using one unit with two different values in the same style rule*.
e.g.
selector {font-size: 2em; margin: 2em; }
The margin and the font-size are NOT the same.
To me, it makes a lot more sense and should be a lot easier for the uninitiated to understand what is going on if you use.
selector {font-size: 200%; margin: 2em;}
fwiw, thenoodleincident only says to use percents in the body and doesn't make any definitive statement about what to use in other elements.
* although this is true for % as well, people already have a good grasp that % is relative to some other value. The only confusing thing in html is working out what it is relative to. Fortunately, that isn't a problem for font-size.
Thu, 2005-10-20 14:47
#9
html, body - what does this mean?
ClevaTreva wrote:
I have a default style sheet as follows:
[code]html,body,p,div,img,h1,h2,h3,h4,li,ul,dl,ol,dd,dt,form,table,td,tr{
/*** Let's go commando ***/
Any reason not to use the * catch all rather than this list?
Thu, 2005-10-20 14:53
#10
html, body - what does this mean?
briski wrote:
Any reason not to use the * catch all rather than this list?
No
The list built up over time, but, no, thinking about it, I'll change my default code right now.
As to the use of % ems and pixels.
I prefer to set the font-size as 76% right at the start, then style my fonts and line heights in ems.
Widths, heights, margins, padding and text idents etc I use pixels.
It makes it easier for me to find each element type.
[edit]Now I remember, some forms controls look weird without border[/edit]
Trevor
Thu, 2005-10-20 15:35
#11
html, body - what does this mean?
Quote:
[edit]Now I remember, some forms controls look weird without border[/edit]
Yep, you'll find that they will disappear.
Having universally zeroed margins and padding a useful technique is to then re-state some default elements that way you have control over some basic margins that are uniform rather than having to set margins every time you declare an element.
The more I look at things the more I'm coming around to Chris's thinking on percent for fonts, but it's a tricky business this relativity, well if you read Einstein's general theory it is.
Hugo.
Thu, 2005-10-20 16:05
#12
html, body - what does this mean?
ClevaTreva wrote:
As to the use of % ems and pixels.
I prefer to set the font-size as 76% right at the start, then style my fonts and line heights in ems.
Widths, heights, margins, padding and text idents etc I use pixels.
It makes it easier for me to find each element type.
Point taken. I still think it would be better to leave the comment I highlighted off advice posts. They key is setting the body font with a %. The advice on other font-sizes is personal taste rather than a hard and fast rule.
Thu, 2005-10-20 16:50
#13
html, body - what does this mean?
Hi
As to why I use 76% (which is, on the face of it, an odd choice) was that Owen found that this resulted in common font-sizes across a range of browsers (mainly older ones had issues with other sizes) and he was trying to find a body setting that levelled the playing field.
Far be it for me to contradict him, and I'm certainly not going to do all those tests again.
Trevor
PS, I'm trying a new avatar, drawn for me by one of my pupils in the style of the Simpsons type characters. Its quite life like!
Thu, 2005-10-20 19:14
#14
html, body - what does this mean?
ClevaTreva wrote:
As to why I use 76% (which is, on the face of it, an odd choice)
Ooops . I didn't mean the font-size value -- but the units. 76% is 12.16px on Windows machines - which probably means IE/FF & O will all display it the same or similar at 12px. They all appear to use slightly different rounding mechanisms. With IE staying at a large size longer before rounding down a pixel than FF.
Sorry for the confusion.
Fri, 2005-10-21 08:57
#15
html, body - what does this mean?
So Treva, this:
* {
/*** Let's go commando ***/
margin: 0;
padding: 0;
border: 0;
border-collapse: 0;
border-spacing: 0;
}
body{
font-family:verdana,arial,sans-serif;
font-size:76%; /*** Note: see http://www.thenoodleincident.com/ style the rest of font sizes in ems ***/
will zero out EVERYTHING?
Fri, 2005-10-21 09:48
#16
html, body - what does this mean?
yes - but I think the point was that this is not such a good thing after all as border: 0; on imput elements makes some of them invisable.
Fri, 2005-10-21 13:14
#17
html, body - what does this mean?
But to zero everything that's the easiest way to do it?
I won't use it, and if I do I'll replace the borders on input stuff.
Fri, 2005-10-21 14:29
#18
html, body - what does this mean?
Why remove borders only to have to replace them, the border:0 rule is pointless and when you forget it's there or have failed to note it in someones styles and fart around trying to figure out why the input elements are not working it's a right p.i.t.a as I discovered whilst trying to puzzle this problem on a recent layout.
Stick to margins and padding they are the problem areas and when zeroed then re-set a default set of margins for grouped elements such as h#, ul, p etc. rather than have to state them for each rule set that comes along.
Hugo.