13 replies [Last post]
RichardOnRails
Offline
Regular
Last seen: 14 years 3 weeks ago
Timezone: GMT-4
Joined: 2007-09-03
Posts: 18
Points: 0

I'm trying to test the examples for Descendant/Child Type Selectors
found in Sections 5.5 and 5.6 of http://www.w3.org/TR/CSS21/selector.html#simple-selector.

My test case is http://home.comcast.net/~CaptQueeg/06-DescendantAndChildTypeSelectors.html
and the code is duplicated below.

In particular, Section 5.6 includes the rule "div ol>li p". My test case has the rule:
div p ul li {border: 2px solid red; margin: 2px}
which does not get honored.

I think the root of my problem is that the W3C validator claims the tag </p> is disallowed by my DTD. I commented out that tag to get a valid document, but it seems to me that

now has no discernible scope.

I don't understand why W3C treats </p> as invalid in the first place. The DTD at http://www.w3.org/TR/html4/strict.dtd includes the specification:

So, it seems to me that P should be treated just like DIV and require a closing tag.

What am I missing? Any suggestions welcome.

Thanks in Advance,
Richard


Descendant And Child Type Selectors



div > ul > li {border: 2px solid blue; margin: 2px}
div p ul li {border: 2px solid red; margin: 2px}
div ol > li p {color:green; font: bold italic 16pt times, serif;}




  • div-p-ul-li: Item1

  • div-p-ul-li: Item2




    1. div-p-ul-ol-li: Item1



    2. div-p-ul-ol-li: Item2






  • div-ul-li: Item1

  • div-ul-li: Item2


Ruby on Rails enthusiast
Learning CSS to use ROR more effectively
WinXP/SP2
Firefox, SeaMonkey, Aptana

RichardOnRails
Offline
Regular
Last seen: 14 years 3 weeks ago
Timezone: GMT-4
Joined: 2007-09-03
Posts: 18
Points: 0

Edited version of my previous post

This is a revision of my original post because some of the code was not properly tagged and thus got eliminated. Hopefully this will be presented as intended.

I'm trying to test the examples for Descendant/Child Type Selectors
found in Sections 5.5 and 5.6 of http://www.w3.org/TR/CSS21/selector.html#simple-selector.

My test case is http://home.comcast.net/~CaptQueeg/06-DescendantAndChildTypeSelectors.html and the code in also included below.

In particular, Section 5.6 includes the rule div ol>li p. My test case has the rule div p ul li {border: 2px solid red; margin: 2px} which does not get honored.
I think the root of my problem is that the W3C validator claims the tag

is disallowed by my DTD.
I commented out that tag to get a valid document, but it seems to me that

has no discernible scope.

Further, I don't understand why W3C treats

as invalid in the first place. The DTD at
http://www.w3.org/TR/html4/strict.dtd includes the specification

So, it seems to me that P should be treated just like DIV and require a closing tag.

What am I missing?

Thanks in Advance,
Richard


Descendant And Child Type Selectors



div > ul > li {border: 2px solid blue; margin: 2px}
div p ul li {border: 2px solid red; margin: 2px}
div ol > li p {color:green; font: bold italic 16pt times, serif;}




  • div-p-ul-li: Item1

  • div-p-ul-li: Item2




    1. div-p-ul-ol-li: Item1



    2. div-p-ul-ol-li: Item2






  • div-ul-li: Item1

  • div-ul-li: Item2


Ruby on Rails enthusiast
Learning CSS to use ROR more effectively
WinXP/SP2
Firefox, SeaMonkey, Aptana

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

<!ELEMENT P - O

'-' = start tag required; '0' = closing tag may be omitted

Odd though as paragraphs should not contain block level elements (%inline;)*

Not sure why it's validating! your posted link validates btw I guess as a close tag is not required the paragraph has been implicitly closed before the ul starts once you had removed the closing tag.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

You're right Hugo. A UL

You're right Hugo. A UL can't be a descendent of a P and because its HTML the P doesn't have to be closed. Effectively this makes the UL the implicit point at which the P is closed. The later P closing tag now doesn't have a corresponding opening tag, so it is invalid. Removing it makes the page valid.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's interesting that the

It's interesting that the validator picks up The fact that the '/P' is invalid due to being stranded without a corresponding opening tag rather than the fact that it's nesting an illegal element, the closing tag 'may' be omitted but also may happily be mitted; or is that the error? as I've not actually validated that markup nor ever (I think ) omitted close tags.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Scrub that; wandered off,

Scrub that; wandered off, thought about it and it makes perfect sense that the validator makes the assumption that a closing paragraph tag wasn't being declared thus on finding one throws that error.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

RichardOnRails
Offline
Regular
Last seen: 14 years 3 weeks ago
Timezone: GMT-4
Joined: 2007-09-03
Posts: 18
Points: 0

Bottom line is: W3C's example is flat out wrong, I think

Hi All,

Thanks for your posts.

Based on your responses, guys, and tests with other DTDs, I now believe the W3C example is dead wrong. I tried two different DTDs: HTML 4.01 Traditional and XHTML 1.0 Strict. With the latter, the Validator indicated:

