CSS-rollover, what's wrong?

[_Paulsen_]

Jeg har et lite problem med min css-rollover; jeg får ikke rolloverren til å "fylle ut" hele feltet, hvis noen skjønner hva jeg mener.. Altså; på "hover" så skal hele linkefeltet på menyen min fylles ut med den gråfargen, ikke slik den er nå.. Har prøvd i øst og vest nå, men finner ikke ut av det.. Håper noen kan hjelpe meg..

Har lagt med følgende utdrag fra css-koden min.. Kan også bruke paoCSS for å få et fullstendig inntrykk av siden jeg tester ut på..

 

div#right {
float: right;
width: 150px;
padding: 0;
margin: 15px 0 0 0;
background: transparent;
}

div#footer {
}

ul.right {
text-align: right;
background-color: #FAFAFA;
list-style-type: none;
margin : 8px 0 0 0;
border-top: 1px dotted #0076A0;
}

ul.right li {
list-style-type: none;
padding: 5px;
margin: 0;
border-bottom: 1px dotted #0076A0;
}
ul.right a{
background: url("button.gif") 0 0 no-repeat;
}

ul.right li a:link, ul.right li a:visited {
color: #82A22F;
padding: 0 0 0 3px;
display: block;
height: 100%;
line-height: 1.5;
text-decoration: none;
background-position: -314px 0;
}

ul.right li a:active, ul.right li a:hover {
color: #CD0A0A;
text-decoration: none;
background-position: -157px 0;
}

Endret 10. september 2004 av OShea22

[PoleCat]

Tingen er, at du har satt ting som padding osv på li-elementet, når du egentlig ønsker at det skal høre til a-elementet.

Ah, dårlig forklart. Bare prøv med den koden du.

 

(regner med at hele blokken skulle være klikkbar?)

ul.right li {
list-style-type: none;
display: inline;
}

ul.right a {
padding: 5px;
margin: 0;
border-bottom: 1px dotted #0076A0;
background: url("button.gif") 0 0 no-repeat;
display: block;
}

ul.right li a:link, ul.right li a:visited {
color: #82A22F;
display: block;
height: 100%;
line-height: 1.5;
text-decoration: none;
background-position: -314px 0;
}

[_Paulsen_]

Skjønte hva du mente, PoleCat, fungerte også! Tusen takk

 

Men hva må jeg gjøre med koden min får å få linjene stiplet, og ikke heltrukket, slik det er nå? Trodde det bare var å sette inn følgende kodesnutt jeg:

border-bottom: 1px dotted, men det fungerer ikke som det skal.. Har lagt den inn i ul.right a. Her er koden min nå:

 

ul.right li {
list-style-type: none;
display: inline;
border-top: 1px solid #0076A0;
}

ul.right a {
padding: 5px;
margin: 0;
border-bottom: 1px dotted #0076A0;
background: url("button.gif") 0 0 no-repeat;
display: block;
text-align: right;
}

ul.right li a:link, ul.right li a:visited {
color: #82A22F;
display: block;
height: 100%;
line-height: 1.5;
text-decoration: none;
background-position: -314px 0;
}

ul.right li a:active, ul.right li a:hover {
color: #CD0A0A;
background-position: -157px 0;
}

[_Paulsen_]

Ingen som har en anelse om hva jeg kan gjøre for å få ordnet problemet mitt? Ikke PoleCat engang?

[PT]

Du kan prøve border-bottom: 1px dashed #FARGE;

 

Hvis jeg fattet problemet ditt rett...

[_Paulsen_]

Du kan prøve border-bottom: 1px dashed #FARGE;

 

Hvis jeg fattet problemet ditt rett...

Men jeg vil jo ha dotted, ikke dashed, hehe... Har jo den koden i ul.right a da... Skjønner liksom ikke hvorfor det blir så kål som det blir..

Endret 14. september 2004 av OShea22

[Haraldson]

Nå er jeg ikke helt sikker på om jeg husker rett, men jeg mener at IE viser både dotted og dashed som dashed.

 

Det er ikke det du sliter med, da?

[PoleCat]

Nå er jeg ikke helt sikker på om jeg husker rett, men jeg mener at IE viser både dotted og dashed som dashed.

Bare 1px dotted, resten er fint. Det er ikke det som er problemet her nei.

[_Paulsen_]

Nei, det er riktig som PoleCat sier her, at det er ikke det som er problemet.. Hvis du ser på linken min litt lenger opp i tråden, vises det i IE en solid strek under "navigasjon", mens i Opera vises ingen ting. I bunnen, under siste link, vises det derimot dotted i begge browserne.

 

Det jeg ikke får til, er at det kun skal være linjen under "navigasjon" som skal være solid, ikke noe annet..

Endret 14. september 2004 av OShea22

[PoleCat]

ul.right li {
list-style-type: none;
display: inline;
}

ul.right a {
padding: 5px;
border-bottom: 1px dotted #0076A0;
background: url("button.gif") 0 0 no-repeat;
display: block;
text-align: right;
}

 

Det var

border-top: 1px solid #0076A0;

på li-elementet som skapte trøbbel etter hva jeg kan forstå.

 

Nå ser det iallefall riktig ut her.

[_Paulsen_]

Det gjør det her også etter at jeg fjernet borderen fra li-elementet! Juhu! Hehe!

 

Takker så meget meget PoleCat! Til stoor hjelp skal du vite!

[PoleCat]

Bare hyggelig.