Positioning of Custom Unordered List Text - css

Question

I made a custom and horizontal unordered list. Here's a code example (nothing special):
<div id="steps-left">
<ul>
<li class="active one">Start</li>
</ul>
</div>
Here's the CSS that styles it:
#steps-left {
margin: 0 auto;
display:inline-block;
padding-bottom: 40px;
font-weight: 200;
font-size: 14px;color:#333333;
}
#steps-left ul {
margin: auto;
padding: 0;
float: left;
}
#steps-left li {
display: inline;
}
#steps-left ul li.active {
background: transparent url('../images/steps-left-active.png') no-repeat top left;
padding: 0px 0px 30px 46px; /* Makes the text move to the right of the bullet */
line-height: 0px;
margin-right: 30px; /* Defines the horizontal spacing between the bullets */
}
#steps-left ul li.active.one {
background-position: 0 0;
height: 42px;
width: 43px;
}
Problem:
I'm trying to figure out how to shift the text down, because as shown by the image below, the text is too high. So far, I haven't found anything that shifts the text down. I know the line-height property works, but that only works if the list is vertical, which in this case I want it horizontal.
Here is the image:
http://i.stack.imgur.com/ia24l.jpg

Answer 1

One option you have is making a custom tag pair for each of your menu items. Did you try that?
Do it as follows:
<div id="steps-left">
<ul>
// And here you would be able to apply line height.
<li class="active one lineheight">Start</li>
</ul>
<ul>
<li class="blah blah lineheight"> Second item </li>
</ul>
</div>
CSS
.lineheight {
//your desired lineheight.
example: line-height:100px;
}
Here you have a more specific and descriptive text on how to do it: Vertical-Align for li tag