Log in

View Full Version : 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.


<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?
<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 (http://www.animeviews.com/article.php?ID=2&table=homework_biomechanics) where it shows the errors I am talking about.

boogyman
09-01-2007, 04:41 PM
ok, I'll bite. What is wrong with the following. I'm having a bit of trouble figuring it out.


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

I guess that does help out a little, but if that is so why does the following not work?
<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 (http://www.animeviews.com/article.php?ID=2&table=homework_biomechanics) 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


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


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