CSS validator question with ul and span

**james438** · 09-01-2007, 07:17 AM

ok, I'll bite. What is wrong with the following. I'm having a bit of trouble figuring it out.

Code:

<span style="color:tan;"><ul><li>decrease pain 
<li>decrease disability 
<li>improve strength of contractions
<li>increase the size and symmetry of the muscles 
<li>return to a tonic type contraction 
<li>facilitate the anticipatory function 
<li>decrease the rate of LBP recurrence</ul></span>

**coothead** · 09-01-2007, 11:40 AM

Hi there james438,

You are attempting, incorrectly, to place a block-level element ul within an inline element span.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

coothead

**james438** · 09-01-2007, 04:28 PM

I guess that does help out a little, but if that is so why does the following not work?

Code:

<ul><span style="color:tan;"><li>decrease pain 
<li>decrease disability 
<li>improve strength of contractions
<li>increase the size and symmetry of the muscles 
<li>return to a tonic type contraction 
<li>facilitate the anticipatory function 
<li>decrease the rate of LBP recurrence</span></ul>

Here is the link to the validator page where it shows the errors I am talking about.

**boogyman** · 09-01-2007, 04:41 PM

Originally Posted by james438

ok, I'll bite. What is wrong with the following. I'm having a bit of trouble figuring it out.

Code:

<span style="color:tan;"><ul><li>decrease pain 
<li>decrease disability 
<li>improve strength of contractions
<li>increase the size and symmetry of the muscles 
<li>return to a tonic type contraction 
<li>facilitate the anticipatory function 
<li>decrease the rate of LBP recurrence</ul></span>

Originally Posted by james438

I guess that does help out a little, but if that is so why does the following not work?

Code:

<ul><span style="color:tan;"><li>decrease pain 
<li>decrease disability 
<li>improve strength of contractions
<li>increase the size and symmetry of the muscles 
<li>return to a tonic type contraction 
<li>facilitate the anticipatory function 
<li>decrease the rate of LBP recurrence</span></ul>

Here is the link to the validator page where it shows the errors I am talking about.

both of those are incorrect... this second one is a little better but still not correct. if all you want to accomplish is to make the color of the li text tan... then you cause just use a css style sheet.. if you have an external style shee that you link to you can just add the properties to it, however I am going to assume that you do not have that, and as such we will use an embedded style sheet that you put at the top of the page. like so

Code:

<DOCTYPE....>
<html>
<head>
   <title>TITLE OF PAGE</title>
<style type="text/css">
<!--
ul li {
   color: #d2b48c;
}
-->
</style>
</head>

Its always better to use the hexidecimal equivalent on your colors. for other colors see http://halflife.ukrpack.net/csfiles/help/colors.shtml
then you also need to modify the content of the list itself, and close the ending list items.

Code:

<ul>
    <li>decrease pain</li>
    <li>decrease disability </li>
    <li>improve strength of contractions</li>
    <li>increase the size and symmetry of the muscles </li>
    <li>return to a tonic type contraction</li>
    <li>facilitate the anticipatory function </li>
    <li>decrease the rate of LBP recurrence</li>
</ul>

also note that i took out the <span> tags. now your list is valid markup

**Twey** · 09-01-2007, 05:08 PM

It's valid HTML anyway: the </li> is implied. I find the explicit form neater, though.

**james438** · 09-01-2007, 05:08 PM

Thanks, I didn't think to style the ul or li tags.

**james438** · 09-01-2007, 05:10 PM

I generally leave out the </li> because they do not need to be added to validate the page (sort of like <hr></hr>), so for me I like to leave out the extra code.

**boogyman** · 09-01-2007, 05:36 PM

Originally Posted by james438

I generally leave out the </li> because they do not need to be added to validate the page (sort of like <hr></hr>), so for me I like to leave out the extra code.

<hr> is just <hr>
there is not closing horizontal rule for that.. its like the <input> tag or <br> break rule tag

if you wanted to do an ending tag on that you would need to do so by
<hr /> -- <input /> -- <br />

etcetc
but those are only required in xhtml, which IE still fails to recognize

**Twey** · 09-01-2007, 06:10 PM

Correction: they're only valid in XHTML. In the HTML DOCTYPE they're defined as singleton tags, which means that they have no ending tags; </hr> is invalid. <li>, on the other hand, is like <p>: it does have and require a closing tag, but it's implied when the parser encounters another <li> or the parent element closes.

Thread: CSS validator question with ul and span

Thread Tools

Search Thread

CSS validator question with ul and span

Bookmarks

Bookmarks

Posting Permissions