...

View Full Version : xhtml validation - need help with <li>



runningp
05-13-2010, 12:46 PM
Hey guys,

I hope someone can help me out.

Im validating my xhtml but have come across an issue im stuck with.



Line 97, column 5: end tag for "li" omitted, but OMITTAG NO was specified
Line 97, column 5: end tag for "ol" omitted, but OMITTAG NO was specified
Line 82, column 5: end tag for "ol" which is not finished
Line 43, column 35: document type does not allow element "div" here; assuming missing "li" start-tag




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml:lang = "en">

<head>
<title> yes</title>
</head>

<body>

<div align="center">
<table cellspacing="0" cellpadding="0" width="500">
<tr>
<td>
<div align="left">
<form name="form" action="" method="post">
<table style="WIDTH: 500px" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="left">
<div align="left">
<h3>What are you doing?</h3></div></td>
</tr>
<tr>
<td class="update_box">

<p align="center">
<textarea id="content" rows="5" cols="10"></textarea> </p>

<p align="center">
<input class="comment_button" id="v" type="submit" value="Update" name="submit" /></p>
</td>
</tr>

</table>
</form></div>




<div id="flash" align="left">&nbsp;</div>
<ol class="timeline" id="updates">
<div id="old_updates">



<table width="100%">

<tr>
<td colspan="4"> <hr style="COLOR: #6d7b8d; HEIGHT: 1px; BACKGROUND-COLOR: #a9d0f5" />
</td>
</tr>
<tr>
<td valign="top" width="10%" rowspan="2"><img height="40" alt="Pic" src="http://www.gravatar.com/avatar.php?gravatar_id=7d09b47edf3bdbedb4cb104fb507c3df" width="40" border="1" longdesc="http://www.gravatar.com/avatar.php?gravatar_id=7d09b47edf3bdbedb4cb104fb507c3df" /></td>
<td valign="top" width="12%"><strong>Jarratt</strong></td>
<td valign="top" width="63%">
gg....270</td>
<td valign="top" align="right" width="15%"><a class="delete_button" id="270" href="#"><span style="FONT-SIZE: 10px; COLOR: #ff0000">X</span></a> </td>
</tr>
<tr>
<td colspan="3"><span class="feed_link"><a class="comment" id="270" href="#">comment</a></span> <span style="FONT-SIZE: 10px; COLOR: #a9a9a9"><b>Yesterday</b> at 4:15 pm - ID = ...270</span>

<div class="view_comments" id="view_comments270"></div>




<table width="80%">
<tr>
<td>

<div id="commentload270" >

</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<ol id="update" class="timeline">
</ol>
<div class="comment_box" id="c270">
<form name="270" action="" method="post">
<textarea class="text_area" id="textarea270" rows="5" cols="10" name="comment_value"></textarea><br />

<div>
<input class="comment_submit" id="id270" type="submit" value=" Comment " /> </div>
</form></div></div>




<div class="morebox" id="more270"><a class="more" id="270" style="DISPLAY: block; WIDTH: 100%" href="#">more
270</a></div>

</td>
</tr>

</table></div>



</body>
</html>

runningp
05-13-2010, 01:12 PM
If i try the below code where i belive the <li> should go it does not show any results what so ever.


<body>

<div align="center">
<table cellspacing="0" cellpadding="0" width="500">
<tr>
<td>
<div align="left">
<form name="form" action="" method="post">
<table style="WIDTH: 500px" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="left">
<div align="left">
<h3>What are you doing?</h3></div></td>
</tr>
<tr>
<td class="update_box">

<p align="center">
<textarea id="content" rows="5" cols="10"></textarea> </p>

<p align="center">
<input class="comment_button" id="v" type="submit" value="Update" name="submit" /></p>
</td>
</tr>

</table>
</form></div>




<div id="flash" align="left">&nbsp;</div>
<ol class="timeline" id="updates">
<li>
<div id="old_updates">

