Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Weird ul behavior inside p

  1. #1
    Join Date
    Jan 2008
    Posts
    73
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default Weird ul behavior inside p

    first of all,happy new year to you all.
    so i have this page:
    http://shenkar.co.il/BarNess/proj11.htm
    and i'm trying to make it look like this:
    http://shenkar.co.il/BarNess/proj1.htm
    on the bottom there supposed to be 2 bullets-and for some reason it jumps out of the <P> and in IE7 it doesnt even display the bullet's..
    any ideas how to fix this?

  2. #2
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default weird HTML coding

    I question the way both pages use basic HTML elements. Block element tags include headers (from <H1> largest to <H6> smallest), <p> paragraph </p>, lists (<ul> unordered list for bullets, <ol> ordered lists for numbers, and <dd> definition lists). <span> is used for inline sections </span> with style class. It therefore bothers my sense of order that you are putting <UL><li>list</li></UL> inside another <p>block element </p>. (Must admit the effect is unusual, even if it's not what you want.)

    ==========================================
    <p>
    <span>Project</span><br>
    Consulting, marketing, and promotion
    <br><br>
    <span>Location</span><br>
    11.6 dunam property between Nes Ziona and Ayanot (Beit Oved Junction), central Israel
    <br><br>
    <span>Project Plan</span><br>
    Develop and build an exclusive event hall :<br>

    <ul id='lst'>
    <li>Ground floor – 2,100 sq.m. event hall, with optional partitions into smaller halls, including outdoor garden and service areas.</li>
    <li>First floor – 176 sq.m., including offices, service areas, and parking lot</li>
    </ul>

    </p>
    ==========================================

    Why don't you use CSS-styled <H3> or <H4> instead of <span>, start and close <p> paragraph</p>, then start and close <UL><li>list</li</UL> as a separate block element -- the way HTML code is supposed to define content?

    If you View>Page Source, you'll see that the second example is not using <UL>, just special-character &deg; code for an asterisk.

    =============================
    <p>
    <span>Project</span><br>
    Consulting, marketing, and promotion
    <br><br>
    <span>Location</span><br>
    11.6 dunam property between Nes Ziona and Ayanot (Beit Oved Junction), central Israel
    <br><br>
    <span>Project Plan</span><br>
    and build an exclusive event hall :<br><br>

    &deg;Ground floor – 2,100 sq.m. event hall, with optional partitions into smaller halls, including outdoor garden and service areas.<br><br>
    &deg;First floor – 176 sq.m., including offices, service areas, and parking lot.
    <br><br><br>
    <a href="Projects.htm">back</a>
    </p>
    Last edited by auntnini; 01-03-2009 at 09:22 PM.

  3. #3
    Join Date
    Jan 2008
    Posts
    73
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    auntnini,first of all thank you for your replay.
    about the code:
    both of the codes are mine,in the second i did used &deg; to create a similar effect.

    thanks for your comments,i'm kinda unaware of this-that ul can't be inside p element.
    and the h1-6 idea is good too..
    but the main question:where can i read about this topic of which elements can be inside other and which aren't?

  4. #4
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There is nothing wrong with placing a block level element inside another. However, the p element is a special case. It requires no closing tag, so closes automatically whenever a new block level element is encountered. So, although it will require changing your stylesheet in order to get the look that you want, the p element should be replaced by a div element which will not self close upon encountering the ul element.

    About the bullets in IE 7, for some stange reason, it appears that using width, height, or float with ul removes the bullets. So:

    Code:
    #listcontainer {
     float:left;
     width:285px;
    }
    #lst{
     margin:0;padding:0;
     margin-left:20px;
    }
    #lst li{
     color:#2e3b4c;	
     font:12px,arial;
     padding-left:5px;
    }
    and:

    HTML Code:
    <div id="listcontainer">
    <ul id='lst'>
    <li>Ground floor – 2,100 sq.m. event hall, with optional partitions into smaller halls, including outdoor garden and service areas.</li>
    <li>First floor – 176 sq.m., including offices, service areas, and parking lot</li>
    </ul>
    </div>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    However, the p element is a special case. It requires no closing tag, so closes automatically whenever a new block level element is encountered.
    since when? I have never heard of this?

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    See:

    http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

    Particularly:

    Start tag: required, End tag: optional
    and:

    The P element represents a paragraph. It cannot contain block-level elements (including P itself).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    boogyman (01-05-2009)

  9. #8
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    I know that it defines an actual paragraph, however I must have overlooked the portion about containing block-level elements.

    taking all of the above and the specification into consideration, I assume that since the end-tag is not required, and block-level elements cannot be encapsulated, a line-break would be inserted by the (specifications compliant) browser upon declaration of a block-level element such as a <div> tag?

  10. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That's about right. But it isn't just a line break, it is the end of the paragraph. In the case of this thread, it is a ul element that breaks the paragraph, so the container of the ul is actually the paragraph's parent. That accounts for the layout issues. The bullets issue in IE appears to be a browser quirk.

    A little more on this p thing:

    HTML Code:
    <p><div></div></p>
    is invalid because it will be parsed as:

    HTML Code:
    <p></p><div></div></p>
    with the 'second' closing p tag invalid.

    I can only assume that this is because it is considered desirable for the <p> tag to be semantically similar to the editor's pilcrow (
¶), which appears only at the beginning of each block of text to be designated as a paragraph.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  11. #10
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default yes! Thanks

    Now that's real information, which I among others appreciate.

    I could not find online specific info that would backup my instinctive sense about orderly HTML <P>paragraph</P> structure, and I worried about being able to nest <OL>(UL> lists </UL></OL> (which are both block elements) to create an outlines.

Bookmarks

Posting Permissions

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