Heb je dat ook wel 'ns? Je hebt net een hele mooie webpagina gemaakt. Het ziet er perfect uit in je favoriete webbrowser. Voor de zekerheid controleer je het nog even met een andere browser. En dan blijkt dat die pagina daar net op een iets andere manier wordt weergegeven. Hoe kom je erachter waar het aan ligt?

Twee vragen die ik mezelf in zo'n geval stel:

• Voldoet mijn pagina aan de geldende HTML- en CSS-standaarden?
• Is in mijn pagina voldoende rekening gehouden met standaardwaarden voor CSS-eigenschappen (die browserafhankelijk kunnen zijn)?

Een aantal handige tools die kunnen helpen bij het beantwoorden van deze vragen:

• IE Developer Toolbar (voor Internet Explorer 6 en 7)
• Firebug (plugin voor Mozilla Firefox)
• Web Developer (plugin voor Mozilla Firefox)

In dit artikel zal ik de IE Developer Toolbar bespreken. De andere twee volgen later.

Allereerst gaan we de toolbar installeren:

• Ga naar http://download.microsoft.com en gebruik de zoekoptie boven in het scherm om te zoeken naar 'IE Developer Toolbar' of ga direct naar de downloadpagina via deze link.
• Download het bestand IEDevToolBarSetup.msi en voer het bestand uit.
• Doorloop vervolgens de installatiewizard.
• Herstart Internet Explorer.
• De toolbar is vervolgens te activeren via het menu en dan de opties Beeld -> Explorer-balk -> IE Developer Toolbar.

Zo ziet de toolbar eruit: 

In de menubalk staan de opties voor het valideren van de HTML-pagina en de CSS. De opties 'Local HTML...' en 'Local CSS..' zijn heel handig in het geval je pagina lokaal op je eigen computer staat en dus nog niet beschikbaar is via het internet.

In de linkerkolom zijn de HTML-elementen waaruit een pagina is opgebouwd, te zien. Als we op een element klikken (bijv. HTML), dan worden in de middelste kolom de bijbehorende attributen getoond. In de rechterkolom staan de huidige CSS-eigenschappen die op dat element van toepassing zijn. Met de checkbox 'Show default Style Values' kunnen ook de standaard waardes worden getoond. Die waardes kunnen soms per browser verschillen waardoor een pagina net anders wordt getoond. Hele handige optie dus!

 

Een andere handige optie is de knop 'Select Element By Click' . Kies deze knop en je kunt vervolgens in de HTML-pagina de elementen selecteren waarvoor je de eigenschappen wilt bekijken!

De IE Developer Toolbar heeft nog meer handige opties en die zijn allemaal te bereiken via de menubalk. In 'Tools' zit bijvoorbeeld de optie om de browser naar een bepaalde schermresolutie om te zetten of een liniaal om de breedte te bepalen. Ook is er de optie om bijvoorbeeld javascript uit te schakelen. Eigenlijk veel te veel om het hier allemaal op te noemen.

Veel (debug-)plezier met de IE Developer Toolbar!