HTML's a Tag Too

teammatt3's picture

He has: 2,102 posts

Joined: Sep 2003

I saw this on digg a few days ago and I thought you might want to read through it. http://avalonstar.com/2006/07/11/htmls-a-tag-too/

Basically it says you can use the html and body tags to make a layout centered without the use of any 's.

This would be a centered layout, no divs are used.

html {
background: #ffffff;
height: 100%;
margin: 0 0 1px;
}

body {
background: #333333;
color: #ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0 auto;
width: 780px;
}

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

I have a question about this:

margin: 0 0 1px;'

When there are only three dimensions listed, what are they referring too? I hadn't seen that until today when I started building a user stylsheet for ALA and they've used it quite a bit too. I also noticed that they've done away with extra div's in a lot of places (which does make it a little more challenging to hack their CSS!).

I saw that on digg too and sort of wondered if you're supposed to be styling the html element in this way but I can't think of any reason why not...

Jack Michaelson's picture

He has: 1,733 posts

Joined: Dec 1999

Megan wrote: I have a question about this:

margin: 0 0 1px;'

When there are only three dimensions listed, what are they referring too?

This means that the fourth dimension (in this case the left margin) equals the second, the right margin. So this actually says: margin: 0 0 1px 0;
It's the same logic as: margin: 0px 0px; where the first zero defines the top and bottom margin and the second zero defines the right and left margin.

Shakespeare: onclick || !(onclick)

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Jack Michaelson wrote: This means that the fourth dimension (in this case the left margin) equals the second, the right margin. So this actually says: margin: 0 0 1px 0;
It's the same logic as: margin: 0px 0px; where the first zero defines the top and bottom margin and the second zero defines the right and left margin.

Oh, I see! I've been seeing that in code all over the place now. I don't really see the point in being confusing in order to drop just a few characters!

teammatt3's picture

He has: 2,102 posts

Joined: Sep 2003

Quote: I saw that on digg too and sort of wondered if you're supposed to be styling the html element in this way but I can't think of any reason why not...

Did you read the comments below the article? This guy says it is valid. I should also mention that it doesn't work properly in IE 5 (according to the article.)

Busy's picture

He has: 6,151 posts

Joined: May 2001

*wonders if steve40 is mini-busy muhhaha*

hmmmm CSS in the html tag, I think this is pushing it a bit far as the html tag is more of a file type(structure type) than an actual html element. is what the file is, is what the contents of the file.

This is quite scary really, if the tag can be abused then the title and head tags could be too, imagine if CSS was used in the title tag (have never tried it to see if it would work), javascript can be used to add crap up there, imagine rainbow text, images, scroll bars ...

JeevesBond's picture

He has: 3,956 posts

Joined: Jun 2002

Busy wrote: CSS in the html tag, I think this is pushing it a bit far as the html tag is more of a file type(structure type) than an actual html element. is what the file is, is what the contents of the file.

This is actually an XML thing, when all browsers (or rather IE) move to an XML parser (instead of SGML) all tags just become tags and loses it's special magic. Smiling

Not sure about the title and head elements though, theoretically the same would apply. But why would anyone want to change them?!

a Padded Cell our articles site!

Busy's picture

He has: 6,151 posts

Joined: May 2001

JeevesBond wrote: Not sure about the title and head elements though, theoretically the same would apply. But why would anyone want to change them?!

Why would someone disable the back button, use flash only splash screens, make links the same colour as the text, colour the scroll bars ... because they can.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Busy - i thought the same as you did about styling the HTML element. I even looked it up on the W3 pages and it doesn't even document what it's actually for. I suppose it assumes you know that it's a container for the head and body tags and a declaration of the mark-up language. But if it's just a container, are you supposed to be able to apply style to it? I don't know.

Just because something passes the validator doesn't mean that it's actually correct. Lots of things pass the validator but aren't actually proper use of the code. I've also heard some things about the current validator being broken.

I'll have to do a test to see if styling on a title tag would pass the validator. That's clearly nonsensical. I actually don't validate CSS too much so I'm not sure how that tool behaves.

ETA: this code validates:

/* CSS Document */

head {font: 30% Arial, Helvetica, sans-serif #c00;}
title {font-weight: bold; color: #3399CC; font-size: 13px;}
meta {font-weight: bold; color: #3399CC; font-size: 13px;}
'Of course, just putting random values in there for testing. Wouldn't actually make text 30%! Or do text in pixels unless it was absolutely necessary.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.