link padding wont show up in IE

hi,

I've got some code like this:

Code: Select all

a.cMenu:link,a.cMenu:active,a.cMenu:visited {
    color: #ffffff; 
    font-size: 10px; 
    font-weight: bold;
    padding: 7px;
}

a.cMenu:hover { 
    background-color: #cc3333;
    padding-top: 14px;
}

As you can see its for links (hover and all)
What i am trying to achieve is when hovered over a button it chages background color(which i've done) but the background color has to hover in a specifc size if you get what i mean(this is why in:a.cMenu:hover i put padding)
I took 2 screenshots, one of IE and one of FF (FF render's it correctly, at least the way that i want) http://img219.imageshack.us/img219/4...problembw8.png
If theres a different way of doing this or im doing this incorectly please tell me.

add display: block; some width and height to a.cMenu:link, :active, :visited and :hover

I've done as you said but now instead of the menu displaying horizontaly its displayed vertically. I tried adding float: right but that didnt make much difference. How would i display the menu horizontaly?

Thank you!

Follow this tutorial

CSS Hover Effects

It shows me the whole menu but doesnt really say what each function means/how it works.
Can you please tell me how you would make this work:

Code: Select all

a.cMenu:link,a.cMenu:active,a.cMenu:visited {
    color: #ffffff; 
    font-size: 10px; 
    font-weight: bold;
    padding: 7px;
}

a.cMenu:hover { 
    background-color: #cc3333;
    padding-top: 14px;
}