Hoi Flame,
indeling omgegooid naar een list
Ja, lijstjes werken erg handig met css!
De samenwerking van IE7 met jQuery is idd niet optimaal: na een hover over een item komt de default-border niet meer terug, en schuiven de items een stukje op, met soms een regel-drop tot gevolg. Zie
screenshot. En bij een daarop volgende hover (als het hover-randje er weer wel komt) springt alles heen en weer.
Het blijkt te verhelpen door in de jQuery-settings expliciet de terugkeer naar de oude border (vanaf hover en vanaf de vergroting) te vermelden:
[JS]$(".logo").on("mouseout", function() {
$(this).css({
"cursor" : "",
"background-color" : "",
"border" : "1px solid #999999"
});
});
function makeSmaller(selector) {
selector.css({
...
"border" : "1px solid #999999",
...
});
...[/JS]
=======
IE7 staat ook op gespannen voet met de css voor het annuleer-kruisje in de vergroting. Daarvan wordt maar de helft getoond.
Of dit ook in IE8 en/of IE9 speelt kan ik niet checken.
Uit medelijden met in ieder geval de arme IE7-surfers
kan dit hersteld worden door wat css-aanpassingen. Van de
.logoclose {...} kunnen de width, height en de line-height verwijderd worden (met maten in relatie tot de font-size heeft IE altijd geworsteld).
De positie van het kruisje kan vervolgens via de margins ingesteld worden:
Code:
.logoclose {
...
margin: -7px 3px 0 0;
}
De andere browsers (Firefox, Chrome, Opera en Safari) hebben hier geen bezwaar tegen.
=======
IE7 heeft ook het onderste randje van de input-vakjes verdonkeremaand.
Hier is de oplossing om de border niet aan de
.logo form {...} op te hangen, maar aan de
.logo form div input {...}.
En ook hier hebben de andere browsers geen last van, dus er hoeven geen Conditional Comments aan te pas het komen.
=======
Tenslotte heeft IE de onhebbelijkheid om de alt="..." bij een image altijd als tooltip te tonen. Bij (in ieder geval) IE7 komt ook het verschijnsel dat IE niet goed met de stapeling van de z-indexen overweg kan, en bij een hover over een input-veld vrolijk de alt toont van het image dat daar onder zit: altijd 7 volgnummers verder, en goed om de bezoekers in prettige verwarring te jagen!
Hier zou m'n suggestie zijn: aan alle images een lege
title="" toevoegen, waardoor het tonen van de alt-tooltip bij IE verhinderd wordt.
=======
Testpagina met de IE-aanpassingen:
bliksekaters.nl/tests/qz-nw.htm
Zo! Als Microsoft boekenbonnen ging uitdelen voor alle workarounds om hun IE-bugs te pareren, zouden ze tragisch failliet zijn. :d
Met vriendelijke groet,
CSShunter
)
- Ja, ik had eens 
