[Resolvido] Estilizando a tag header (HTML 5)

[Prove Yourself 0]

Boa tarde,

 

Estou tentando estilizar a tag header mas não está funcionando. Não sei onde estou errando. Pode ser algo idiota pq estou meio enferrujado em CSS.

 

Segue o código

<header>
<hgroup>
<h1 id="title"><a href="<?php echo bloginfo('url'); ?>"><?php echo bloginfo('name'); ?></a></h1>
<h2 id="subtitle"><?php echo bloginfo('description') ?></h2>
</hgroup>
<?php get_search_form(); ?>
</header>

header {
background: #000;
border: 2px solid #000;
width: 100%;
}

Esse código exibe um "risco" no lugar do elemento (Firefox 3.7). Um exemplo na imagem abaixo, dentro do círculo vermelho:

 

Obrigado.

[Prove Yourself 0]

Problema resolvido. Não sei porque motivo mas a tag header não está em nível de bloco.

Utilize

header {
display: block;
}

[Kineri 0]

A tag header não está em nivel de bloco pois não é um padrão oficial ainda. Nenhum navegador renderiza certos (eu acho).

 

Por isso é sempre bom aplicar um reset nas tags HTML5 quando usar:

header,section,aside,footer{
display: block;
}