Hoi Terrabo,
Je hebt 100% gelijk! :thumb:
- En het is altijd wat makkelijk om website-problemen af te schuiven op de bezoeker: ze hebben 'm gewoon niet goed cross-browser getest!
Ik heb zoom.nl in verschillende browsers gestopt, en bij het "Alle categorieën"-uitrolvakje zijn mijn bevindingen (onder WinXP-SP3 op resolutie 1280*1024px):
- Firefox: geen probleem.
- Opera: geen probleem.
- Chrome (versie 23.0.1271.64 m): probleem!
- Safari (versie 5.1.7 - 7534.57.2): probleem!
- Internet Explorer 7: geen probleem (daar had ik het eerder bij verwacht); IE8 en IE9 kan ik momenteel niet testen.
Aan de versie ligt het niet, want Chrome vertelt na een update met de versie van gisteren:
- En Chrome (versie 23.0.1271.91 m): probleem!
Wat is het probleem?
Als je na het openklappen van het uitrolvakje gewoon met de muis naar beneden gaat, klapt het uitrolvakje meteen weer dicht. :shocked:
Alleen als je heel snel verticaal van "Alle categorieën" hovert, blijkt het vakje staan.
- Het blijkt te zitten in het spleetje tussen beide zwarte blokjes.
- Zodra je dat met de muis raakt (ook van beneden naar boven) klapt het venstertje in.
- Alleen als je de muis door een snelle beweging "over de afgrond heen laat springen" kan je aan de overkant komen.
- Maar de bezoeker moet maar weten dat de muis een aanloopje nodig heeft! (en moet over voldoende motoriek beschikken om dat gedaan te krijgen)
- Dat is dus een fout in de site, die 'm niet goed toegankelijk/gebruiksvriendelijk maakt.
Wat is de oorzaak?
Chrome en Safari draaien beide op de
Webkit rendering-machine, en die doet het anders dan de overige browsers die een andere rendering-machine gebruiken.
Bij Chrome en Safari is het spleetje 2px groot, bij de andere browsers 1px. Door Chrome en Safari wordt dus een strookje van 1px extra aangemaakt: dat is de afgrond!
Waarom Chrome en Safari dat doen zal aan de gebruikte css liggen, en daarin zal ook de oplossing gevonden moeten worden.
Nadere inspectie
HTML:
<li id="category_select">
<a class="withchild" href="/fotocategories" title="Alle categorien">Alle categorieën</a>
<ul>
<li><a href="/fotocategorie/architectuur/index.html" title="Architectuur">Architectuur</a></li>
... enz.
</ul>
</li>
Het uitrolvakje is de <ul> die binnen het list-item "Alle categorieën" zit. De uitroller heeft een absolute positie gekregen om 'm onder zijn hoofd-item te zetten. Bij die absolute positie hoort de afstand gerekend vanaf de bovenkant van het hoofd-item.
Die is hier bepaald op:
Code:
.sub_nav ul ul {
...
top: 31x;
}
Dit gaat goed als de hoogte van het hoofd-item "Alle categorieën" ook altijd precies 31px is.
Maar ... van de hoogte van het hoofd-item kan je niet op aan: die heeft te maken met de font-size (c.q. letterhoogte) en de instelling van de regelhoogte. Behalve dat browsers wat anders kunnen omgaan met de letterhoogte en de vrije ruimte erboven en eronder, speelt hier dat al die getallen door de browsers moeten worden afgerond om ze altijd op een hele pixel te laten uitkomen: want op een monitor bestaan geen halve pixels!
- Browsers ronden soms net verschillend af, en dat is ze niet erg kwalijk te nemen.
Die afronding doet hier de das om: bij Chrome en Safari komt na afronding de hoogte van het vakje "Alle categorieën" uit op... 30px, bij alle anderen op 31px. Vandaar dat er met dezelfde top-instelling voor de <ul> bij Chrome en Safari een extra px lege ruimte tussen zit: de afgrond waar de muis in kiepert!
Maar dat betekent ook, dat de hoogte van het vakje "Alle categorieën" varieert met de lettergrootte die de bezoeker instelt...
Nieuwe test!
- Firefox met 1x uitzoomen op kleinere lettergrootte zetten (zonder op totaal uit te zoomen): probleem ook in FF!
- IE7 met Beeld > Tekengrootte... > "Kleiner": probleem ook in IE7!
De oplossing
De snelste manier om het te verhelpen is om de hoogte van het hoofd-item vast te zetten op de harde 31px-maat.
Je kan de verantwoordelijke bij Zoom vertellen dat dit moet gebeuren
:
Code:
.sub_nav ul li {
height: 31px;
}
.sub_nav li li {
height: auto;
}
De laatste regel is ervoor om te vermijden dat de submenu-items ook die hoogte krijgen, en het uitrolvakje veel hoger wordt dan nodig is.
- Kijk, dan wordt het deze: tests/zoom-nw.htm
- Nu kan ook een erg vadsige muis op z'n dooie akkertje over het wit wandelen.
- Dan hebben Chrome en Safari wel 2px "witte tussenruimte", maar daarvan is dan 1px de witte background van het hoofd-item (en wegens het {display:block} van de item-link heeft dat geen invoed: er ontstaat geen spleet), en de andere 1px is eigenlijk helemaal geen tussenruimte, maar een wit bovenrandje van het uitrolvakje.
- Ook bij verkleinde lettergrootte (in alle browsers) gaat het goed: dan komt er meer wit onder het hoofd-item, maar de link blijft even hoog > ook geen ravijn voor de muis.
- Consequentie is dat er bij door de bezoeker ingestelde grotere letterformaten een stukje van de onderkant van het "Alle categorieën"-vakje wordt afgeschaafd, maar dat zie je nauwelijks en daar heeft in elk geval niemand last van.
Met vriendelijke groet,
CSShunter
__________
PS: Het kan ook nog aan de resolutie van de monitor liggen en/of aan het Operating System, dat geeft kans op andere afrondingen, en dan zou het zomaar kunnen dat Chrome en Safari het wel goed doen op de ene resolutie, en niet op de andere, of wel goed op een PC en niet op een tablet, enz.
Als de webbouwer het niet op alle resoluties/OS'sen test, maar alleen op zijn/haar eigen OS en (super)formaat, dan komt dat nooit tevoorschijn.
