Help please: Padding-top not working in <a> nested in <li>

I'm trying to design a navbar, and I want to use padding-top to lower the text in the navbar, but it's just not working...

Here's the page I'm having trouble with: http://lab.doubledance.ca/emphasis/

My code...

<ul class="nav-btns"> 
	<li><a href="#">artists</a></li> 
	<li><a href="#">fashion</a></li> 
	<li><a href="#">lifestyle</li> 
	<li><a href="#">photos</a></li> 
	<li><a href="#">reviews</a></li> 
	<li><a href="#">interviews</a></li> 
</ul>  

HTML:

My CSS for it is...

.nav ul.nav-btns {
	float: left;
	display: inline;
	list-style-type: none;
	list-style-position: inside;
}

.nav ul.nav-btns li {
	display: inline;
}

.nav ul.nav-btns li a {
	clear: both;
	padding-top: 25px !important;
	margin-left: 2px;
	margin-right: 2px;
	font: 13pt helvetica, arial, sans-serif;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}

HTML:

See the page here: http://lab.doubledance.ca/emphasis/
See full stylsheet here: http://lab.doubledance.ca/emphasis/css/style.css

If anyone could help, that'd be swell!

 

In the following class: .nav ul.nav-btns li a { .....

Remove:

clear: both;

Code (markup):

Add:

display: block;
float: left;

Code (markup):

That'll do it

------------

To vertically align (center) text,

Remove:

padding-top: 25px !important;

Code (markup):

Add:

line-height: 50px;

Code (markup):

 

You're the best, buddy! It worked perfect!

 

No problem

It's probably also worth mentioning - if you define height and padding, the padding will need to be subtracted from the height, otherwise it will increase the size of the <li> . For example if I have a div that is 500px * 500px, and add padding: 20px;, the width and height should be changed to 460px * 460px .

I see you're using padding and height in your nav bar, this will cause you problems later on when you come to add items below it because the <li> is much longer than you think .

 

I removed height attribute from <a> and nothing changed! Not sure why I had it

Thanks for the tip!

 

By default <a> attribute is inline element. Vertical margin an padding do not work with inline.

By setting display:block in css file you can convert it to block element and set vertical margin/padding.