[youheardit]

Hej gott folk!
Har ett litet CSS problem med IE 7.0 (som jag använder i detta fall) som inte får samma resultat som Chrome och Safari.

Så här vill jag att det ska se ut (Chrome & Safari) :



Men istället så ser det ut så här i IE (7.0):


Det är då a:hover vi snackar om.

CSS för menyn ser ut så här:

.menu {
width: 700px;
height: 40px;
float: right;
margin-top: 80px;
}
.menu li {
display:inline;
}
.menu li a{
width: 100px;
padding: 10px;
text-align: center; 
text-decoration: none;
font-weight: 500; 
color: #333333;
height: 40px;
width: 100px;

} 
.menu li a:hover {
width: 100px;
padding: 10px;
text-align: center; 
text-decoration: none;
font-weight: 500; 

height: 40px;
width: 100px;
background: #1a1a1a;
color: #FFFFFF;
}

Är det något jag måste ändra i css'en?
har du en lösning till detta så vill jag gärna veta

Tacksam för svar

MvH!
//Philip Andersson!

[Mortekai]

I .menu li a prova att lägga till line-height:40px;

[wiB]

En grej du bör tänka på är att du inte behöver sätta t.ex padding och annat två gånger. Du deklarerar redan på vanliga "a" och sedan gör du det igen på :hover. Om den inte ska ändras så behöver du inte fylla i den. Det som du skrivit i "a" ärvs till :hover.

Brukar inte själv sätta en höjd på ul » li » a-element, utan låter paddingen styra höjden på denna. Containern som den ligger i brukar oftast få sig en höjd.

[Cosma]

Originally posted by wiB@Aug 18 2009, 12:27
En grej du bör tänka på är att du inte behöver sätta t.ex padding och annat två gånger. Du deklarerar redan på vanliga "a" och sedan gör du det igen på :hover. Om den inte ska ändras så behöver du inte fylla i den. Det som du skrivit i "a" ärvs till :hover.

Brukar inte själv sätta en höjd på ul » li » a-element, utan låter paddingen styra höjden på denna. Containern som den ligger i brukar oftast få sig en höjd.

+ 1

[youheardit]

Ursprungligen postat av Mortekai

I .menu li a prova att lägga till line-height:40px;

Detta fungerade! men menyn flyttades längre ner men det löste jag med att ändra margin-top. Tack!

Ursprungligen postat av wiB

En grej du bör tänka på är att du inte behöver sätta t.ex padding och annat två gånger. Du deklarerar redan på vanliga a och sedan gör du det igen på :hover. Om den inte ska ändras så behöver du inte fylla i den. Det som du skrivit i a ärvs till :hover.
Brukar inte själv sätta en höjd på ul » li » a-element, utan låter paddingen styra höjden på denna. Containern som den ligger i brukar oftast få sig en höjd.

Joo, jag vet! jag har visst inte ändrat tillbax för jag satte dit allt som test om det skulle lösa problemet som Mortekai löste! tack annars!

MvH!
//Philip Andersson!