2 replies [Last post]
wasted.xtreme
wasted.xtreme's picture
Offline
newbie
Last seen: 2 years 41 weeks ago
Timezone: GMT+5.5
Joined: 2012-01-17
Posts: 1
Points: 2

I have the below code, but the class "selectedRow", when added to 'li', it's not working.
Any solutions ?

<!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" dir="ltr" lang="en-US">
<head>
<title>List</title>
<script type="text/javascript" src="jquery.min.js"></script>
 
<style type="text/css">
 
body{
	margin:0px;
	padding: 0px;
	background-color: #efefef;
	font-family: Calibri;
}
 
#wrap{
	width: 40%;
	margin: 150px auto 0px auto;
	padding: 15px;
 
	background-color: #fff;
	box-shadow: 0px 0px 5px #999;
	border: 1px solid #aaa;
 
	overflow: hidden;
}
 
#msgContainer{
	width: 95%;
	margin: 15px auto 0px auto;
}
 
ul.listBox{
	width: 100%;
	margin: 0px;
	padding: 0px;
	position: relative;
}
ul.listBox > li{
	margin: 0px;
	padding: 5px;
	list-style: none;
	background-color: #efefef;
	box-shadow: 0px 0px 2px #999;
	border: 1px dashed #aaa;
	border-width: 0px 0px 1px 0px;
}
ul.listBox > li:hover{
	background-color: #dfdfdf;
	box-shadow: 0px 0px 4px #999;
}
.selectedRow{
	color: #f00;
}
 
a.button{
	width: 50px;
	height: 25px;
	display: block;
	float: left;
 
	padding: 8px 10px 0px 10px;
	margin: 20px 0px 0px 30px;
 
	background-color: #4499ff;
	border-radius: 5px;
	text-decoration: none;
	text-align: center;
	font-size: 15px;
	color: #fff;
}
 
a.button:hover{
	background-color: #55aaff;
}
 
.clear{
	clear:both;
}
 
</style>
 
</head>
 
<body>
 
<div id="wrap">
	<div id="listContainer">
		<ul class="listBox">
			<li>Test 1</li>
			<li class=".selectedRow">Test 1</li>
		</ul>
		<a href="#" class="button">Add</a>
		<a href="#" class="button">Remove</a>
		<div class="clear"></div>
		<div id='msgContainer'></div>
	</div>
</div>
 
<script type="text/javascript">
 
</script>
 
</body>
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 26 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9236
Points: 3242

It's probably because you

It's probably because you styled the class "selectedRow", while the desired element is marked as class ".selectedRow". Lose the dot, it's invalid anyway.

NB Use all lower case in your html markup and in css, no camel/hump-back notation. That's simply another opportunity for error, and is more difficult to read.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 20 hours ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

And if need be for clarity

And if need be for clarity and where long descriptive (but not too long) tokens are required simply separate the words with a hyphen (not underscore, keep that for programming).

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me