a:hover, height moet groter

[mmatteman]

Ik wil een 'a' een grotere hoogte geven wanneer iemand er met zijn muis overheen gaat. Het vervelende is dat dit bij firefox wel lukt, maar bij IE niet.
De code: (ik werk heel onhandig, ik vraag daar jullie begrip voor )

.navbar{
width: 460px;
height: 50px;
background-image: url('images/navbarblock2.jpg');
margin: 108px auto auto 220px;

position: absolute;
z-index: 2;
}

a.navbara {
margin: 0 0 0 4px;
width: 50px;
height: 50px;
font-size: 110%;
padding: 0 5px 20px 5px;
text-decoration: none;
border-top: solid 5px #000000;
border-right: solid 0px #CCCCCC;
border-bottom: solid 0px #CCCCCC;
border-left: solid 0px #CCCCCC;
}

a.navbara:link{
border-top: solid 5px #000000;
border-right: solid 0px #CCCCCC;
border-bottom: solid 0px #CCCCCC;
border-left: solid 0px #CCCCCC;
color: #000000;
text-decoration: none;
}


a.navbara:visited{
border-top: solid 5px #000000;
border-right: solid 0px #CCCCCC;
border-bottom: solid 0px #CCCCCC;
border-left: solid 0px #CCCCCC;
height: 50px;
color: #000000;
text-decoration: none;
}

a.navbara:hover{

color: #0B0B61;
text-decoration: none;
height: 50px;
background-color: #FFFFFF;
}

a.navbara:active{

text-decoration: none;
height: 50px;
color: #0B0B61;

}

 

[ErikBooy007]

Waarschijnlijk werkt het niet omdat het een inline element is.

Zet de display property eens op block of inline-block

 

[mmatteman]

Wow, bij block wordt alles onder elkaar gezet en blij inline-block staat alles naast elkaar maar wordt de hoogte van de blokjes aangepast aan de tekst.

 

[ErikBooy007]

Heb je een voorbeeld online staan?

 

[mmatteman]

Nee sorry, ik heb geen domein.