Unordered list inside <p>
 

I created a template for distribution at OSWD. I thought that everything was fine with it until I got an email the other day from a guy trying to use an unordered list.

The template is set to have a nice header and box drawn around the content in any <p> tags. When you put a list inside the <p> tags, though, any content afterwards is pushed out below the bottom of the box. I can't figure out why this is happening or how to fix it. Any suggestions?

Link to original html/css files (.zip)
Link to html w/ list and visual of the error

This is a pure shot in the dark, as I haven't looked it up, but I'm pretty sure your <div>, for the list, is terminating your <p>. Thus the page is rendering absolutely as specified. Are you sure you can claim XHTML without having closing tags for the <p>s? I'm not an expert, just asking.

Whoops... would you believe that I uploaded the wrong version of the html file? Those div tags were a remanant from something I was expirimenting with to try and find a workaround last night. Needless to say I had no luck. They have now been removed, and the error is still present.

Also, there are closing tags for all the <p>s. They just usually get left on the right side of the page at the end of the text. When I finished the template, it did validate xhtml 1.1 correctly. Since I started messing with it to try and fix the error, I haven't re-validated it, so I might have introduced an error. Once I know what's wrong and have it corrected, I can worry about standards compliance again.

Would you care to put up a link for the corrected code? Or does the previous link now refer to the corrected code?

<p>s are funny things, they are indeed block level elements
but unlike others such as <div>, the may not contain block
level children - only inline ones - so you can't put an <ul>
inside a <p>.

Couple of other things:

-You need to fix your email address. You havev a [tab] inside
the </em> tag which is fecking it up:
-Using a light grey texy on a white background is a really bad
idea.

-Is the phrase 'Clean Looks' realy the most important text on
the page?

-I notice you are using an XHTML 1.1 Doctype - can you tell
me why?

--47.

The file linked has been fixed.

So then what I want couldn't be done without creating several classes in css to mimic the appearance... hmm

Thanks - I'll fix that one... damn typos...

This is a template that I wrote to mimic the look of one done by another guy (see the linked material for more details). His original was designed with a bunch of tables and was thus difficult to edit unless one wanted to keep his exact form.

The site I submitted it to (OSWD) is a place where you can submit such templates for others to use, so I just rewrote his (also submitted there) to use CSS and be easier to edit. All color choices were his originally.

'Clean Looks' is just the title that I arbitrarily picked for it. It is intended that whoever edits it for their own use would change that to reflect what they felt was appropriate.

OSWD has elected to only accept submissions that are xhtml compliant. I opted to use 1.1 simply as a matter of academic exercise. When I wrote this, I had just begun to learn html and css, and this project was just sort of to see if I understood what I had read well enough to put it all together.

There wasn't any special reason for picking 1.1 over 1.0 (transitional or strict); I just hadn't used it before, so I thought I would for this.

You can, it just means using a <div> to encase the text, rather than
a <p>. You can then put your <p>s in the <div>s if you want.

Fair enough.

Ok, but the way you are using it is not correct. XHTML 1.1 is ahead
of its time; it is required to be served up as application/xhtml+xml
which isn't properly supported by IE.

Have a read of some of these:
http://keystonewebsites.com/articles/mime_type.php
http://hixie.ch/advocacy/xhtml

For a hands-on look at why you shouldn't use 1.1, have a look at this
example a fellow poster on another forum created:

This first page is a proper, well formed XHTML1.1 document. Look at it
in a proper browser like Firefox to see it as it should be displayed, then
look at it in IE... :rolleyes:
http://garyblue.port5.com/webdev/xhtml/xhtmldoc.html

This second page is an example of a broken document. As you can see,
both browsers handle it differently. I'll leave it to you to figure out which
one is misbehaving... ;)
http://garyblue.port5.com/webdev/xht...-xhtmldoc.html

-47.