Skip links en inhoudsopgave

Als je dit artikel afdrukt, wordt automatisch een printvriendelijke versie afgedrukt.
Dit artikel is van toepassing op Internet Explorer 6.
Links in dit artikel, vooral links naar andere sites, kunnen verouderd zijn. Op de pagina met links vind je steeds de meest recente links.
Tekst die tussen << en >> staat, is een link naar internet.
Tekst die omgeven is door een lijn (meestal een stippellijn), verwijst naar een andere plaats binnen het artikel. Op de site zijn dit ankers, maar dat werkt nou eenmaal niet op papier.
Laatst herzien op .

Wat Internet Explorer 6 met transparent doet

Mogelijk vraag je je af waarom je ooit 'n doorzichtige border zou willen gebruiken. Dat kan bijvoorbeeld af en toe goed van pas komen als je margin al hebt gebruikt. 'n Doorzichtige border kan dan als 'n tweede margin dienen. Of je wilt gebruik maken van de schuine hoek tussen twee borders van verschillende kleur (transparent is in feite ook 'n kleur).

Het probleem dat Internet Explorer 6 heeft met doorzichtige borders is simpel samen te vatten: hij maakt 'n doorzichtige border zwart. Internet Explorer 6 kent het woord transparent, dat doorzichtig betekent, gewoon niet en verandert het kennelijk daarom maar in zwart.

Internet Explorer 7 en later verwerken transparent wel zoals het hoort.

Doorzichtige border foutief weergegeven
Internet Explorer 6 verandert transparent in zwart.

Hierboven staan twee afbeeldingen van een div met daarbinnen een tweede div. De binnenste div heeft een blauwe border. Aan de bovenkant is de border transparent gemaakt.

Links staan de divs zoals Firefox, Safari, Opera, Google Chrome en Internet Explorer 7 en 8 ze weergeven. Rechts is te zien hoe Internet Explorer 6 het weergeeft. Ten tijde van het maken van Internet Explorer 6 vond Microsoft kennelijk dat zwart het dichtst in de buurt van transparent kwam.

Alle borders doorzichtig maken

Internet Explorer 6 kan meer dingen dan je in eerste instantie zou verwachten, maar doet het vaak op 'n manier die niet standaard is. Deze door Microsoft bedachte niet-standaardmethoden zijn in de regel veel ingewikkelder dan de standaardmethode die in alle browsers werkt. Bovendien hebben ze vaak veel minder mogelijkheden. Gelukkig gedragen nieuwere versies van Internet Explorer zich steeds meer volgens de standaard.

Om 'n bepaalde kleur doorzichtig te maken, wordt in Internet Explorer 6 een zogenaamd 'filter' gebruikt. In dit filter geef je 'n kleur op die doorzichtig moet worden. Als die kleur vervolgens wordt gevonden, wordt die onzichtbaar gemaakt. Waar je bij andere browsers dus kunt volstaan met transparent, moet je bij Internet Explorer 6 eerst 'n kleur opgeven om die vervolgens weer te verwijderen.

Het opgeven van de doorzichtig te maken kleur doe je als volgt:

filter:progid:DXImageTransform.Microsoft.Chroma(color='blue')

Hieronder staat een div met 'n zwart randje. Daarbinnen staat een tweede div met een doorzichtige border van 25 px. De afstand tussen tekst en rand is dus niet gemaakt met padding of margin, maar met 'n doorzichtige border:

border: transparent solid 25px;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque

In Internet Explorer 6 werkt dit dus niet. Die toont gewoon 'n zwarte border van 25 px breed in plaats van een doorzichtige border. Speciaal voor Internet Explorer 6 voegen we daarom het volgende toe:

<!--[if IE 6]> <style type="text/css"> div#vb-1 {border: blue solid 25px; filter:progid:DXImageTransform.Microsoft.Chroma(color='blue');} </style> <![endif]-->

Het deel tussen <!--[if IE 6]> en <![endif]--> wordt alleen door Internet Explorer versie 6 gelezen. Er kan ook 'n gewone link naar 'n externe stylesheet voor Internet Explorer 6 worden neergezet.

vb-1 is de id van de div hierboven. Die geef ik dus eerst 'n blauwe border van 25 px, even breed als de doorzichtige border moet worden. En vervolgens zeg ik dat alles met de kleur blauw doorzichtig gemaakt moet worden.

(In html5 kun je volstaan met alleen <style>, type="text/css" is niet meer nodig.)

Eén, twee of drie borders doorzichtig maken

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque

Dit werkt precies hetzelfde als bij het doorzichtig maken van alle borders, alleen moet ik het per kant opgeven. In de css voor alle browsers zet je:

border: solid 25px; border-color: transparent #a7a755;

Ik geef eerst op dat er overal 'n border van 25 px breed moet komen te staan. Daarna geef ik op dat de border boven- en onderaan doorzichtig moet worden, en links en rechts goudkleurig. Omdat ik bij de kleuren alleen waarden voor boven en rechts opgeef, krijgen onder en links automatisch dezelfde waarden.

<!--[if IE 6]> <style type="text/css"> div#vb-2 {border-top: blue solid 25px; border-bottom: blue solid 25px; filter:progid:DXImageTransform.Microsoft.Chroma(color='blue');} </style> <![endif]-->

Het deel tussen <!--[if IE 6]> en <![endif]--> wordt alleen door Internet Explorer versie 6 gelezen. Er kan ook 'n gewone link naar 'n externe stylesheet voor Internet Explorer 6 worden neergezet.

vb-2 is de id van de div hierboven. Die geef ik dus eerst 'n blauwe border van 25 px aan boven- en onderkant, even breed als de doorzichtige border moet worden. En vervolgens zeg ik dat alles met de kleur blauw doorzichtig gemaakt moet worden.

(In html5 kun je volstaan met alleen <style>, type="text/css" is niet meer nodig.)

Problemen voorkomen en (hopelijk) oplossen

Iets gevonden waar je wat aan hebt? Mooi. Als je je waardering wilt uiten, maak dan een donatie over aan War Child Nederland, een organisatie die kinderen uit oorlogsgebieden helpt hun trauma's te verwerken. Of - nog beter - wordt donateur:
War Child Nederland