[CSS] Menu hover op anchor width probleem (IE)

[We Are Borg]

http://www.planet.nl/~terps407/voorbeeld.html

Heb even een voorbeeldje in elkaar gedraaid met gestripte (css)code.

Cascading Stylesheet:

#top #mainmenu {
                width: 544px;
                height: 25px;
            }

            #top #mainmenu li {
                float: left;
                list-style: none;
                white-space: nowrap;
            }

            #top #mainmenu li a {
                height: 18px;
                display: block;
                padding: 6px 10px 0 6px;
                text-decoration: none;
            }

            #top #mainmenu li a:hover {
                background-color: #e7e5e5;
            }

            #top #mainmenu li ul {
                visibility: hidden;
                position: absolute;
                top: 36px;
            }

            #top #mainmenu li ul li {
                line-height: 15px;
                display: block;
                float: none;
                background-color: #fff;
                border: 1px solid red;
                width: auto;
            }

            #top #mainmenu li ul li a {
                width: 100%;
                height: 100%;
                padding-bottom: 3px;
                background: none;
            }

            #top #mainmenu li ul li>a {
                width: auto;
            }

            #top #mainmenu li>ul {
                width: auto; 
            }

            /* IE FIX even met underscore hack, normaal met cond. comments */
            #top #mainmenu li {
                _width: 1%;
            }

Het menu werkt prima in FF/Opera, maar de werking in IE6/7 klopt helaas nog niet helemaal. Plaatje is eenvoudiger dan een lange uitleg :


Boven, FF, goed. Onder, IE, fout

De anchor is niet de complete breedte van de li waardoor de hover slechts op een klein gedeelte wordt toegepast.

Poging om het te fixen:

- #top #mainmenu li ul li a width en height auto naar aanleiding van een topic gevonden mbv de search. De background color wordt dan wel helemaal doorgetrokken tot de lengte van de li, maar de link blijft alleen nog maar achter de tekst zitten. Kortom, het klikbare gedeelte van de a rekt niet mee.
- #top #mainmenu li ul li a display block toevoegen, geen succes.
- #top #mainmenu li ul li a vaste breedte opgeven. Werkt op zich wel, maar de menu items zijn variabel qua lengte en een vaste width opgeven is dus gewoon geen optie aangezien die constant veranderd zou moeten worden.

Nu weet ik gewoon dat dit te maken moet zijn in IE, maar de oplossingen die ik zelf heb bedacht mbt vaste hoogte/breedte opgeven werkt niet. Kan iemand mij in de juiste richting duwen ?

[Rowanov]

Echt een puur css oplossing kan ik niet zo snel op komen; wat je misschien wel kan doen is Whatever:hover gebruiken om de list-item achtergrond aan te passen, ipv de anchor achtergrond. Een :hover op list-item dus

[ Voor 6% gewijzigd door Rowanov op 31-07-2006 14:00 ]

[We Are Borg]

Bedankt voor het meedenken Op zich kan ik wel heel de achtergrond kleur veranderen dmv de width op auto te zetten, maar de anchor blijft hetzelfde (rekt niet mee), waardoor dus alleen de tekst klikbaar is en niet de complete li balk. Met de .htc oplossing kun je exact hetzelfde bereiken qua achtergrond kleur, maar het link probleem blijft bestaan. Ben dus echt op zoek naar een oplossing om die anchor mee te laten rekken, zodat ik zowel de achtergrond kleur gefixed heb ende complete balk klikbaar maak

[Verwijderd]

Het lijkt alsof de a geen display block heeft.
Tenminst zo rendert IE het.

Je kan dit volgensmij oplossen door #top #mainmenu li ul li hasLayout te geven.
Bijvoorbeeld met de invalid zoom:1; of met de holly-hack.

[ Voor 4% gewijzigd door Verwijderd op 31-07-2006 23:59 ]

[Tigris]

Probeer dit eens:

#top ul li a {
display: block;
width: 100%;
}

[Rowanov]

Tigris schreef op dinsdag 01 augustus 2006 @ 00:09:
Probeer dit eens:

#top ul li a {
display: block;
width: 100%;
}

Indirect heeft hij dat nu ook al staan, los van het feit dat die eigenschappen verspreid staan over verschillende toekenningen.

[We Are Borg]

dexus en Tigris: beide voorstellen zorgen er dat li gewoon kleiner wordt

dexus: daar dacht ik dus ook aan. Al zet ik dus wel display block op de a, toch heb ik het gevoel dat IE het niet correct rendert als een block. Want als ik optie #1 pak uit mijn TS, wordt de achtegrondkleur wel doorgetrokken (wat ik persoonlijk zou verwachten bij display block icm width auto), maar de link zelf weer niet. Dat laatste kan ik dus niet verklaren (logisch, anders was dit topic er niet )

[Verwijderd]

Kan je niet een of andere "ranzige" IE-only constructie maken?

code:

<style type="text/css">
<!--
#standaard {
  width: 300px;
  background-color: red;
  ....
}
//-->
</style>
<!--[if ie]>
    <link rel="stylesheet" type="text/css" href="site_ie.css" />
<![endif]-->

en dan in site_ie.css:

code:

#standaard {
  width: 330px;
}

Hiermee kan je zorgen dat binnen IE enkel bepaalde waardes overschreven worden, zo kan je altijd ranzige IE functies voor de gek houden en/of andere CSS toekennen via de IF-IE hack.

En let op de comments die ik heb toegevoegd binnen de style. Dit zorgt er voor dat een [norml]<style>[/] block zich niet zal presenteren als "tekst", zodra de browser het [norml]<style>[/] block niet snapt (non css supporting browsers). De browser snapt de commenting in dat geval wel, dus dan blijft je tekst onzichtbaar. Dit is de reden dat ik altijd externe CSS files gebruik.

[We Are Borg]

Die 'ranzige' IE only gebruik ik al om een aantal IE dingen op te lossen (width: 1% om HasLayout te forceren op een aantal elementen). In mijn TS voorbeeld gebruik ik even een underscore zodat ik geen apart stylesheet hoef te maken, maar had ook de conditional comments kunnen overnemen. Dat het een oplossing wordt wat waarschijnlijk IE only wordt en dus in het aparte stylesheet terecht komt vind ik uiteraard prima

Wordt er echt helemaal gek van. Heb nu op het online voorbeeld ( http://www.planet.nl/~terps407/voorbeeld.html ) het hover effect werkend in IE, maar nog steeds blijft alleen de tekst klikbaar en niet de hele balk. Hoe kan de achtergrondkleur van de anchor wel doorlopen, maar de link niet Echt totaal onlogisch, voor mij dan

[ Voor 31% gewijzigd door We Are Borg op 01-08-2006 19:22 ]

[We Are Borg]

Opgelost

Vraag me niet waarom, maar het volgende blijkt te helpen:

code:

#top #mainmenu li ul li a {
    width: auto;
    height: auto;
    padding-bottom: 3px;
    background: none;
    position: relative;
}

En dan gaat het dus om de position relative toevoegen. Vraag me niet om het te verklaren, wellicht dat iemand anders dat kan. FF doet er niks mee, dus dat scheelt

[Rowanov]

Het kan met hasLayout te maken hebben, maar ik kan het zo 1,2,3 niet terugvinden. Er staat me wel iets bij, dat positioning geen hasLayout triggert. Is er iemand die voor bovenstaande oplossing een verklaring heeft?

[We Are Borg]

http://www.satzansatz.de/cssd/onhavinglayout.html#prop

Alleen position absolute zou HasLayout triggeren, maar relative doet het dus blijkbaar ook