De browser test zul je denken? Ja inderdaad de browser test! Er zijn vele verschillende browsers en helaas werken ze niet allemaal hetzelfde. Ik werk zelf altijd in Chrome en vooral in het begin is het me overkomen dat ik een prachtige website maakte in Chrome maar dat ik er achteraf achter kwam dat het in Internet explorer er niet uit zag.
Dat is een probleem waar je vaker mee te maken zult krijgen omdat de browsers allemaal toch net even anders zijn. Daarom is het belangrijk om na het maken van je website een browser test te doen. Ik zelf test de website altijd in de meest gebruikte browsers zoals Internet Explorer, Firefox, Chrome en Safari.
Browser test niet geslaagd?
Een veel voorkomend probleem bij de verschillende browsers is dat soms je menu er net niet helemaal op past. Dan staat het menu in Chrome wel mooi netjes maar in Explorer niet. Wat ik hier altijd doe is een CSS hack toevoegen. Uit mijn hoofd weet ik ook niet precies de juiste code dus ik zoek altijd even via Google 🙂 en dan is het een kwestie van uitproberen.
Dit is wel een handige website: http://browserhacks.com/
En onderstaande code heb ik even van deze website gehaald: https://stackoverflow.com/questions/28417056/how-to-target-only-ie-any-version-within-a-stylesheet
Dit is dan een voorbeeld code die je kunt toevoegen om het menu in Explorer ook mooi te laten passen:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
#primaire-nav a {padding: 12px 40px;}
}
In deze versie heb ik de padding dan iets kleiner gemaakt als de standaard versie. Zo blijft hij in Chrome goed staan en in Explorer wordt de padding iets kleiner waardoor het menu weer netjes staat 🙂
Wil het niet lukken?
Wil het niet helemaal lukken? Laat dan hieronder een reactie achter en dan zal ik je zo snel mogelijk verder proberen te helpen. Voor andere vragen kun je altijd contact met ons opnemen via de contactpagina.