PDA

View Full Version : Unordered list problems


SilverAce
02-13-2012, 05:06 AM
Okay so here's my question. I am setting up an unordered list for a horizontal list of the alphabet. I have looked everywhere for the code and I used their stuff. The problem is, the code (besides the basic CSS and the a:hover) do not apply to the boxes. Does anyone see the problem?

.Cat {
float: left;
height: 20px;
width: 15px;
vertical-align: middle;
text-align: center;
margin: 0px;
padding: 0px;
}

ul.Cat a:hover {
text-decoration: underline;
color: #0000FF;
}

.Cat ul {
margin: 0;
padding: 0;
list-style-type: none;
}

ul.Cat ul li {
display: inline;
}

.Cat ul li a {
text-decoration: none;
padding: 0em;
color: #3F3;
background-color: #036;
margin: 0px;
}

.Cat ul li a:hover
{
color: #90C;
background-color: #3CF;
}

SilverAce
02-13-2012, 05:06 AM
Also, by basic I mean the .Cat CSS.

edbr
02-13-2012, 07:21 AM
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<style type="text/css">
.Cat {
float: left;
height: 20px;
width: 15px;
vertical-align: middle;
text-align: center;
margin: 0px;
padding: 0px;
}

.Cat ul li a:hover {
text-decoration: underline;
color: #90C;
background-color: #3CF;
}

.Cat ul {
margin: 0;
padding: 0;
list-style-type: none;
}

Cat ul li {
display: inline;
}

.Cat ul li a {
text-decoration: none;
padding: 0em;
color: #3F3;
background-color: #036;
margin: 0px;
}


</style>
</head>

<body>

<div class="Cat">
<ul >
<li > <a href="#"> one</a></li>
<li> <a href="#">two</a></li>
</ul></div>
</body>
</html>

gentleone
02-13-2012, 12:03 PM
Something else. The ul tag is a block level element and the vertical align property doesn't do anything on block level elements. It's a property for inline and inline-block elements.

If you want to center text vertically in a block level element the most browser consistent way is to use the line-height property and set its value equal to the value of the height property of that block level element.

Another little thing. There's no value '0px'... '0px', '0em' or '0%' is '0' so just use '0' without a unit.

In your case you will get this:

.Cat {
float: left;
height: 20px;
width: 15px;
line-height: 20px;
text-align: center;
margin: 0;
padding: 0;
}

SilverAce
02-13-2012, 03:14 PM
Ed, I tried yours - nothing. Really weird stuff.

Also, using 0 shouldn't effect it for pad and marg. I use it for everything, even if it doesn't have a unit.

SilverAce
02-13-2012, 03:41 PM
I just talked to corrosive. He showed me that my problem was in the source, that I wasn't applying the .cat CSS to the wrapping div and had it applied to the ul. Once we cahanged that, everything worked great.

gentleone
02-13-2012, 04:41 PM
I just talked to corrosive. He showed me that my problem was in the source, that I wasn't applying the .cat CSS to the wrapping div and had it applied to the ul. Once we cahanged that, everything worked great.
Good stuff... glad you sorted it out.