The below is a much simplified version of the real HTML:
<html>
<head>
<style type="text/css">
h3 { background: blue; }
p {background:grey; }
</style>
</head>
<body>
<h3>The paragraph below will style correctly.</h3>
<p>
As you can see, I am stylish.</p>
<p>
<h3>But this paragraph goes wrong.</h3>
I am sad. I have no style.
</p>
</body>
</html>
Slap that in a browser (have tried Firefox 12 and IE9) and whilst the first paragraph gets a grey background, the second one has none. Note, it doesn’t even have a blue background, the styling has been lost. It is my understanding that the background of the h3 should only affect the h3, not travel upward into the parent and affect that.
Have I missed something? Note the above is simplified. I want headers in my paragraphs, but this seems to be impossible without style errors. Is there a mistake in the above? Thanks.
It is not valid markup to have headers within a paragraph which is why the styling is getting screwed up.
You can validate your markup here: http://validator.w3.org/