HTML5 & CSS: Formatting anchors, <header>-wide -
i encountered peculiar css formatting problem when changed <div id="header">
block html5's <header>
block. basically, want links within <header>
block of colour , not decoration.
the relevant html , css codes follows:
<!-- html5 code --> <header> <h1> <a href="#">link text</a> </h1> </header> /* css code */ header { color: black; text-decoration: none; }
the output see (using firefox 20.0 ubuntu 12.04) if css code fragment above not exist.
adding class="hdr"
anchor block , changing css rule a.hdr
works. changing <div id="header">
, #header a
works. still, don't see why using <header>
, corresponding rule fails, , strikes me "correct" approach.
an initial search solution led me, among other links, link (i had <h1>
block nested within <a>
block, initially), using <div>
wrapper didn't work either.
try being more specific.
<header class="main-header"> <a href="#"><h1>link text</h1></a> </header> <!-- .main-header --> .main-header { color: green; text-decoration: none; }
Comments
Post a Comment