I'm attempting to create a gradual fading gray line by using a div that is sized at 1x100px with a CSS gradient applied for the fade effect.
The only issue I am encountering is in Internet Explorer where the div is displaying a blue border which I am unable to remove.
Below is the CSS code 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 have attempted to adjust the height of the div in order to resolve the issue with the gradient appearing blue and the border being added, but no success so far. Any suggestions on why this might be happening?