Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder mOrloff's Avatar
    Join Date
    Nov 2008
    Location
    The Great Pacific NW, USA
    Posts
    422
    Thanks
    8
    Thanked 6 Times in 6 Posts

    Why is my style changing after an OL?

    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:
    Code:
    #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.)
    Code:
    <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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder mOrloff's Avatar
    Join Date
    Nov 2008
    Location
    The Great Pacific NW, USA
    Posts
    422
    Thanks
    8
    Thanked 6 Times in 6 Posts
    Yup, that did it.
    I'll try to start remembering about the validator again.

    Thanks,
    ~ Mo

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,304
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by mOrloff View Post
    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:
    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:
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Regular Coder mOrloff's Avatar
    Join Date
    Nov 2008
    Location
    The Great Pacific NW, USA
    Posts
    422
    Thanks
    8
    Thanked 6 Times in 6 Posts
    Arbitrator, thanks for the details.

    Very, very helpful.

    ~ Mo


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •