I encountered a peculiar CSS formatting problem when I changed a <div id="header"> block to HTML5's <header> block. Basically, I want links within the <header> block to be of a certain colour and to not get any decoration.
The relevant HTML and CSS codes look as follows:
<!-- HTML5 code -->
<header>
<h1>
<a href="#">Link text</a>
</h1>
</header>
/* CSS code */
header a {
color: black;
text-decoration: none;
}
The output I see (using Firefox 20.0 with Ubuntu 12.04) is as if the CSS code fragment above does not exist.
Adding something like class="hdr" to the anchor block and changing the CSS rule to a.hdr works. Changing back to <div id="header"> and #header a also works. Still, I don't see why just using <header> and a corresponding rule fails, and it strikes me as the "correct" approach.
An initial search for a solution led me, among other links, to this link (I had the <h1> block nested within the <a> block, initially), but using a <div> wrapper didn't work either.
