CSS Trouble!!

**ollycb** · 06-15-2011 04:35 AM

Hi People,

having some trouble with css not working trying to create alternate stylings on the links without using java this is what I've got so far: Thanks in Advanced

Code:

<style type="text/css">
#menu ul {
	width: 605px;
	margin-right: auto;
	margin-left: auto;
}
#menu ul li {
	float: left;
	list-style-type: none;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFF;
}
#menu ul .1  a{
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFF;
	color: #FFF;
	text-decoration: none;
	width: 120px;
	display: block;
	padding-top: 6px;
	padding-bottom: 6px;
	background-color: #C09;
}
#menu ul .2 a{
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFF;
	color: #FF0;
	text-decoration: none;
	width: 120px;
	display: block;
	padding-top: 6px;
	padding-bottom: 6px;
	background-color: #96C;
}
#menu ul .3 a{
	color: #FF9;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFF;
	text-decoration: none;
	width: 120px;
	display: block;
	padding-top: 6px;
	padding-bottom: 6px;
	background-color: #906;
}
#menu ul .4 a{
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFF;
	color: #FF0;
	text-decoration: none;
	width: 120px;
	display: block;
	padding-top: 6px;
	padding-bottom: 6px;
	background-color: #606;
}
#menu ul .5 a{
	color: #FFF;
	text-decoration: none;
	width: 120px;
	display: block;
	padding-top: 6px;
	padding-bottom: 6px;
	background-color: #99F;
}
</style>
</head>

<body>
<div id="menu">
<ul>
	<li class="1"><a href="#">Link1</a></li>
    <li class="2"><a href="#">Link2</a></li>
    <li class="3"><a href="#">Link3</a></li>
    <li class="4"><a href="#">Link4</a></li>
    <li class="5"><a href="#">Link5</a></li>
</ul>
</div>
</body>

**Kor** · 06-15-2011 04:53 AM

The name of a CSS class can not start with a dash or a digit.

There is a workaround to use digits is naming a class (you could use the escaped unicode value of that digit), but you should better rename your classes, so that they will not start with a digit.

**ollycb** · 06-15-2011 04:59 AM

Thanks Kor, that sorted it…

Thread: CSS Trouble!!

Thread Tools

Display

CSS Trouble!!

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions