Why isn't this XHTML valid?

Why isn't this XHTML valid? The HTML:

<h2>earthquake warning <span>Posted 03/11/2009 at 2.05pm</span></h2>

The CSS:

h2 {
font: bold 20px Arial, "Hel开发者_StackOverflow社区vetica Neue", Helvetica, Geneva, sans-serif;
padding-bottom: 5px;
padding-top: 5px;
text-transform: uppercase;
}

h2 span {
font-weight: normal;
text-transform: none;
display: inline;
}

It's more of putting h2 inside span.

Full Source:

<span class="warning">
                <h2>Bushfire warning <span>Posted 03/11/2009 at 2.05pm</span></h2>
                <p class="warning" />Dignissim elit quod dolore sollemnes iriure. Ut suscipit nunc laoreet lectorum facilisi. Consequat eodem consequn congue humanitatis. Vel in litterarum odio solissi. <a href="#">For more information click here.</a>

</span>

You can't put a h2 inside a span tag. Try using a div instead:

<div class="warning">
                <h2>Bushfire warning <span>Posted 03/11/2009 at 2.05pm</span></h2>
                <p class="warning" />Dignissim elit quod dolore sollemnes iriure. Ut suscipit nunc laoreet lectorum facilisi. Consequat eodem consequn congue humanitatis. Vel in litterarum odio solissi. <a href="#">For more information click here.</a>

</div>

Because that h2 is inside a span. You cant put a block element (h2) inside an inline element(span).

Replace the span with a div.

it works actually, you just nid to set font size and family to it

i edited it like

div.content h2 span {
display:block;
font-size:12px;
font-weight:normal;
text-transform:none;
}

Here's the result: sample