Nested <p>'s

windows

Guest
Hmm.. help me understand this:

If I have the following CSS

.letter{
margin:30px 0 0 30px;
}
.letter p{
font-family:"Courier New", Courier, mono;
}
.letter h2{
font-family:"Courier New", Courier, mono;
font-weight:900;
font-size:14px;
}
.letter p+p{
text-indent:20px;
margin:20px;
}


and this HTML

<div class="letter">
<p>
<h2>Heading 2</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</p>
</div>


Why are paragraphs 2, 3, and 4 indented, but 1 is not indented? How can I get them to be all indented.just being curious...but will this work?

.letter h2+p{
text-indent:20px;
margin:20px;
}.letter * + p
any p element in .letter who is directly after any other element.
does not work in IE ;)Is nesting paragraph tags semantically correct? Something doesn't jive with me there...

I don't even think you should have a headline tag inside of a paragraph.

I bet it doesn't validate.Wouldn't this serve the same purpose?

<div class="letter">
<h2>Heading 2</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</div>Thanks guys! :)

PSLoh, I dont think that will work, because there's no <p> inside the <h2> tag. :p

Fang, good suggestion, I had forgotten about *.

I'm gonna use Triumph's suggestion, it does make more sense to do it that way.:D
 
Back
Top