<?php
$small=mysql_query("select * from messages2 order by msg_id desc LIMIT 1");
while($r=mysql_fetch_array($small))
{
$id=$r['msg_id'];
$msg=$r['message'];
$times=$r['time'];
?>


<table width="100%">

<tr>
<td colspan="4"> <hr style="COLOR: #6d7b8d; HEIGHT: 1px; BACKGROUND-COLOR: #a9d0f5" />
</td>
</tr>
<tr>
<td valign="top" width="10%" rowspan="2"><img height="40" alt="Pic" src="http://www.gravatar.com/avatar.php?gravatar_id=7d09b47edf3bdbedb4cb104fb507c3df" width="40" border="1" longdesc="http://www.gravatar.com/avatar.php?gravatar_id=7d09b47edf3bdbedb4cb104fb507c3df" /></td>
<td valign="top" width="12%"><strong>Jarratt</strong></td>
<td valign="top" width="63%">
<?php echo $msg.'....'.$id;?>
</td>
<td valign="top" align="right" width="15%"><a class="delete_button" id="<?php echo $id; ?>" href="#"><span style="FONT-SIZE: 10px; COLOR: #ff0000">X</span></a> </td>
</tr>
<tr>
<td colspan="3"><span class="feed_link"><a class="comment" id="<?php echo $id; ?>" href="#">comment</a></span> <span style="FONT-SIZE: 10px; COLOR: #a9a9a9"><?php echo time_stamp($times) ?> - ID = <?php echo $c_id.'...'.$id; ?>
</span>
<?php

//Here $id is main message msg_id value.
$csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id asc ");
$array = mysql_fetch_assoc($csql);
$comment_count=mysql_num_rows($csql);
if($comment_count>2)
{
$second_count=$comment_count-2;
?>

</td>
</tr>
</table>
<table width="100%">
<tr>

<td width="10%"></td>
<td width="90%">
<?php
}
?>

<div class="view_comments" id="view_comments<?php echo $id; ?>"></div>




<table width="80%">
<tr>
<td>
<?php
//Here $id is main message msg_id value.
$csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id asc ");
$array = mysql_fetch_assoc($csql);

$comment_count=mysql_num_rows($csql);
if($comment_count>2)
{
?>
<div id="two_comments<?php echo $id; ?>">
<a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a>

</div>
<div class="view_comments" id="view_comments<?php echo $id; ?>"></div>
<?php
}
?>
<?php
$small2=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit 2 ");
while($rowsmall22=mysql_fetch_array($small2))
{
$c_id=$rowsmall22['com_id'];
$comments=$rowsmall22['comment'];
?>





</td>
</tr>

<tr>
<td align="center" valign="middle" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid">
<div class="comment_actual_text">


<table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left">
<tr>

<td width="15%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td>
<td width="85%" style="VERTICAL-ALIGN: top; TEXT-ALIGN: left">
<strong>Jarratt</strong> <?php echo $comments; ?>
<br /><span style="FONT-SIZE: 10px;COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id;?> </span></td>
</div>

</tr>
</table><br />
</td>
</tr>
<tr>
<td>


<?php
}
?>

<div id="commentload<?php echo $id ?>" >

</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<ol id="update" class="timeline">
<li>
</li>
</ol>
<div class="comment_box" id="c<?php echo $id; ?>">
<form name="<?php echo $id; ?>" action="" method="post">
<textarea class="text_area" id="textarea<?php echo $id; ?>" rows="5" cols="10" name="comment_value"></textarea><br />

<div>
<input class="comment_submit" id="id<?php echo $id; ?>" type="submit" value=" Comment " /> </div>
</form></div></div>
</li>
</ol>

<?php
}
?>



<div class="morebox" id="more<?php echo $id; ?>"><a class="more" id="<?php echo $id; ?>" style="DISPLAY: block; WIDTH: 100%" href="#">more
<?php
echo $id;
?>
</a></div>

</td>
</tr>

</table></div>



</body>

VIPStephan
05-13-2010, 01:52 PM
1) What’s with all these tables there? What’s their purpose?
2) You can’t have this:

<ol class="timeline" id="updates">
<div id="old_updates">


Do you know what the ol element is and when it should be used? Only list items (li) can be direct children of ol (or ul), the div there is wrong (or needs to be nested inside an li as I see you have in your second code). You should strip down the code a lot and build it up step by step because currently it just looks messy and I don’t recognize any meaning. Semantic HTML (http://en.wikipedia.org/wiki/Semantic_HTML)is the keyword.

abduraooft
05-14-2010, 09:47 AM
Also check http://www.alistapart.com/articles/prettyaccessibleforms/ to see how to make an accessible form.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum