Grow your CSS skills. Land your dream job.

Giving the html-element an id and a class

  • # August 4, 2009 at 5:55 am

    Hi there!

    My website contains two types of pages: Besides that normal ones that are long and scrollable, I have have those short ones whose content fits into a standard sized window. I use two navigations on these pages, one in the top-right corner and the other one in the bottom-left corner, so I have to give the < html >-element:

    Code:
    html { overflow: hidden; height: 100%; }

    in order to get rid of the scrollbars and to avoid shivering of divs positioned at the bottom or right edge. The top-left one would shiver and flicker when hovering over the bottom-right one, because the vertical scrollbar is displayed for the time of hovering. This does not work, when the above attributes refer to the body-element, and I cannot use the great technique of giving the body an id or a class.

    My question is: Can I give the html-element an id or a class without any unforseen consequences? As far as I know, the < html >-element is the Eva of all elements in the DOM and the body element is her first child. My htmls look like this

    Code:

    and it would look like this

    Code:

    Is there anything that the html-element is sacrosanct for ids and classes?

    Thanks! Runa

    # August 4, 2009 at 9:48 am

    Interesting question. :geek:

    I’ve searched around a bit and all I could find was this very old blog post http://annevankesteren.nl/2003/08/html-id. So it seems that giving it an id is (or was) only valid in xhtml 1.0. Now that may or may not be the case but the bottom line is, does it work consistently across all browsers? All I can suggest is that you test in as many browsers as you possibly can and let us know the results. Otherwise, a php solution would be the obvious answer, serving up a different stylesheet depending on the page type.

    # August 4, 2009 at 7:54 pm

    Thanks! I made a page and a css-file today. It works fine in the browsers.They treat it like a normal element. But the w3c-validator tells me, id’s would not be allowed on the html-element in XHTML 1.0 Strict.

    On one hand: You can solve it by splitting the css-file in two files.

    On the other hand: If the browsers and the googlebot won’t complain, why not giving it a try. I also use unallowed tags in the title-attribute for tooltipping, eg the BR or complete ULs.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".