't Is ook altijd dezelfde!
IE7 en IE8 vertikken het om de lijn te laten zien, IE9 toont 'm wel (zegt Netrenderer).
Je hebt staan:
Code:
#container {
...
background: url(images/vissersp-menu-bg.png) repeat-y;
background: url(images/vissersp-body-bg.png)repeat-y;
}
Het eerste background-img is het oude, met alleen de menu-kolom; de tweede is de nieuwe met het lijntje erbij.
Normaal gesproken overmeestert een latere stijlregel de eerdere, dus zou de afbeelding met het lijntje getoond moeten worden (en kan de eerste weggelaten worden).
Maar ... er zit een tikfoutje in de tweede: tussen het laatste haakje
) en
repeat-y zit geen spatie. Attentie: zie conclusie!
Nu komt de fout-afhandeling van de browsers om de hoek kijken (en daar zijn geen vaste regels voor!):
- Firefox, Chrome, Opera, Safari en IE9 zijn zo vriendelijk de tikfout in de tweede regel door de vingers te zien, en ondanks de vergeten spatie toch de tweede te tonen, met overrulen van de eerste regel.
- IE7 en IE8 echter beginnen met de eerste (zonder lijntje) te tonen, komen dan de spatieloze regel tegen, signaleren dat daar een css-fout in zit, en verklaren kennelijk de hele stijlregel ongeldig. Dan blijft de eerste regel gelden, en wordt dus wel het grijs onderaan de menukolom getoond, maar geen lijntje!
- Je kan dit controleren door de tweede (zonder spatie) te laten staan, en de eerste regel weg te halen uit de css: mijn voorspelling is dat dan IE7 en IE8 helemaal geen grijs meer tonen, ook niet onder het menu.
Zo is 't gekomen.
Nu heb je wellicht de css-validator willen raadplegen om css-tikfoutjes op te sporen, maar de css-validator geeft hier geen gehoor. Die zegt
Stylesheet-bestand niet gevonden. Maar het is er wel, en wordt duidelijk ook toegepast! :shocked:
Hoe zit dat nu weer? Want de html-validator van w3c geeft
volledig groen licht.
Maar als je de html-validator
HTML-Tidy in Firefox hebt gestopt (deze add-on is
hier in België te bekomen), dan zie je bij het bekijken van de FF-broncode een waarschuwing bij de regel waarin het stylesheet wordt aangeroepen:
regel 8: <link href="stylesheet snoekvissers.css" rel="stylesheet" type="text/css">
Waarschuwing:
escaping malformed URI reference
Een "malformed URI reference" is een "verkeerde notitie voor een URI (= URL) verwijzing", en aan de rechterkant van het waarschuwingsvenster staat een sympathiek aantal voorbeelden van wat er fout kan zijn gegaan.
- Hier is de spatie tussen stylesheet en snoekvissers.css de boosdoener.
- In html-verwijzingen naar een bestand of map op een server mogen namelijk géén spaties staan. Als een bestand (of map) naar de server is geüpload met spatie, moet in de verwijzing het %20 teken staan ipv de spatie.
- Het moet hier dus worden: <link href="stylesheet%20snoekvissers.css" rel="stylesheet" type="text/css">
- NB: ook andere speciale tekens, zoals accentletters en leestekens moeten een speciale %.. notatie krijgen; zie hier voor de complete lijst van verboden waar.
Maar voorkomen is beter dan genezen:
- Tip: gebruik nooit spaties en bijzondere lettertekens in een bestandsnaam of mapnaam. Voor de leesbaarheid van de woorden in een bestandsnaam of mapnaam kan er een streepje - of onderstreepje _ tussen gezet worden (die mogen wel zonder speciale benadering).
- Met <link href="stylesheet-snoekvissers.css" rel="stylesheet" type="text/css"> is er dus geen enkel probleem (als het stylesheet ook als zodanig is geüpload).
Maar je kunt het stylesheet ook rechtstreeks laten valideren door de css-validator. Dan is
dit het resultaat:
- Naast andere dingen wordt de waarschuwing afgegeven dat er in regel 9 "Herdefinitie van background-image" en "Herdefinitie van background-repeat" plaatsvindt.
- Maar er wordt niets gezegd over de spatie die er niet is (het gaat nogal over spaties vandaag
).
- Het merkwaardige is, dat als je onderaan de validatie-pagina kijkt naar de goedgekeurde code, de spatie er wel keurig tussen gezet is!

Rijst de vraag: is de spatie tussen het haakje en de repeat dan toch niet verplicht?
Kijken we in de
css-specificatie voor de shorthand background-eigenschappen:
- Daar staat als voorbeeld: P { background: url("chess.png") gray 50% repeat fixed }.
- Met spatie dus, maar er staan ook andere spaties die niet perse nodig zijn; geeft dus geen uitsluitsel.
- Via de CSS property definitions uitgekomen bij de Appendix G. Grammar of CSS 2.1. Die gaat helaas boven mijn pet.
- Maar als je een aantal css-compressors langsloopt, verwijderen die vaak de spatie zonder een krimp te geven.
Conclusie:
Toch geen tikfoutje, het mag kennelijk ook zonder spatie, en IE7 en IE8 doen het gewoon fout.
Maar zelf zet ik er altijd wel een spatie tussen, ter bevordering van de leesbaarheid van de css.
Tot zo ver op heden!
Met vriendelijke groet,
CSShunter