Anne van Kesteren

Styling the html element

As I said yesterday, I wanted to make some test cases for styling the root element in IE6. I didn't go really far in these tests. If IE applied the background image it was enough. The browser failed two tests out of four. The two were it succeeded were using the link and style element to specify the styles. The two were it failed were using a PI.

I would love to hear the results on Safari, or other Macintosh browsers. All tests work in Mozila (1.6a) and Opera (7.2). I didn't test it on more browsers yet. The four tests (using an ordered list for reffering :)):

  1. xml stylesheet | internal
  2. xml stylesheet | external
  3. html stylesheet | internal
  4. html stylesheet | external

Test 1 doesn't validate, reason is inside the test.

Test 5: xml stylesheet | internal 2 (the start attribute should be included again). Mozilla doesn't even seem to support this, mozilla bug 61675 tells me why it won't work. Now this bug his 2 votes :).

In Mozilla you can add a style sheet to a document by sending a HTTP header. So I want to introduce the off-topic test 6: http header style sheet. Thank you. The PHP I used:



  1. Mac browsers: As would be expected, Mozilla/Mac and its derivatives have no troubles. Safari (and, by association, OmniWeb) trips on test 2: xml stylesheet | external.

    Internet Explorer 5.2.1 crashes on load for your front page... which makes it a little harder to test, but it does indeed pass test 1, 3, and 4. Like Safari, it fails test 2.

    Posted by Chris Clark at

  2. I wonder if test 1 is actually good, now I see the test results. Some browsers can render it the same as test 3 and that was not what I wanted to test. I make a new test and add the style rules in another element.

    Thanks for all these results!

    Posted by Anne at

  3. Why don't you want to specify the type of your <style> tag?

    Seems to me it's not much different from specifiying it with an HTTP Content-Type header on an external style-sheet document. You don't ommit it there.

    Posted by Martijn at

  4. Opera 7 on Windows 2000 passes tests 1, 3, 4. It fails on tests 2 and 5.

    Posted by Martijn at

  5. Very interesting topic, it looks very promising. To bad it's not valid :(.

    Maybe a different approach is to generate the external stylesheet dynamically upon the REQUEST_URI to look which page is requesting the stylesheet. Don't know if this works, I have to test this.

    (Digital Design... I made a account yesterday round 8.00 PM, but until now mine account still hasn't been activated... Netproffesionals???)

    Posted by Rémy at

  6. This is great work Anne (including the beautifully ordered lists :).

    I'll be waiting for a wrap-up, but even now I seem to prefer the full javascript alternative for the switcher (from yesterday's post).

    The advantage seems to be that style related markup is kept in the script, IE outside of the content, and thereby does not get in the way for screen readers, or non-javascript enabled devices.

    Although my javascript knowledge is very limited, I suppose it would also be possible have the script create the heading for the style switcher? That would go one step further in separating style switcher-related code from the actual content.

    Or are there disadvantages to this, or even advantages to the HTML variant, that I don't see?

    Posted by Lars Holst at

  7. Mozilla 1.0 passes the exact same tests as recent Mozilla versions. Opera 6 on Windows 98 passes 1, 3, and 4, just like Opera 7, just like IE6, just like IE 5.0.

    They all don't render your first-lines and first-letters like Opera 7 does though... Has this something to do with one of your previous posts? It only occurs on the homepage of your weblog.

    Posted by Martijn at

  8. Martijn,
    I tried to make a connection between the PI and the style element through the id attribute. That test was not about specifying it with type. Test 5 is the better test for that one.

    And what is that really strange screen shot. I don't use :first-letter and certainly not :first-line in my style sheets. Am I missing something?

    Maybe I'm going to the meeting. Not sure yet. But if, such things definitely need attention. BTW, your comment made this whole post invalid :), it looked like Word :)

    Though it is a bit off-topic, should be in the previous post :), I will try to answer your question. It is possible to create a header with JavaScript as well. You can even create whole documents with JavaScript. The headers in my example page were meant structural, that's why they were not created with JavaScript.

    Posted by Anne at

  9. Anne: I have no idea what causes the things as seen in the screenshot I linked to. Opera 7 just shows your homepage like that. I know it's a bit off-topic, so you can e-mail me if you want to ask me something about this.

    Posted by Martijn at

  10. Shouldn't this entry be called "Styling the html element"? I don't see that you're actually styling the head…

    Posted by Ben de Groot at

  11. Example 5 (4?) is interesting. So that example should work, but this doesn't count for link elements also?

    Posted by Martijn at

  12. No the link element is only in XHTML for backwards compatibility with HTML. Check the second NOTE on this page: The xml-stylesheet processing instruction.

    Thanks Ben, I always mix those two up :). Changed all files and folders with this mistake.

    Posted by Anne at

  13. A little bit off-topic, but heck: you posted the digitaldesign link with this post, so.. It's about 24 hours after i signed up, but my account is still not activated. Why does it take so long? Not a very good thing IMHO.

    Posted by Rogier at

  14. Report on the tests:

    Posted by Ben de Groot at

  15. Rogier, It's great that you submitted. I already made a few complains about this mess. I also mailed the guy who would take care of this, but it looks like he is somewhere else right now.

    I will do my best to get you in, but I can't promise a thing :(.

    Posted by Anne at