...

View Full Version : Why is my style changing after an OL?



mOrloff
05-08-2009, 12:52 AM
I have paragraph content with an <ol> child. Anything after the <ol> looses the styling.

If I had #mainContent>p{}, I would understand, but this is what I'm using:

#mainContent p{
font-size:.75em;
letter-spacing:.03em;
line-height:1.7em;
word-spacing:.075em;
padding-bottom: 1em;
}
#mainContent ol{
list-style-position:inside;
font-size:.75em;
letter-spacing:.025em;
}
I thought that this would style any <p> content within the div. Am I wrong?

Here's a truncated snippet of my markup: (I did test it with this exact truncated snippet, and got the same results.)

<div id="mainContent">
<p> Content content content content content content content content content content content
content content content content content content content.</p>
<p>Guarantee: All orders received by the following times are guaranteed to ship same day.
<ol>
<li>UPS 1day & 2day 1:30pm (4:30pm EST)</li>
<li>FedEx Air (1day & 2day) 2:50pm (5:50pm EST)</li>
<li>UPS 3day & Ground 3:50pm (6:50pm EST)</li>
</ol>
Additional content content content content content content content content content.</p>

Any thoughts?

~ Mo

Excavator
05-08-2009, 01:46 AM
Hello mOrloff,
No ol inside p tags.
Line 26, Column 4: document type does not allow element "ol" here; missing one of "object", "ins", "del", "map", "button" start-tag
<ol>✉
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

That's from the validator. See the links about validating in my sig below.


Try it this way instead -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#mainContent p{
font-size:.75em;
letter-spacing:.03em;
line-height:1.7em;
word-spacing:.075em;
padding-bottom: 1em;
}
#mainContent ol{
list-style-position:inside;
font-size:.75em;
letter-spacing:.025em;
}
</style>
</head>
<body>
<div id="mainContent">
<p>
Content content content content content content content content content
content content content content content content content content content.
</p>
<p>Guarantee: All orders received by the following times are guaranteed to ship same day.</p>
<ol>
<li>UPS 1day & 2day 1:30pm (4:30pm EST)</li>
<li>FedEx Air (1day & 2day) 2:50pm (5:50pm EST)</li>
<li>UPS 3day & Ground 3:50pm (6:50pm EST)</li>
</ol>
<p>Additional content content content content content content content content content.</p>
</div>
</body>
</html>

mOrloff
05-08-2009, 01:59 AM
Yup, that did it.
I'll try to start remembering about the validator again.

Thanks,
~ Mo

Arbitrator
05-08-2009, 04:04 AM
Any thoughts?Since it wasn't really explained: the p element has an optional end tag. As a consequence of that, the element is implicitly closed when an element that isn't allowed inside of it, like ol, appears. The DTD defines what elements are allowed inside of p; more specifically, block-level elements like ol, p, and table aren't part of the list of allowed elements.

Example Source Code:

<p>This is a paragraph.
<p>This is a paragraph.

Since p is a block-level element, the first p element is implicitly closed by the occurrence of the second:

Effective Code:

<p>This is a paragraph.
</p><p>This is a paragraph.

The same thing applies to other elements with optional end tags like li or head.

Putting it all together: what you actually have in your original code is a p element that ends at an ol start tag and an orphaned p end tag after the list that isn't associated with any start tag. Thus, the text between the orphaned tag and the list is actually a child of the div element.

mOrloff
05-08-2009, 06:43 PM
Arbitrator, thanks for the details.

Very, very helpful.

~ Mo



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum