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

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -