li css problem

Discussion in 'CSS' started by dizyn, Sep 28, 2009.

0
  1. #1
    Hi,

    My li rows are coming down, if i use two or three words in the div then it's ok but if i use more text then it does not work....


    Here is my code, please check 



    <!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">
<head id="Head1"><title>
	*******
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">
<!--
body {
	margin:0px;font-family: "Trebuchet MS";
}
#feedRows {
	list-style: none;
	margin: 0;padding: 0;
	width: 100%;
	background-color:#ffffff;
}
#feedRows li {
	margin: 0px;
	padding: 0px;
	height:20px;
	font-family: "Trebuchet MS";font-weight:normal;font-size: 15px;color:#595959;
	font-size: 80.1%;
}
#feedRows li .newRow{
	margin: 0px;
	padding: 0px;
	float:left;
	width:150px;
	height:auto;
}
#feedRows li .newCom{
	margin: 0px;
	padding: 0px;
	float:left;
	width:200px; height:auto;
}

-->
</style></head>
<body>
<div style="margin:0px auto; width:970px; border:0px solid #a60099;">
	<div style="padding:24px 0px 10px 6px;">
		<div align="right" style="float:right;">Sep 17, 2009</div>
		<div>Logo will come here...</div>
	</div>
	<div>
		<ul id="feedRows">		   
		   <li><div class="newRow"><strong>Date</strong></div><div class="newRow"><strong>User</strong></div><div class="newRow"><strong>Comments</strong></div></li>
		   
		   <li><div class="newRow">12 Sep, 2009</div><div class="newRow">Abdul Mannan</div><div class="newCom"></div></li>
		   <li><div class="newRow">12 Sep, 2009</div><div class="newRow">Abdul Mannan</div>
		   <div class="newCom">Comments by me ..... Hi Mys sadf asdf asdf</div>
		   </li>		   
		   <li><div class="newRow">12 Sep, 2009</div><div class="newRow">Abdul Mannan</div><div class="newCom">Comments by me .....</div></li>
		   <li><div class="newRow">12 Sep, 2009</div><div class="newRow">Abdul Mannan</div><div class="newCom">Comments by me .....</div></li>
		   <li><div class="newRow">12 Sep, 2009</div><div class="newRow">Abdul Mannan</div><div class="newCom">Comments by me .....</div></li>
		   <li><div class="newRow">12 Sep, 2009</div><div class="newRow">Abdul Mannan</div><div class="newCom">Comments by me .....</div></li>
		</ul>
	</div>
</div>


</body>
</html>
    Code (markup):
     
    dizyn, Sep 28, 2009 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Christ, another classic example of someone abusing a list for what SHOULD BE A TABLE... Lemme guess, led down the garden path by the whackos who say NEVER use a table? You have tabular data here, that's table time.

    Of course, there are other oddities in the code - the ID on the HEAD tag for example is pure nonsense (since you shouldn't ever need to target that), your body FONT declaration has no fallback families, etc, etc...

    Sad part is this one is SO obviously tabular data with elements that tables were BUILT to show.

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

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	table test
</title>

</head><body>

	<table id="comments">
	
		<caption>
			<span>17 September 2009<span> - </span></span>
			Logo will come here...
		</caption>
		
		<thead>
			<tr>
				<th class="date">Date</th>
				<th class="user">User</th>
				<th class="comment">Comments</th>
			</tr>
		</thead>
		
		<tbody>
			<tr>
				<td class="date">12 Sep, 2009</td>
				<td class="user">Abdul Mannan</td>
				<td class="comment"></td>
			</tr><tr>
				<td class="date">12 Sep, 2009</td>
				<td class="user"> Mannan</td>
				<td class="comment">Comments by me ..... Hi Mys sadf asdf asdf</td>
			</tr><tr>
				<td class="date">12 Sep, 2009</td>
				<td class="user"> Mannan</td>
				<td class="comment">Comments by me .....</td>
			</tr><tr>
				<td class="date">12 Sep, 2009</td>
				<td class="user"> Mannan</td>
				<td class="comment">Comments by me .....</td>
			</tr><tr>
				<td class="date">12 Sep, 2009</td>
				<td class="user"> Mannan</td>
				<td class="comment">Comments by me .....</td>
			</tr><tr>
				<td class="date">12 Sep, 2009</td>
				<td class="user"> Mannan</td>
				<td class="comment">Comments by me .....</td>
			</tr>
		</tbody>
	</table>

</body></html>
    Code (markup):
    With this CSS:

    /* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

body {
	font:normal 100%/140% "trebuchet ms",times,serif;
}

#comments {
	width:970px;
	margin:0 auto;
	border-collapse:collapse;
}

#comments caption {
	overflow:hidden; /* wrap floats */
	height:1%; /* trip haslayout, wrap floats IE */
	text-align:left;
	padding:24px 0 10px;
}

#comments caption span {
	float:right;
}

#comments caption span span {
	/* 
		the dash inside the nested span is for CSS off formatting
		so remove it when CSS is present
	*/
	display:none;
}

#comments td,
#comments th {
	padding-right:1em; /* just some extra spacing */
	text-align:left;
	font:normal 80%/140% "trebuchet ms",times,serif;
	color:#555;
}

#comments th {
	font-weight:bold;
}

#comments .date,
#comments .user {
	width:150px;
}
    Code (markup):
    Give or take that is all you really need there, and is semantically more correct than abusing a linked list and stuffing it to the gills with a bunch of DIV.
     
    deathshadow, Sep 28, 2009 IP