You may want to put some text here

CSS Dotted borders in Internet Explorer 6

Een tijdje geleden kreeg ik een opdracht van een klant en in het design dat ik moest basen stonden rond de artikels een stippellijn kadertje met zeer fijne puntjes. Op het eerste zicht niet echt een probleem aangezien je bij css border dotted kunt gebruiken maar toen dacht ik er ineens aan dat IE6 hier problemen mee heeft (wat een verassing).

Hieronder zie je een screenshot van een dotted border in enkele veschillende browsers.

.cssborder {
 padding: 10px;
 border: 1px dotted #333;
 width: 100px;
}

Dotted border

Na wat brainstormwerk ben ik op de volgende oplossing gekomen.

Eerst maak je in photoshop of paint een afbeelding van 2px op 2px. Zet vervolgens in de linkerbovenhoek en de rechteronderhoek een zwarte pixel. Sla deze afbeelding op als border.gif.

Pattern border

De CSS die je nodig hebt bestaat uit twee delen. Het eerst is de border zelf die volledig opgevuld word met de border.gif afbeelding. Vervolgens zetten we binnen die border een tweede div waarin je de inhoud kan zetten.

.imageborder {
 width: 120px;
 padding: 1px;
 background-image: url(border.gif);
}
.imagebordercontent {
 padding: 10px;
 background-color: #FFF;
}

De HTML ziet er zo uit:

<div class="imageborder"><div class="imagebordercontent">Testje</div></div>

Doordat je op de imageborder een padding zet van 1px en de achtergrondkleur van imagebordercontent op wit zet zal er rond de imagebordercontent maar 1px van de border.gif afbeelding getoond worden. Dit zorgt ervoor dat je een mooie dotted border krijgt rond je inhoud die er in elke browser het zelfde eruit ziet.

Dotted css border in verschillende browsers

The Author of this post is Wim Mostmans

Wim Mostmans heeft een eigen webontwikkeling bedrijf Sitebase waar hij voltijds voor werkt. Hij beheert ook nog enkele websites waaronder deze en een Computerforum. Blijf op de hoogte van waar Wim mee bezig is door hem te volgen op Twitter.

Leave a Comment