CSS-rollover, hva er galt?

[Mira]

Sitter å prøver å få til en CSS-mouseover på noen linker til en russeside.

Kan like godt først som siste poste koden min.

 

html

<div id="menu_left">
 <ul>
    <li><a href="http://home.no.net/jkng" id="Om_Russen"></a></li>
 </ul>

 

CSS

#menu_left {
height: auto;
width: 149px;
float: right;
margin: 0 196px 0 0;
}

div#menu_left ul li {
list-style-type: none;
margin: 0;
padding: 0;
height: 32px;
display: inline;
}

div#menu_left ul li a {
width: 149px;
height: 32px;
display: block;
overflow: hidden;
background-position: left;
}

div#menu_left ul li a:hover {
background-position: right;
overflow: visible;
}

a#Om_Russen {
background: url(images/om_russen.gif) no-repeat;
}

 

Er ikke veldig god på CSS enda men mener da at dette burde fungere.

Problemet er at den vises ulikt i alle browsere, poster skjermbilde av alle tre her.

 

Opera

 

IE

 

FF

 

Som dere ser ligger den på riktig sted i Opera, men i de to andre er den helt på villspor. Men i Opera gjenskjennes ikke bildet som en link.

Er sikkert mye tull med koden.

 

Noen som kan "belære" meg litt?

 

edit: Bildet som skal brukes som BG er slik ut:

Endret 9. september 2004 av Mira

[svamp]

Tror ikke du kan ha display:inline på li samtidig som du har display:block på a.

Prøv å skift ut display:inline med en float.

[Mira]

Tror ikke du kan ha display:inline på li samtidig som du har display:block på a.

Prøv å skift ut display:inline med en float.

Du har nok helt rett i det, fikset det nå, men har fortsatt samme problemet.

[Equerm]

Kansje dette kan hjelpe deg?

 

browser-specific-stylesheets

[Mira]

Kansje dette kan hjelpe deg?

 

browser-specific-stylesheets

Det er klart at det er et godt alternativ, takk btw, men er jo ikke bare posisjonerigen som er forskjellig, i opera er ikke knappen noen link, bare et bilde.

Er vel nesten dette som er det merkeligste.

[Equerm]

Jeg bruker alltid den funksjonen for å fikse slike problemer.

[haugsand]

Kan du legge ut siden et sted?

[Equerm]

Kan du legge ut siden et sted?

Ja, det er alltid mye enklere å hjelpe når man kan se siden og slikt

[Mira]

Joda, går vel fint det

 

LINK

 

Men jeg sier ifra på forhånd, koden er et eneste rot og designet er heller ikke ferdig

Endret 10. september 2004 av Mira

[Mira]

Ikke meningen å bumpe tråden, men er det virkelig ingen som kan svare på hvorfor den posisjoneres forskjelli i alle tre browserene og hvorfor elementer innenfor <ul></ul> ikke registreres som linker i Opera?

 

For å si det veldig "banalt", musa blir ingen hånd over linkene og det går heller ikke ann å trykke

Endret 11. september 2004 av Mira

[PoleCat]

Har det noe med at det ikke er innhold i a-elementet?

<li><a href="http://home.no.net/jkng" id="Om_Russen"></a></li>

blir til

<li><a href="http://home.no.net/jkng" id="Om_Russen">Om russen</a></li>

 

 

(Det SKAL forøvrig se ut som den siste snutten der uansett.)

[Mira]

Skal prøve det når jeg kommer hjem, men det er altså påkrevd å ha med text/ <span> der?

Endret 11. september 2004 av Mira

[PoleCat]

Skal prøve det når jeg kommer hjem, men det er altså påkrevd å ha med text/ <span> der?

Du vil vel at "alle" skal kunne se lenkene dine, vil du ikke? Har blitt forbauset over dette hos norskwebforum.no også, at det brukes tomme a-elementer.

 

Vi ønsker å style lenken, ikke "fjerne" den.

[Inge_P]

Vet ikke om det har noe å si, men jeg bruker alltid class='om_russen' istedet for id='om_russen'

 

[Eirik_R]

du må vel ha noko innanfor <a href..... og </a> som ein skal trykke på

 

kan forresten fortelle at i min opera er det om russen bildet (trur det er det, vanskeleg å sjå) komt ut på høgresida, berre såvidt innpå skjermen

[Jesper Karsrud]

du må vel ha noko innanfor <a href..... og </a> som ein skal trykke på

 

Nei, ikke hvis det er grafiske knapper du bruker.. Men for ikke-grafiske nettlesere får du da ingen meny. Og det er jo ikke så veldig lurt.. Derfor bør man lage en klasse i CSS som går for <span> taggen som skjuler det du legger mellom <a href=".."> og </a>. Jeg bruker denne:

 

span.hide {
display: none;
}

 

da blir HTML'en seende slik ut:

<li><a href="http://home.no.net/jkng" id="Om_Russen"><span class="hide">Om russen</span></a></li>

 

Dermed vil grafiske nettlesere ikke vise dette, men ikke-grafiske vil vise det. Det er i hvertfall måten jeg gjør det på.

[Cucum(r)]

Eventuellt bruker man text-indent: -9999px og/eller font-size: 1px på a.

 

Mindre markup, samme resultat.

[Arve Systad]

Eventuellt bruker man text-indent: -9999px og/eller font-size: 1px på a.

 

Mindre markup, samme resultat.

eventuellt

 

Overflow:hidden;

padding: nPX 0 0 0;

height /**/: nPX;

height: nPX!important;

 

[Mira]

Er et eller annet rart her, koden er så akkurat slik den skal (tror jeg).

Den ser nå slik ut:

<ul>
    <li><a href="http://home.no.net/jkng" id="Om_Russen"><span id="hidden">Russen</span></a></li>
 </ul>

 

CSS

#hidden {
display: none;
}

 

Ellers er ingenting forandret, allikvel vises det ikke som link i Opera, noen som kan teste om det funker, mulig feilen ligger i liseren min (usansynelig)

[Mira]

Er løst nå, endte opp med at jeg kodet hele siden på nytt og nå fungerer det fint. Takk til alle som har hjulpet til.