Validation error while putting <h> tag inside <a> tag(document type does not allow element "h2")
Posted
by makmour
on Stack Overflow
See other posts from Stack Overflow
or by makmour
Published on 2010-04-25T23:23:10Z
Indexed on
2010/04/25
23:33 UTC
Read the original article
Hit count: 268
when using this code:
<div class="menu">
<ul id="mainnav">
<li><h2><a href="dir1/" >AAAAA</a></h2>
<ul>
<li><a href="dir1/xxx.php"><h3>xxx</h3></a></li>
<li><a href="dir1/xxx2.php"><h3>xxx2</h3></a></li>
<li><a href="dir1/hxxx3.php"><h3>hxxx3</h3></a></li>
</ul>
</li>
I get an error while validating saying that I should put <h2>
outside of <a>
.
document type does not allow element <h2>
When I do this validation passes without any problems but my styling breaks.
Is there a way to keep both validation and styling?
This is styling for menu
and <h2>
.menu li a{
font: 100% Helvetica, Arial, sans-serif;
display:inline-block;
color: #fff;
}
.menu li a:hover{
color: #014661;
background: url('../images/menu1.png') center left no-repeat;
}
.menu li a h2{
font-size: 92%;
padding: 8px 18px;
font-weight: bold;
text-transform: uppercase;
}
.menu h3{
font-size: 87%;
font-weight: bold;
text-transform: uppercase;
}
.menu li a h2:hover{
background: url('../images/menu2.png') center right no-repeat;
}
© Stack Overflow or respective owner