Why won't this HTML work?

Question

I have a span text block inside a paragraph. Inside this span block I have two paragraph breaks. On webkit, the browser renders the first paragraph correctly but fails back to browser default settings on the last two. Why?

<style type="text/css">

span.post-content {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
}

</style>

<p><span class="post-content"> Some text here <p/> From here text loses style and adopts browser default <p/> same here </span></p>

This works in all browsers except Webkit based ones: chrome and safari.

Answer 1

The example is invalid. Fix the errors and the problem will likely go away.

1. A span element cannot include a p element
2. In HTML <p/> doesn't mean what you probably think it means
3. <p/> is not allowed in HTML Compatible XHTML
4. In XHTML, <p> may not contain <p> (nor in HTML but the end tag is optional so <p>foo<p>bar is valid and means <p>foo</p><p>bar)

You probably want something like this (and to change the CSS to reference the changed element type)

<div class="post-content">
    <p>Some text here</p>
    <p>From here text loses style and adopts browser default</p>
    <p>same here</p>
</div>

Answer 2

Maybe you can start by writing well structured HTML then see if there are any problems.

Answer 3

You can always check your (X)HTML code here:

validator.w3.org

Or in Opera browser more quickly: right click -> Validate

Answer 4

As David said: span cannot contain p - that is it can - but it does not make sence - because span is INLINE display type and p is BLOCK type. A span element is a line within the block ...

as ben stated: the concepts must be understood - structured or not