document type does not allow element "ul" here; missing one of "object", "ins", "del", "map", "button" start-tag.

    That is, under XHTML 1.0, a UL can't be a child of a P. The other DTDs seemed to indicate the same thing, though not as clearly. None of the start-tsgs offered above seem to be useful alternatives to P. I think I need some other kind of container tag other than DIV, OL, or UL to repair this illustration of Descendant and Child Type Selectors with an XHTML DTD.

    Any suggestions?

    Thank you all again,
    Richard

    Ruby on Rails enthusiast
    Learning CSS to use ROR more effectively
    WinXP/SP2
    Firefox, SeaMonkey, Aptana

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 47 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    the DTDs are quite clear on

    :? the DTDs are quite clear on the specs for a paragraph element, I quoted it earlier.

    I'm not sure really what you are trying to test case here or what problem you think you are encountering, but is it not built on an initial false premise? why are you trying to wrap a ul element? what problem are you finding with descendant selectors styling?

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 9 years 10 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    In XHTML it a different

    In XHTML it a different error. The P tag must be explicitly closed, when the UL comes along before a closing P tag the validator detects the error. As I mentioned before, HTML doesn't require a closing P tag, the UL implicitly closes it.

    The real point here is the validator isn't particularly smart. It doesn't scan the whole document and decide that the real error in your HTML document is that you have tried to nest a list within a paragraph. It works through the document bit and tells you about errors as it encounters them.

    The problem seems to be your understanding of what constitutes a paragraph. I'm no expert on grammar or sentence construction, but the general rule seems to be if it ends in a new line then that is the end of the paragraph. So if you have some text then some list items then some more text, you have a paragraph, a list, then another paragraph. If you want a container for all of that, use a generic one, i.e. a DIV, unless they all make up a quote, part of a form, or part of a large list in which cases you would use BLOCKQUOTE or FORM (or FIELDSET along with your actual form controls) or an LI.

    Ed Seedhouse
    Ed Seedhouse's picture
    Offline
    Guru
    Victoria British Columbia
    Last seen: 41 weeks 1 day ago
    Victoria British Columbia
    Timezone: GMT-8
    Joined: 2005-12-14
    Posts: 3570
    Points: 675

    RichardOnRails wrote:TBased

    RichardOnRails wrote:
    TBased on your responses, guys, and tests with other DTDs, I now believe the W3C example is dead wrong.

    But it isn't. You can't put a UL (or any other block display element) inside a P.

    A P can only contain text or other inline elements such as IMG.

    You vitally need to understand the difference between the tags and elements.

    Some block elements can contain other block elements (DIV, LI) and some can't (P). This is to enable and encourage semantic coding where you mark up meaning or structure, and save style and presentation for the CSS. That's actually a good thing, no matter how frustrating you find it to learn.

    Ed Seedhouse

    Posting Guidelines

    Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

    RichardOnRails
    Offline
    Regular
    Last seen: 14 years 3 weeks ago
    Timezone: GMT-4
    Joined: 2007-09-03
    Posts: 18
    Points: 0

    Problem finally understood and solved

    Hi All,

    Thank you very much for hanging in there while I ran around in circles like a dog chasing his tail.

    I found:

  • online documentation asserting that P, while itself a block element, may not contain block elements ... and UL is a block element.
  • W3C was not wrong. It never had a UL subordinate to a P. That crept into my code because I tried so many iterations. Mea culpa.
  • My solution was to substitute DIV for P. That validated. The code is at http://home.comcast.net/~CaptQueeg/06-DescendantAndChildTypeSelectors.html
    and in the box below. The rendered code is not pretty but it proves to me that Descendant/Child type selectors work as advertised. So, I'm delighted.

    Again, thanks for putting up with my ignorance on this thread.

    Best wishes,
    Richard


    Descendant And Child Type Selectors



    div > ul > li {border: 2px solid blue; margin: 2px}
    div div ul li {border: 2px solid red; margin: 2px}
    div ol > li div {color:green; font: bold italic 16pt times, serif;}




    • div-div-ul-li: Item1

    • div-div-ul-li: Item2




      1. div-div-ul-ol-li-div: Item1


      2. div-div-ul-ol-li: Item2








    • div-ul-li: Item1

    • div-ul-li: Item2


    Ruby on Rails enthusiast
    Learning CSS to use ROR more effectively
    WinXP/SP2
    Firefox, SeaMonkey, Aptana

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 39 weeks 3 days ago
    Dallas
    Timezone: GMT-6
    Joined: 2004-06-25
    Posts: 9776
    Points: 3858

    ignorance ≠ stupid

    Richard wrote:
    Again, thanks for putting up with my ignorance on this thread.

    We don't mind ignorance, it's stupidity that drives us up the wall. You proved your lack of stupidity by actually listening to responders, and re-studying source material. All too often, folks will simply argue in support of their ignorance, thus proving they are, indeed, stupid.

    You end up with a real understanding, and your helpers get a warm fuzzy feeling as they say to themselves, "I knew him when." Smile

    cheers,

    gary

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 47 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    As Gary said you haven't

    As Gary said you haven't demonstrated ignorance at all, however I did show early on the W3C paragraph specs explaining it may only contain inline elements Smile

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    RichardOnRails
    Offline
    Regular
    Last seen: 14 years 3 weeks ago
    Timezone: GMT-4
    Joined: 2007-09-03
    Posts: 18
    Points: 0

    Hi Moderators, Thanks for

    Hi Moderators,

    Thanks for the kind words. As to eventually realizing that P wouldn't accept block elements, I don't know if I didn't recognize that at first, or what. When you're stuck in the weeds, it's hard to find your way out even if someone gives you a road map. But all the responses I've gotten here where thoughtful and responsive.

    That contrasts nicely with another CSS-related Usenet newsgroup I was just on where some guy said I shouldn't post any of code on my website until I "got a clue". Some guys on Usenet sites feel that posts from Google Groups users are an invasion by aliens.

    See y'all later. I'm sure I'll be back with a brand new confusion.

    Best wishes,
    Richard

    Ruby on Rails enthusiast
    Learning CSS to use ROR more effectively
    WinXP/SP2
    Firefox, SeaMonkey, Aptana