Op de pagina met links vind je mogelijk sites, die dieper op bepaalde onderwerpen ingaan.
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 1 maart 2010.
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.
De bovenste border is transparent en dus niet zichtbaar.
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;
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.
Eén, twee of drie borders doorzichtig maken
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.
Problemen voorkomen en (hopelijk) oplossen
-
In de voorbeelden hierboven heb ik bij de css voor Internet Explorer 6 de kleur 'blue' gebruikt. Dat is geen toeval. Om een of andere reden blijken bijvoorbeeld de kleuren 'red' en 'white' niet te werken, en ook de hexadecimale notatie (#......) werkt niet. Mogelijk dat sommige namen of hexadecimale waarden wel werken, maar ik houd het op 'blue', want dat schijnt altijd goed te werken.
-
Filters in Internet Explorer 6 en 7 werken alleen maar als hasLayout aan staat. hasLayout is 'n duivels bedenksel van Microsoft. Je kunt het niet rechtstreeks aan- of uitzetten, maar het wordt indirect aangezet door het gebruik van bepaalde eigenschappen, zoals
width. Los van dat filters wel of niet werken, is ook de weergave van de pagina volledig verschillend, afhankelijk van of hasLayout uit of aan staat.hasLayout wordt dan ook nog 'ns in Internet Explorer 7 bij andere eigenschappen aangezet dan in Internet Explorer 6. Gelukkig bestaat dit onding in Internet Explorer 8 niet meer.
hasLayout kan dus uitstaan als je toevallig bepaalde eigenschappen niet hebt gebruikt. De veiligste manier om het aan te zetten is het toevoegen van
zoom: 1;aan de css voor Internet Explorer 6. Dit heeft verder geen enkele invloed. -
De in het filter gebruikte kleur (hier 'blue') wordt overal binnen het element weggehaald. Als ik in dit voorbeeld als tekstkleur 'blue' had gebruikt, was de tekst dus ook onzichtbaar geworden.
Dit is simpel op te lossen. Blauw is #0000ff. Als je blauwe tekst of zo wilt gebruiken, maak de kleur dan #0000ef. Het verschil is niet te zien, maar Internet Explorer 6 zal de blauwe tekst dan met rust laten.
Op de pagina met links vind je mogelijk sites, die dieper op bepaalde onderwerpen ingaan.
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: