Forum Mjukvara Programmering och digitalt skapande Tråd

CSS hover hjälp

1
Skriv svar
Permalänk
Medlem
●

CSS hover hjälp

Hej!

Jo jag har gjort en meny, funkar finfint i Firefox men i IE strular den lite.. Länkarna "hoppar" upp och ner, skiftar mellanrummet mellan. Se www.freddelito.se , det är menyn till höger som jag menar.

Hur kan jag lösa det?
Här följer koden:

stilmall.css

a.lank {
display:block;
width:170px;
height:20px;
border-left:5px solid #be6a1d;
margin-bottom:5px;
padding-left:5px;
font-family:Tahoma;
font-size:14px;
color:#121615;
text-decoration:none;
letter-spacing:3px;
}

a.lank:hover {
border-left:5px solid #121615;
display:block;
width:170px;
height:20px;
margin-bottom:5px;
padding-left:5px;
font-family:Tahoma;
font-size:14px;
color:#121615;
text-decoration:none;
letter-spacing:3px;
font-weight:700;
}

index.php

        <a href="?p=start&s=sunset" class="lank">Index</a>
	<a href="?p=ommig&s=factory" class="lank">Om mig</a> 
	<a href="?p=portfolio&s=rust" class="lank">Portfolio</a> 
	<a href="?p=kontakt&s=design" class="lank">Kontakt</a> 
	<a href="?p=gastbok&s=car" class="lank">Gästbok</a>
Visa signatur

Mvh
Fredrik

Redigera
Citera flera Citera
Permalänk
Medlem
●

först ska jag tipsa dig om en sak som gör allt lättare...

a:hover ärver av a, därför behöver du inte ha upprepningar i a:hover, utan bara skillnaderna.

om a har color: black; så har ocks a:hover det etc.

Jag tror att det beror på din font weight, testa utan den, och om den är felet, testa att experimentera med den.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Först och främst ett tips. Du behöver inte upprepa en massa värden i a:hover som redan är satta i a-elementet. Det som kanske strular här är att värdena för de generella a-elementen är angivna efter a.lank och alltså "skriver över" dessa värden (a:hover blir t ex understruket), om det inte specifikt är angivet något annat i a.lank. Om du flyttar upp de generella a längst upp (över a.lank) så slipper du det problemet. Då borde du kunna minska ner koden till något sådant här:

a.lank, a.lank:link, a.lank:visited {
display:block;
width:170px;
height:20px;
margin-top:4px;
border-left:5px solid #be6a1d;
padding-left:5px;
font:14px Tahoma;
color:#121615;
text-decoration:none;
letter-spacing:3px;
}

a.lank:hover {
border-left:5px solid #121615;
font-weight:700;
}

Om du använder koden ovan borde ditt problem lösas också. Av någon anledning gillar IE inte alltid margin-bottom.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jo, hade så innan.
Testade bara att sätta in alla attributer på hover för att se om det hjälpte.

Tack för hjälpen! margin-top fungerar utmärkt:)

Visa signatur

Mvh
Fredrik

Redigera
Citera flera Citera
1
Skriv svar