Do not adjust your set it’s just HTML5

I’m lazy by nature and the less I have to type to get something working the better. This is what attracted me to HTML in the first place: meaningful tags reducing the need for div-itis. Adoption by the browser manufacturers seems to continue at their own pace (whatever that really means) and in the mean time something I expected to look like this:

screen shot of firefox 3.0.6
screen shot of firefox 3.0.6

well lets just say, it just didn’t. Not good…


So just to make sure I wasn’t dreaming I validated the code using the friendly html 5 validator kindly provided and maintained by Henri Sivonen and Simon Pieters along with others of the html5 working group. Once the code was valid it was simple to indulge in some tests to prove the point.

In the interest of sharing with the web community I detail my tests below and ask am I doing something wrong? Is this a known issue or is this something that will just have to get solved in time by browser suppliers? Or should we land this at the door of the css working group and ask what they make of it?:

Test 1 – footer

html code:


<!DOCTYPE html>
<html>
<head>
<title>html5 footer tag based example</title>
<link href="html5-a1.css" type="text/css" rel="stylesheet">
</head>
<body>
<footer>
<p>&copy; Company Name Here 2009 </p><p>&bull; Built by <a href="http://crataegusdesign.co.uk/" title="Designer Portfolio">Crataegus Design</a> &bull;</p>
</footer>
</body>
</html>

css code:

footer {
margin:0 auto;
text-align:center;
border:1px solid black;
}

result:

test 1 result: screen shot from firefox 3.0.6
test 1 result: screen shot from firefox 3.0.6

Not expected, therefore not good. So, does <p> not know to inherit css behaviour from <footer>? Of course styling the p might be a step towards getting the desired result?

Test 2 – footer + p

html code as above
css code:

footer p{
margin:0 auto;
text-align:center;
border:1px solid black;
}

Result – great? except that you will remember that this footer has two paragraphs:

test 2 screenshot from firefox 3.0.6
test 2 screenshot from firefox 3.0.6

What happens if the footer has more lines of information? Does <section> suffer from the same problem? and is Firefox the only place the problem occurs?

Tune in next time to see more tales of unexpected output …

4 thoughts on “Do not adjust your set it’s just HTML5”

  1. Adding footer { display: block; } might help things a bit, although you could still run into parsing issues (unless you’re using XHTML sent as application/xhtml+xml).

  2. Ran into the same problem with my proof of concept http://brucelawson.co.uk/tests/html5-elements.html with IE.

    I think it’s because most browsers don’t “know” what these elements mean yet. But that shouldn’t prevent stying rules inheriting, I agree.

    I’d file a bug with the browser manufacturer if I were you, as it’s an implementation problem rather than a problem with the css spec.

  3. Thanks for the tips guys, it simply hadn’t occured to me to think of {display:block} as a big hint to the browser. If that doesn’t fix it, I’ll test it in the other browsers I have access to and then see if the nice people at Mozilla are happy to do something about it…

Comments are closed.