Weird ul behavior inside p

[genia]

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?

[auntnini]

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>

[genia]

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?

[auntnini]

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_el...block_elements
http://www.webreference.com/html/rendering/
http://www.peachpit.com/articles/art...24011&seqNum=3
http://www.w3.org/MarkUp/Guide/

[jscheuer1]

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]

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]

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]

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]

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:

<p><div></div></p>

is invalid because it will be parsed as:

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

[auntnini]

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.