In mijn vorige blogpost over browsers schreef ik dat wanneer zoveel mogelijk volgens standaarden ontwikkeld wordt, er in de meeste browsers geen noemenswaardige problemen ontstaan. Op Internet Explorer 6 na dan, vanwege zijn gebrekkige ondersteuning voor standaarden en transparante png’s. Tijdens testen in Apple Safari en Google Chrome kom ik echter een andere eigenaardigheid tegen die gemakkelijk voor problemen kan zorgen in een template.
In Apple Safari en Google Chrome komt het nog wel eens voor dat de navigatie verspringt of het complete frame lager begint dan in andere browsers. Het probleem zit hem in de css.
De meeste templates die we ontwikkelen hebben fixed width (er wordt bij ons dan ook vaak gewerkt met afbeeldingen om de vormgeving te bepalen). Om gemakkelijker een ontwerp cross-browser pixelprecies te krijgen beginnen we de stylesheet met de volgende declaratie:
* {
margin: 0;
padding: 0;
}
Deze declaratie zorgt ervoor dat alle elementen een margin en padding van 0 krijgen. We kunnen dan verder zelf bepalen welke elementen hoeveel margin en padding meekrijgen.
Safari en Chrome passen deze regel helaas niet overal toe, wat voor problemen in de template kan leiden. Bij de volgende elementen (voor zover ik weet) passen deze browsers de regel niet toe: body, ul. De ‘bugs’ in de template kunnen op de volgende manier opgelost worden, declareer bij de body en de ul opnieuw de margin en padding:
body, ul {
margin: 0;
padding: 0;
}
Na het toevoegen van deze regels in de css werkt in de meeste gevallen de template weer goed in Safari en Chrome.
Tja, das dan ook niet zo gek dat het niet werkt dan 😛
Nee idd, naja als je het weet dan hè 😉 Het is gewoon stom van deze browsers dat ze de eerste waarde gewoon negeren, dat druist tegen de standaarden in.