Problemer med css hover meny i Firefox

[Kenny Bones]

Hei!

 

Jeg sitter og jobber med en meny i CSS som jeg gjerne vil få til ordentlig.

Denne menyen har tre image states, én vanlig, én hover og én klikk.

Koden er hentet fra denne siden. Med et fungerende eksempel her.

 

Alt fungerer helt fint i IE6 som jeg kan se. Men i Firefox dukker det opp små prikkete linjer rundt/ved siden av knappene. Sånn er det ikke i IE. Og når jeg trykker på en av knappene i Firefox så blinker det litt (bildet som vises klikk-state) og bildet går tilbake til normal state. Noe det ikke skal gjøre. Om jeg derimot holder ned knappen så ser det bra ut. Men et av hovedpoengene med menyen er at den lissom skal vise hvor jeg er hen på siden ved at den tabben/knappen jeg har trykket på skal holde seg nede.

 

Koden ser hovedsaklig sånn ut:

 

HTML

<div id="container">
 <ul id="nav">
 	<li id="thome"><a href="#">Home</a>
 	<li id="tguides"><a href="#" class="selected">Guides</a>
 	<li id="tmag"><a href="#">Magazine</a>
 	<li id="tarchives"><a href="#">Archives</a>
 </ul>

</div>

 

CSS

#container {
position: relative;
width: 500px;
height: 30px;
padding: 0;
margin: 3px 0 20px 0;
background: #7FA0B1;	
}

#nav {
position: absolute;
top: 10px;
left: 10px;
list-style: none;
margin: 0;
padding: 0;
height: 20px;
display: inline;
overflow: hidden;
width: 201px;
}

#nav li {
margin: 0; 
padding: 0;
display: inline;
list-style-type: none;
}

#nav a {
float: left;
padding: 20px 0 0 0;
overflow: hidden;
height: 0px !important; 
height /**/:20px; /* for IE5/Win */
}

#nav a:hover {
background-position: 0 -20px;
}

#nav a:active, #nav a.selected {
background-position: 0 -40px;
}

#thome a  {
width: 40px;
background: url(http://images.fastcompany.com/nav/tabs/home.gif) top left no-repeat;
}

#tguides a  {
width: 45px;
background: url(http://images.fastcompany.com/nav/tabs/guides.gif) top left no-repeat;
}

#tmag a  {
width: 62px;
background: url(http://images.fastcompany.com/nav/tabs/magazine.gif) top left no-repeat;
}

#tarchives a  {
width: 54px;
background: url(http://images.fastcompany.com/nav/tabs/archives.gif) top left no-repeat;
}

</style>

 

Edit: Fikk fjernet prikkene rundt knappene ved å legge til en

 

overflow: hidden;

 

under #nav li

Endret 20. september 2007 av Kenny Bones

[yinyou]

Vet om jeg forsto det helt riktig men du kan uansett bruke a:active til å style linken som er aktiv, den linken du er innpå lissom.

[834HF42F242]

Hmm, er det noe jeg ikke har fått med meg. a:active? Sitter jeg og programmerer inn ID-er på seksjoner for å markere i menyen, helt unødvendig?

[Jesper Karsrud]

Nei. :active-staten gjelder kun idet du klikker på linken, ikke når du er inne på siden. CSS har ingen som helst måte å sjekke mot server hvilken url du er inne på.

 

Kan jo gjøres i JavaScript da såklart, med location.href-funksjonen eller noe slikt. Husker ikke heeeelt hvordan det gjøres, men noe sånt noe er det i hvertfall

 

Edit: For å svare på spørsmålet ditt om de fine linjene som kommer når du trykker, kan du løse dette ved å slenge på outline: none; på a. For å markert hvilken side du er på, må du nok ty til noe annet enn :active, gitt.

Endret 20. september 2007 av Jesper Karsrud

[Kenny Bones]

Men hva er det med :active som gjør at Firefox krøller da? Merkelig at dette skal fungere utmerket i IE. Har noen prøvd å sammenligne hos dere? IE mot Firefox?

 

http://www.simplebits.com/bits/tab_rollovers.html#

 

Har en kollega som har lagd sånne menyer flere ganger og han mente at han aldri hadde hatt problemer med dette. Må være noe jeg kan sette for å fikse dette. Men vet lissom ikke hva jeg skal søke på i google for å få treff på noe sånt.

[yinyou]

Nei. :active-staten gjelder kun idet du klikker på linken, ikke når du er inne på siden. CSS har ingen som helst måte å sjekke mot server hvilken url du er inne på.

Oisann, sorry viste ikke det.

Da lærte jeg noe nytt

Endret 20. september 2007 av yinyou

[Jesper Karsrud]

Har en kollega som har lagd sånne menyer flere ganger og han mente at han aldri hadde hatt problemer med dette. Må være noe jeg kan sette for å fikse dette. Men vet lissom ikke hva jeg skal søke på i google for å få treff på noe sånt.

9537596[/snapback]

Da har han nok ikke brukt :active-staten i CSS, men kanskje gitt dem en klasse som het active eller noe slikt noe. Dette kan enten gjøres via JavaScript, eller ved hjelp av PHP/annet serverside-språk.

 

Et JavaScript kan f.eks. se slik ut:

 

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
 window.onload = func;
} else {
 window.onload = function() {
 	oldonload();
 	func();
 }
}
}

function highlightPage () {
if (!document.getElementsbyTagName || document.getElementById) return false;
if (!document.getElementById("nav")) return false;
var nav = document.getElementById("nav");
var links = nav.getElementsByTagName("a");
for (var i=0; i < links.length; i++) {
 var linkurl = links[i].getAttribute("href");
 var currenturl = window.location.href;
 if (currenturl.indexOf(linkurl) != -1) {
 	links[i].className = "active";
 }
}
}
addLoadEvent(highlightPage);

Ble litt større enn jeg hadde tenkt, men hey, da funker ting i hvertfall fint

 

Edit: Har ikke testet koden, så det kan fint være at den ikke funker helt, men men...

Endret 20. september 2007 av Jesper Karsrud

[Kenny Bones]

Mmm, sikkert det som gjør det. Kollegaen min her lager sider i php. Men da får jeg bare leve med det da! Er ikke jeg som skal programmere siden, for det skal legges inn i en allerede løsning basert på asp. Så da får de slite med det istedet!

[834HF42F242]

Han bruker helt sikkert PHP til å identifisere kategorier og bruker variabler for å gi forskjellige klasser til linkene....

Endret 21. september 2007 av neitakk