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.

Advertisements

6 comments

  1. Just the trick I needed!

    I spent the entire day implementing a hack to work around IE’s lack of support for min/max-width. The hack (cssplay.co.uk/boxes/minwidth.html) relies on the use of a border – which I needed to be transparent. I thought all was lost until I found your site. Many thanks!

  2. Hi.

    Thank you for the trick. But however it may not work in some cases. The reason that there are missing CSS parameters which are required for Chroma filter to work.

    As MSDN’s link says ( link ):

    [quote]
    The object that the filter is applied to must have layout before the filter effect displays. You can give the object layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true.[/quote]

    So, basically, setting one of those parameters should solve any possible problems. Example with “width” param:

    [quote]
    *html .testDiv
    {
    border-color: pink;
    filter: chroma(color=pink);
    width: 100%;
    }
    [/quote]

    Or more precise example:
    [quote]
    div {
    border-color: #00044F;
    width:100%; filter:progid:DXImageTransform.Microsoft.Chroma(color=’#00044F’);
    }
    [/quote]

    Hope it helps.

  3. Good trick, I’m glad Google directed me one more time to your blog, there always seems to be a good fix for IE.

    To complement the finding from Makov, you can set ‘layout’ to your object a much simpler and completly unharmful way by using this css rule:

    zoom: 1;

  4. Pingback: Biscuit 3

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s