Pink border in Firefox 4

I have this code in my CSS

    img.hoverborder {开发者_如何学JAVA
        border: solid 4px transparent;
        /*Propriété propre à Internet Explorer 6.0 */
        border-color: pink;
        filter: chroma(color=pink);
    }
img.hoverborder:hover {
        border-color: blue;
    }

It's only for IE6 but when i use Firefox 4 i have a pink border. How can i do for have a transparent border when i use FireFox 4..? Thx.

Remove the IE6-only code from your CSS and make a conditional piece in your html:

In your CSS:

img.hoverborder {
 border: solid 4px transparent;
 /*Propriété propre à Internet Explorer 6.0 */
 /*border-color: pink;*/
 /*filter: chroma(color=pink);*/
 /* IE6 stuff removed*/
}

In your HTML head

<!-- your normal StyleSheet -->
<link type="text/css" rel="stylesheet" href="css/StyleSheet.css"/> 
<!-- overrides for IE 6 -->
<!--[if lte IE 6]>
<style type="text/css">
 img.hoverborder { 
  /*Propriété propre à Internet Explorer 6.0 */
  border-color: pink;
  filter: chroma(color=pink);
 }
</style>
<![endif]-->

Alternatively you could include another CSS stylesheet within the conditional piece, like this:

<!-- your normal StyleSheet -->
<link type="text/css" rel="stylesheet" href="css/StyleSheet.css"/> 
<!-- overrides for IE 6 -->
<!--[if lte IE 6]>
<link type="text/css" rel="stylesheet" href="css/StyleSheet-IE6.css"/> 
<![endif]-->

The code within the <!--[if lte IE 6]> .... <![endif]--> will only be used when the if-statement is true. In this case when the browser is lte IE 6 (lower than/equal Internet Explorer 6), thus for IE6 and down, so it won't work in FF4 and not make your border pink. Neither will it be pink in IE7 and up, or any other browser.

border-color: rgba(255,0,255,0.5)

The last parameter is for "opacity".

Firefox is giving you a pink border because you're telling it to with this:

border-color: pink;

The usual way to add IE-specific styles is to use a conditional comment and a separate stylesheet just for IE. First remove the border-color from your main CSS:

img.hoverborder {
    border: solid 4px transparent;
    filter: chroma(color=pink);
}

Then add an ie6.css stylesheet with this:

img.hoverborder {
    /*Propriété propre à Internet Explorer 6.0 */
    border-color: pink;
}

And finally, pull in the IE6 stylesheet with something like this in your HTML:

<!--[if IE 6]><style type="text/css">@import "ie6.css";</style><![endif]-->