transparent border in IE6

10 Dirty CSS Tips and Tricks

Here is a collection of 10 CSS tips, tricks in blogposts I have written during the last year that you may find useful:

01. Better Image Scaling and Resampling in Internet Explorer
02. Setting Opacity and Other Filters in Internet Explorer 8
03. The 32 External CSS Files Limitation of Internet Explorer and More
04. Unobtrusive CSS Loading Indicator for Images
05. CSS: Filtering and Distinguishing Google Chrome and Safari
06. Controlling the CSS Opacity Rate of Child Elements in Transparent Parents in Internet Explorer
07. $style – Get Any CSS Property Value of an Object
08. Emulating border-color: transparent in Internet Explorer 6
09. An Exotic CSS Hack for Internet Explorer
10. CSS Watermark
11. Using CSS to Style Radiobuttons and Checkboxes in Safari and Chrome

Visit http://acidmartin.wemakesites.net – the home of Acid.JS – The AJAX Tools and Widgets Library

Advertisements

Emulating border-color: transparent in Internet Explorer 6

Fortunately, Internet Explorer 7 supports border-color: transparent, but still, there are hardcore IE6 users and it seems that they will never update their browsers.

This post is targetted to the developers that care and dare to make their websites crossbrowser.

Thanks to a less known Interner Explorer CSS filter, the transparent border in Internet Explorer 6 can be easily achieved. Consider the following lines of CSS code:

.testDiv
{
width: 200px;
height: 200px;
border: solid 10px transparent;
}

It works correctly under Internet Explorer 7, FireFox, Opera and Safari, while Internet Explorer displays a solid black border around .testDiv. To put it to work with IE6, we will create another rule, that is visible only in version 6 (the *html hack) with just two lines of code:

*html .testDiv
{
border-color: pink;
filter: chroma(color=pink);
}

… And voila! The ugly black border around .testDiv magically disappears.

The final things you should have in mind before using this trick is the color (both border and chroma color) in the hack. Make sure you apply a border-color (and respectively use it in the chroma filter) that is not used in that div, as the chroma filter displays a certain color of the object and its content as transparent, i.e. if the border-color in the hack is orange, and the text in your element is orange as well, it will disappear when the orange chroma filter is applied.