IE adds blue border to div where css gradient is used

Question

I'm trying to make a gray line, that is fading out to transparent. I created a div, that is 1x100px, and added css gradient to make the fade effect.

It works fine, except in IE where the div gets a blue border, which I cant get rid off.

This is my css for the div

#left_header_border {
    position:absolute;
    bottom:-1px;
    left:-100px;
    width:100px;
    height:1px;  

    /* gradient */
    background-color: transparent;
    background-image: -moz-linear-gradient(left, transparent, #cccccc); /* FF3.6 */
    background-image: -o-linear-gradient(left, transparent, #cccccc); /* Opera 11.10+ */
    background-image: -webkit-gradient(linear,left bottom,right bottom,color-stop(0, transparent),color-stop(1, #cccccc)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(left,transparent, #cccccc); /* Chrome 10+, Saf5.1+ */
    background-image: linear-gradient(left, transparent, #cccccc);
              filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorStr='transparent', EndColorStr='#cccccc'); /* IE6–IE9 */
}

I've tried to inspect the div, and make it higher, and the gradient seems to work, but the color is blue, and a border is added. Why?

score 6 · Accepted Answer · edited May 23 '17 at 09:58

6

Change the filter to:

filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorStr='#00cccccc', EndColorStr='#ffcccccc'); /* IE6–IE9 */

The filter doesn't allow “transparent” as a color value, but it does allow you to use an 8-digit hex reference, where the first two digits specify the opacity of the colour (just like the last value in rgba() color references).

More on using RGBA and transparency & using MS Filters

if the scary maths bit gets you, you can find e.g. 0.6 transparency in Windows calculator, open it in scientific view, do 255*0.6 = 153 then click the "hex" checkbox for the conversion = 99

in the example above it was starting at the the fully transparent (0.0 opacity) = 255*0 = hex value "00" through to fully opaque (1.0 opacity) = 255*1 = hex value "ff"

Update As kindly linked by thirtydot in the comments, here's a handy converter from RGBa to MS Filter syntax

edited May 23 '17 at 09:58

Community

1
1

answered Mar 31 '11 at 09:19

clairesuzy

27,296
8
54
52

I was editing to add LOL - thanks for finding reference Paul! – clairesuzy Mar 31 '11 at 09:26
1

@clairesuzy: oops! Sorry, I did leap right in there — please feel free to re-edit back into your own style. – Paul D. Waite Mar 31 '11 at 09:30
no need Paul it helped! I just added the calculation info it took me an age to find when I needed it ;) – clairesuzy Mar 31 '11 at 09:48
@clairesuzy: oh yeah, decimal to hex always hurts my head. Great answer. – Paul D. Waite Mar 31 '11 at 10:01
1

This is useful to generate the `filter` syntax: http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/ – thirtydot Mar 31 '11 at 17:23
+1 @thirtydot, brilliant link thanks - now bookmarked, actually is it etiquette for me to update my post with that? – clairesuzy Mar 31 '11 at 17:28
It's up to you. You upvoted the comment, so it's visible to others without pressing "more comments" which is useful. [I didn't bother to do so](http://stackoverflow.com/questions/4788564/transparency-and-text-problem/4788642#4788642) when someone pointed the same site out to me :) – thirtydot Mar 31 '11 at 17:33
ah cool, I'll put it in with credit to you, and I also didn't realise that about the comment flags either, am getting to grips with SO bit by bit.. thanks ;) – clairesuzy Mar 31 '11 at 17:38

score 1 · Answer 2 · answered Mar 31 '11 at 09:59

1

I'd recommend using CSS3Pie instead of hard-coding the filter style for this sort of thing -- it's a lot easier and more standards-compliant; it allows you to use standard CSS3 for your gradients in older versions of IE.

answered Mar 31 '11 at 09:59

Spudley

166,037
39
233
307

Thanks @Spudley, I will check CSS3Pie out :) – swenedo Mar 31 '11 at 10:49

IE adds blue border to div where css gradient is used

2 Answers2