• Locked
2 replies [Last post]
Tue, 2012-01-17 09:41
wasted.xtreme
wasted.xtreme's picture
Offline
Last seen: 1 year 18 weeks ago
newbie
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>

Top
Tags:
Tue, 2012-01-17 16:06
#1
gary.turner
gary.turner's picture
Offline
Last seen: 2 days 3 hours ago
Moderator
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 8761
Points: 2704

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.

Top
Wed, 2012-01-18 09:50
#2
Hugo
Hugo's picture
Offline
Last seen: 12 hours 13 min ago
Moderator
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15590
Points: 2724

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

Top
  • Locked