[CSS en Safari] li:hover werkt niet! - Softwareontwikkeling

dinsdag 19 augustus 2008 11:02

Acties:

Topicstarter

Ik heb de volgende XHTML

HTML:

 <ul id="dropdown_2" class="dropdown">
   <li id='menu_2_2' onclick="initvalue(this,'bedrijfsvorm');">Besloten Vennootschap</li>
   <li id='menu_2_1' onclick="initvalue(this,'bedrijfsvorm');">Eenmanszaak</li>
   <li id='menu_2_3' onclick="initvalue(this,'bedrijfsvorm');">Naamloos Vennootschap</li>
 </ul>

En deze CSS:

Cascading Stylesheet:

ul.dropdown {position: absolute; width: 182px; height: auto; max-height: 101px; margin: 0; padding: 0; overflow: auto; overflow-x: hidden; background: white; border: 1px solid #d4d0c8; z-index: 95; display: none;}
ul.dropdown li {line-height: 15px; color: black; width: auto; border-top: 1px dotted #e5e5e5; white-space: nowrap; height: 16px; padding-left: 4px; list-style: none; cursor: pointer;}
ul.dropdown li:first-child {border-top: none;}
ul.dropdown li:hover {background: #f47f20 !important; color: white;}
ul.dropdown li:hover:first-letter {font-weight: bold;}
ul.dropdown li.active {background: #f4ac71; color: white;}
ul.dropdown li.active:first-letter {font-weight: bold;}

Dit werkt prima in IE6, IE7, Firefox op PC & Mac en Opera. Maar niet in Safari 3.1 op MaxOS X.
De li:hover werkt niet in Safari, in anders browsers krijgt de li netjes een andere achtergrond kleur, maar in Safari niet.
Wel vreemd is dat wanneer een li de class active heeft de hover dan opeens wel werkt, Safari moet het dus wel kunnen.

Heb al via Google gezocht en daarin staat soms een oplossing om de UL of LI expliciet als display: block; te declareren maar dat werkt ook niet helaas.

Wat doe ik dus fout...?

dinsdag 19 augustus 2008 11:07

Acties:

Bozozo

Your ad here?

Werkt het wel als je een barebone case maakt?

dwz een documentje met alleen een doctype, een ul met een li element en de CSS regel
li:hover { background-color: pink; }

TabCinema : NiftySplit

dinsdag 19 augustus 2008 11:31

Acties:

Urk

Topicstarter

Bedankt, zojuist direct even getest, een vrijwel kale XHTML met de bovenstaande XHTML en bovestaande CSS (zonder display: none; dan uiteraard)
Code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
 <title>Test</title>
 <style type="text/css">
ul.dropdown {position: absolute; width: 182px; height: auto; max-height: 101px; margin: 0; padding: 0; overflow: auto; overflow-x: hidden; background: white; border: 1px solid #d4d0c8; z-index: 95;} 
ul.dropdown li {line-height: 15px; color: black; width: auto; border-top: 1px dotted #e5e5e5; white-space: nowrap; height: 16px; padding-left: 4px; list-style: none; cursor: pointer;} 
ul.dropdown li:first-child {border-top: none;} 
ul.dropdown li:hover {background: #f47f20 !important; color: white;} 
ul.dropdown li:hover:first-letter {font-weight: bold;} 
ul.dropdown li.active {background: #f4ac71; color: white;} 
ul.dropdown li.active:first-letter {font-weight: bold;}
 </style>
</head>
<body>
<ul id="dropdown_2" class="dropdown"> 
   <li id='menu_2_2' onclick="initvalue(this,'bedrijfsvorm');">Besloten Vennootschap</li> 
   <li id='menu_2_1' onclick="initvalue(this,'bedrijfsvorm');">Eenmanszaak</li> 
   <li id='menu_2_3' onclick="initvalue(this,'bedrijfsvorm');">Naamloos Vennootschap</li> 
 </ul>
</body>
</html>

Helaas, werkt ook niet in Safari op MacOS X!

Dezelfde kale pagina werkt wel gewoon goed in IE7 en Firefox 3.x.

Bozozo schreef op dinsdag 19 augustus 2008 @ 11:07:
Werkt het wel als je een barebone case maakt?

dwz een documentje met alleen een doctype, een ul met een li element en de CSS regel
li:hover { background-color: pink; }

dinsdag 19 augustus 2008 12:22

Acties:

Bosmonster

*zucht*

Wel knap dat bij jou li:hover wel werkt in IE6 trouwens

Haal die :hover:first-letter weg trouwens en het werkt in Safari. Zal die wel niet goed ondersteunen (Je bent ook wel erg 'vernieuwend' bezig

)

[ Voor 61% gewijzigd door Bosmonster op 19-08-2008 12:28 ]

dinsdag 19 augustus 2008 14:01

Acties:

Bozozo

Your ad here?

Ik bedoelde uiteraard dat je ook de overige CSS moet verwijderen, om dan stap voor stap dingen toe te voegen tot je het probleem hebt gevonden.

Debuggen heet dat

TabCinema : NiftySplit

dinsdag 19 augustus 2008 17:01

Acties:

Urk

Topicstarter

Het werkt trouwens echt in IE6 op een Windows 2000 machine!

Maar dat komt door het gebruik van IE7 van Dean Edwards.

Jouw oplossing werkt inderdaad voor Safari maar betekent dus dat het een bug is in Safari... het zou namelijk wel gewoon moeten werken :first-letter wordt nl. normaliter door Safari gewoon goed ondersteund.

Bosmonster schreef op dinsdag 19 augustus 2008 @ 12:22:
Wel knap dat bij jou li:hover wel werkt in IE6 trouwens

Haal die :hover:first-letter weg trouwens en het werkt in Safari. Zal die wel niet goed ondersteunen (Je bent ook wel erg 'vernieuwend' bezig )

dinsdag 19 augustus 2008 17:07

Acties:

WeeJeWel

HTML:

1	<li id='menu_2_2'><a href="javascript:initvalue(this,'bedrijfsvorm');"Besloten Vennootschap</a></li>

Homey — Critics are those without skills to create.

dinsdag 19 augustus 2008 17:17

Acties:

Urk

Topicstarter

What's wrong? Die typefout zit er bij mij niet in hoor... (ook niet in de bovenstaande voorbeelden, en die zijn niet gewijzigd).

WeeJeWel schreef op dinsdag 19 augustus 2008 @ 17:07:
HTML:
1
   <li id='menu_2_2'><a href="javascript:initvalue(this,'bedrijfsvorm');"Besloten Vennootschap</a></li>

dinsdag 19 augustus 2008 17:17

Acties:

WeeJeWel

Die typefout was van mij. Ik vraag me alleen af hoe je het uberhaupt in je hoofd haalt een ander element dan een Anchor te gebruiken voor een hover state. Zolang IE6 nog wordt gebruikt, niet doen.

Homey — Critics are those without skills to create.

dinsdag 19 augustus 2008 17:40

Acties:

Urk

Topicstarter

Aha, ik had eerst een versie met een anchor in gebruik maar ben daar vanaf gestapt, teveel code en het is in dit geval niet toepasselijk om te zien waar de link naartoe gaat. Uiteraard zijn daar wel weer methodes voor, maar toch!

En bovendien werkt het perfect in IE6 m.b.v. Dean Edwards IE7 zoals je hierboven kunt lezen, dan gedraagd IE6 zich vrijwel als IE7... Geen probleem dus.

WeeJeWel schreef op dinsdag 19 augustus 2008 @ 17:17:
Die typefout was van mij. Ik vraag me alleen af hoe je het uberhaupt in je hoofd haalt een ander element dan een Anchor te gebruiken voor een hover state. Zolang IE6 nog wordt gebruikt, niet doen.

dinsdag 19 augustus 2008 17:58

Acties:

crisp

Devver

Pixelated

WeeJeWel schreef op dinsdag 19 augustus 2008 @ 17:17:
Die typefout was van mij. Ik vraag me alleen af hoe je het uberhaupt in je hoofd haalt een ander element dan een Anchor te gebruiken voor een hover state. Zolang IE6 nog wordt gebruikt, niet doen.

En een anchor misbruiken voor iets dat geen link is is wel goed?

Als de hoverstate puur stylistisch is (wat het ook hoort te zijn, behaviour hoort in script - niet in CSS) zou ik eerder zeggen: pech voor IE6. Het grootste nadeel van oplossingen als Dean's IE7 is dat het op complexe pagina's ontzettend vertragend is.

[ Voor 25% gewijzigd door crisp op 19-08-2008 17:59 ]

Intentionally left blank

dinsdag 19 augustus 2008 20:07

Acties:

WeeJeWel

crisp schreef op dinsdag 19 augustus 2008 @ 17:58:
[...]

En een anchor misbruiken voor iets dat geen link is is wel goed?

Als de hoverstate puur stylistisch is (wat het ook hoort te zijn, behaviour hoort in script - niet in CSS) zou ik eerder zeggen: pech voor IE6. Het grootste nadeel van oplossingen als Dean's IE7 is dat het op complexe pagina's ontzettend vertragend is.

Wel als er zoiezo wat gebeurt, zie onclick. Een link klik je op, dus wat is het probleem?

Homey — Critics are those without skills to create.

dinsdag 19 augustus 2008 23:06

Acties:

crisp

Devver

Pixelated

WeeJeWel schreef op dinsdag 19 augustus 2008 @ 20:07:
[...]

Wel als er zoiezo wat gebeurt, zie onclick. Een link klik je op, dus wat is het probleem?

Een link is voor navigatie. Daar kan je prima een onclick op zetten, maar zorg dan wel dat de href naar een non-js alternatief verwijst. javascript in de href is echt not-done...

Intentionally left blank