Weird ul behavior inside p [Archive]

View Full Version : Weird ul behavior inside p

genia

01-01-2009, 02:46 PM

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 and in IE7 it doesnt even display the bullet's..
any ideas how to fix this?

auntnini

01-03-2009, 09:14 PM

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

==========================================

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

<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>


==========================================

Why don't you use CSS-styled <H3> or <H4> instead of , start and close paragraph, 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 ° code for an asterisk.

=============================

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

°Ground floor – 2,100 sq.m. event hall, with optional partitions into smaller halls, including outdoor garden and service areas. 
°First floor – 176 sq.m., including offices, service areas, and parking lot.
 
<a href="Projects.htm">back</a>

genia

01-03-2009, 10:06 PM

auntnini,first of all thank you for your replay.
about the code:
both of the codes are mine,in the second i did used ° 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?

auntnini

01-04-2009, 02:11 AM

Might be a good idea to “validate” pages:
http://validator.w3.org/
http://htmlhelp.com/tools/validator/

Could not find exactly what you wanted, but these links might help:
http://htmlhelp.com/reference/html40/structure.html
http://en.wikipedia.org/wiki/HTML_element#General_block_elements
http://www.webreference.com/html/rendering/
http://www.peachpit.com/articles/article.aspx?p=24011&seqNum=3
http://www.w3.org/MarkUp/Guide/

jscheuer1

01-04-2009, 03:23 PM

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:

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

and:

<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>

boogyman

01-05-2009, 12:46 PM

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?

jscheuer1

01-05-2009, 01:33 PM

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).

boogyman

01-05-2009, 03:33 PM

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?

jscheuer1

01-05-2009, 05:11 PM

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:

<div></div>

is invalid because it will be parsed as:

<div></div>

with the 'second' closing p tag invalid.

I can only assume that this is because it is considered desirable for the 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.

auntnini

01-05-2009, 09:09 PM

boogyman

01-05-2009, 09:45 PM

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 paragraph structure, and I worried about being able to nest <OL>(UL> lists </UL></OL> (which are both block elements) to create an outlines.

you can nest a list within a list, provided any nested list item is properly declared within a list item

<ol>
<li>text</li>
<li>
<ul>
<li>Sub-Text</li>
</ul>
</li>
</ol>

is a valid and proper HTML.