Tab issue

Padding text in tab link

[Yakhunter]

My problem is that I have tab links in the standard <ul><li> markup.
For the backgrounds I have set some tab images.
What I need to do is pad the text 5px down from the top of the tabs. This is very simple, however when I set the padding property the text moves down, but there is now 5px of whitespace below each of my tabs. This does not occur in IE, but we all know IE is a different story.
Am I just not structuring my markup correctly?

<ul>
<li class="activetab"><a title="Friends" onclick="do_info('friends'); return false;">Friends</a></li>
<li><a title="Events" onclick="do_info('events'); return false;">Events</a></li>
<li><a title="Music" onclick="do_info('music'); return false;">Music</a></li>
<li><a title="RSVP's" onclick="do_info('RSVP'); return false;">RSVP's</a></li>
<li><a title="Bulletin" onclick="do_info('bulletin'); return false;">Bulletin</a></li>
<li><a title="Mail" onclick="do_info('mail'); return false;">Mail</a></li>
<!--end tabs-->
</ul>

To just rephrase: I want to move the text in these tabs down, but when I do it gives me whitespace below the elements. I can't have this extra whitespace.

[le_gber]

hello Yakhunter and Welcome to WebmasterWorld [webmasterworld.com]

could you give us the css code as well for us to help you

[Yakhunter]

Certainly,
css:
ul {
width: 494px;
clear: both;
margin: 20px 0 0 0;
padding: 0 0 0 0;
list-style-type: none;
}

li {
background: #FFFFFF url(images/tab_grey.gif) top left no-repeat;
display: inline;
width: 82px;
height: 22px;
padding: 0 0 0 0;
margin: 0 0 0 0;
cursor: default;
z-index: 2;
}

li a {
background: #FFFFFF url(images/tab_grey.gif) top left no-repeat;
float: left;
width: 81px;
height: 22px;
text-align: center;
color: #959595;
font-family: Arial;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 0 0 0 0;
margin: 0 0 0 0;
cursor: default;
}

li :visited {
background: #FFFFFF url(images/tab_grey.gif) top left no-repeat;
width: 81px;
height: 22px;
text-align: center;
color: #959595;
font-family: Arial;
font-size: 12px;
font-weight: bold;
text-decoration: none;
text-align: center;
padding: 0 0 0 0;
margin: 0 0 0 0;
}

li :hover {
background: #FFFFFF url(images/tab.gif) top left no-repeat;
height: 22px;
width: 81px;
color: black;
font-family: Arial;
font-size: 12px;
font-weight: bold;
text-decoration: none;
text-align: center;
padding: 0 0 0 0;
margin: 0 0 0 0;
}

li :active {
background: #FFFFFF url(images/tab.gif) top left no-repeat;
height: 22px;
width: 81px;
color: black;
font-family: Arial;
font-size: 12px;
font-weight: bold;
text-decoration: none;
text-align: center;
padding: 0 0 0 0;
margin: 0 0 0 0;
}

[doodlebee]

Just anote - there shouldn't be a space between your "li" and ":hover", etc. - it should read "li:hover"

As for me, I cheat a bit when that happens. Someone else might have a better solution, but I do one of two things:

if you pad the top 5 pixels and you get 5px of whitespace below it, set your margin-bottom:-5px. If you prefer not to use negative margins (truly, I prefer not to, but sometimes you have to!) then set the height of your anchor tag so that the whitespace doens't occur - like as 1em, or 1.5 em - whatever works :)

Like I said, someone else might have better ideas, but one of those usually works for me :)