IE6 Issue - border-color:transparent not working

Question

style="border:solid 1px transparent" is not working in IE6 instead it shows a black border.

How to solve this issue?

Answer 1

IE6 does not support a border that is transparent.

With a quick search, I found this workaround:

http://acidmartin.wordpress.com/2008/08/24/emulating-border-color-transparent-in-internet-explorer-6/

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.