CSS-strul med meny

8 svar · 663 visningar · startad av aasah 19 feb. 2006

aasahMedlem sedan mars 20034 471 inlägg

19 feb. 2006 20:59#1

Jag har först för några veckor sedan kunnat betrakta min hemsida med något annat än med IE. Tyvärr ser jag då att min rullgardinsmeny inte ser riktigt klok ut i Firefox! :( Tyvärr tar bakgrundsfärgen på menyn slut innan menyalternativet gör det, se nedanstående bilder. I IE ser det ut som jag vill.

Relevanta delar ur CSS-filen:

a:link.submenu {     /*link - länk som ännu inte har besökts*/
  color: #3366CC;
  text-decoration:none;
}

a:visited.submenu {  /*visited - länk som har besökts*/
  color: #3366CC;  
  text-decoration:none;
}

a:hover.submenu {    /*hover - mouseover*/
  color: #DC143C;
  text-decoration:none;
}

a:active.submenu {   /*active - vid klick*/
  color: #DC143C;
  text-decoration:none;
}

#nav, #nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
}

.sub {
 background-color: #FFCC00;
 color: #336699;
}

#nav a {
        display: block;
        width: 6em;
}

#nav li {
        float: left;
        width: 6em;
}

#nav li ul {
        position: absolute;
        width: 6em;
        left: -999em;
}

#nav li:hover ul {
        left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
        left: auto;
}

Hur löser man problemet?

IE använder inte ovanstående CSS, utan en JS-funktion i stället.

Relevant bit från källan, efter CSS-delens slut:

<script type="text/javascript">
sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script></head>
        <body>....<ul id="nav" class="medium">
        <li><a class="menu " href="index.php">Point me!</a>
                <ul class="sub">
                        <li><a class="submenu" href="index.php">&nbsp;Home&nbsp;</a></li>
                </ul>
        </li>
        ....
        <li><a class="menu" href="links.php">Links</a>
                  <ul class="sub">
                        <li><a class="submenu" href="links.php">&nbsp;Links&nbsp;</a></li>
                        <li><a class="submenu" href="acknowl.php">&nbsp;Acknowledgements&nbsp;</a></li>
                  </ul>
        </li>
</ul>

Förresten hur kan Firefox veta att den ska strunta i JS-funktionen? Är det det som strular till det? :q

Första bilden visar IEs variant (rätt), andra Firefox' ...

Peter SMedlem sedan dec. 20025 483 inlägg

20 feb. 2006 18:37#2

aasah skrev:

Förresten hur kan Firefox veta att den ska strunta i JS-funktionen?

Svaret ligger i

if (window.attachEvent) window.attachEvent("onload", sfHover);

FF använder window.addEventListener (addEventListener ingår i DOM-specifikationen).

aasahMedlem sedan mars 20034 471 inlägg

20 feb. 2006 23:50#3

Peter S skrev:

Svaret ligger i
if (window.attachEvent) window.attachEvent("onload", sfHover);
FF använder window.addEventListener (addEventListener ingår i DOM-specifikationen).

Aha! OK... Det förklarar den saken. Tack! :)

Men finns det inget sätt att få Firefox att färga hela bakgrunden? Annars funkar ju undermenyn mindre bra... :( Hur gör ni andra?

aasahMedlem sedan mars 20034 471 inlägg

14 maj 2006 18:36#4

aasah skrev:

Men finns det inget sätt att få Firefox att färga hela bakgrunden? Annars funkar ju undermenyn mindre bra... :( Hur gör ni andra?

Ingen som kan ge något tips?

Jag kanske får tänka om hur menyn är uppbyggd? Någon idé?

tantenMedlem sedan nov. 20051 596 inlägg

14 maj 2006 19:07#5

Är det inte bara så att ordet Acknowledgements är för långt för att få plats på 6em?

aasahMedlem sedan mars 20034 471 inlägg

14 maj 2006 19:21#6

Jo, men hur löser jag problemet? Jag vill ju att den färgade bakgrunden ska vara lika bred som det längsta undermenyalternativet (helst per huvudalternativ)! Men hur? Det kanske inte går med CSS? Eller behöver jag en klass per menyalternativ där bredden hårdkodas olika? Finns det inget smidigare sätt?

Hur skulle du göra?

tantenMedlem sedan nov. 20051 596 inlägg

14 maj 2006 19:49#7

Får du inte plats med att öka på bredden till 8-9 em i stället?
Jag vet inte hur jag skulle göra eftersom jag inte vet hur sidan ser ut för övrigt.
Sitter och kämpar med en meny för tillfället. Skickar en länk privat till dig så kan du se hur den är gjord. Den kommer tas bort från sin adress i kväll så jag lägger inte ut den här.

aasahMedlem sedan mars 20034 471 inlägg

14 maj 2006 19:54#8

tanten skrev:

... Skickar en länk privat till dig så kan du se hur den är gjord. Den kommer tas bort från sin adress i kväll så jag lägger inte ut den här.

Ja tack! :)

aasahMedlem sedan mars 20034 471 inlägg

14 maj 2006 20:15#9

tanten skrev:

Får du inte plats med att öka på bredden till 8-9 em i stället? ...

Vid 8em hamnar menyn på två rader när man inte kör i fullskärm, något som jag själv aldrig gör frivilligt. Och inte ens vid 9em räcker bakgrunden för Acknowledgements fullt ut. Jag blir kanske tvungen att dra ner stilen i menyn, det borde väl kunna hjälpa...

Men jag vill gärna se hur du gör. :)