WN - hjälp med meny hover.

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - hjälp med meny hover. (https://www.wn.se/forum/showthread.php?t=38560)

youheardit

2009-08-18 12:15

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) :
http://skanelive.se/other.png

Men istället så ser det ut så här i IE (7.0):
http://skanelive.se/ie.png

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

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

Kod:

.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 :D

Tacksam för svar :D

MvH!
//Philip Andersson!

Mortekai

2009-08-18 12:22

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

wiB	2009-08-18 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.

Cosma

2009-08-18 12:29

Citat:

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

2009-08-18 12:30

Citat:

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!

Citat:

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! :D

MvH!
//Philip Andersson!

Alla tider är GMT +2. Klockan är nu 01:39.