<li> list-style-image problemer
Hej EksperterJeg sidder med et lille stylesheet problem
Jeg arbejde med 2 typer lister:
1) en liste med default prik og normal tekst
2) en liste med tekst som link, og med farvet prik
Dette kan gøres nemt ved at kalde en class i stylesheetet, hvor list-style-image: mypic.gif; figurerer.
Men jeg vil gerne undgå at kalde denne class, og i stedet bare lave et <li> tag og et <a> tag også skulle det spille helt af sig selv.
Se mit eksempel her: http://www.mydesk.dk/test/test.htm
Normal list er sort, med default prik, den opfører sig som den skal.
I de to næste eksempler har jeg leget lidt med rækkefølgen af tag’ene. Den første opfører sig rigtigt hvad angår prikken – den er den farve den skal være, men teksten forbliver sort, og ikke den farve som jeg har angivet under a:link i mit CSS. Nr 2 opfører sig rigtigt hvad angår tekst – men her løber jeg ind i problemer med billedet. På nogen maskiner løber jeg ind i at teksten hopper og prikken vises som sort(default) et kort øjeblik ved mouseover, før end at den skifter til den rigtige farve.
Mit mål er at prikken opfører sig som punkt to, mens teksten er formateret af det der stå i a:link i mit CSS.
1) Oplever du eksemplet som det jeg beskriver? (bliver prikken sort ved mouseover på punkt nummer 3?)
2) Hvad er det der gør, at prikken ikke forbliver grøn, på punkt nummer 3?
3) Er der en løsning på problemet, eller slipper jeg ikke uden om at kalde en class?
Mine koder er som følger:
CSS
A:link
{
cursor: pointer; cursor: hand;
TEXT-DECORATION: none;
color: #416772;
list-style-image: url(green_dot.gif);
}
A:active
{
TEXT-DECORATION: none ;
color: #416772;
list-style-image: url(green_dot.gif);
}
A:visited
{
TEXT-DECORATION: none ;
color: #416772;
list-style-image: url(green_dot.gif);
}
A:hover
{
TEXT-DECORATION: underline ;
color: #416772;
list-style-image: url(green_dot.gif);
}
li
{
color: black;
}
HTML
<html>
<head>
<link rel=stylesheet type="text/css" href="style.css">
</head>
<body>
<li> Normal list</li>
<a href=http://google.dk><li>’li’ tag inside ‘a’ tag</li></a>
<li><a href=http://google.dk>’a’ tag inside ‘li’ tag</a></li>
</body>
</html>
