Share via

HTML 5–The End of Browser Rendering Differences? Not Hardly.

  • Article

I was kind of stoked to learn more about HTML 5 now that the IE9 beta is out.  I found a nice HTML 5 book on Safari Books Online (one of my favorite perks here at Microsoft) and started simple.  Things were going fine until I tried to view my simple code in IE9, FireFox 3.6 and the latest version of Google Chrome.  Here’s the HTML I wanted to render:

 <!doctype html>
<html lang=en>
<head>
    <title>Home Page</title>
    <meta charset=utf-8>
    <link rel="stylesheet" href="/Content/Site.css">
</head>
<body>
    <header>
        <h1>Header Test</h1>

     </header>
    <article>
        <p>test</p>

    </article>
</body>
</html>

Pretty simple, right? The stylesheet I used was also very simple:

 

 body
{
    font-family: Verdana, Geneva, Sans-Serif;
}
header
{
    font-size: 1.5em;
    font-weight: bold;
    color: #FF6600;
    background-color: #3399FF;
}

Well, here’s the output rendered by the three different browsers.  

image
IE9 Output

image
Mozilla Output

Not quite what I expected, but at least the two more or less agree.  However, look at what Chrome shows:

image
This is actually what I was expecting, but looks completely different from the above two.  Ugly, yes, but that’s my fault for the painful color choices.

So, I’m now discouraged from pursuing HTML 5 any further.  At least until the major players can get their collective acts together.  I have no desire to live through 1998 again.

Comments

  • Anonymous
    September 20, 2010
    background-color is not inheritable property.  I am not sure how come the chrome is showing the background color.  since h1 is a blocked element it should have taken the full width and should have got default background color.  So it's chrome which is not working as standard IE9 and firefox are working as expected.
  • Anonymous
    September 20, 2010
    Try adding:header {  display: block;}Not exactly rocket surgery that browsers aren’t yet adding default styles for a set of new elements that may or may not be changed in name, meaning or function over the next 1–2 years. Hence, any of the new HTML5 elements comes with no default styling, including no default "display: block" for block-level elements.
  • Anonymous
    March 30, 2011
    You should test it in FF4 (I think it was in early beta at time of post, and is out now), seeing as that is the version that is made for HTML5. Bit of bias seeing as you tested the new version of IE...