CODEWITHSUNDEEP
cssinternet-explorerfirefox
DextrousDave
DextrousDave

Reputation: 6793

Customizing a Firefox/Chrome Stylesheet for IE

I have a Firefox stylesheet and a chrome/safari stylesheet for a website. Now the problem is that IE does not pick up those styles(since they are not your typical general styles). I would like to know if there is an easy way of changing each of those properties to be able to work with IE. There are some styles/properties I will be able to change for IE, but I do not know the IE equivalent for some of them. Here is an example of the Firefox styles used in the Firefox stylesheet:

#topbar.black {/* Converted 1 gradient*/
background: -moz-linear-gradient(-90deg, #858585 0%, #636363 3%, #202020 50%, black    
51%, black 97%, #262626 100%);

}
#topbar.transparent {/* Converted 1 gradient*/
background: -moz-linear-gradient(-90deg, rgba(133,133,133,0.7) 0%,   
rgba(99,99,99,0.7) 3%, rgba(32,32,32,0.7) 50%, rgba(0,0,0,0.7) 51%, rgba(0,0,0,0.7) 
97%, rgba(38,38,38,0.7) 100%);

}
#topbar {/* Converted 1 gradient*/
background: -moz-linear-gradient(-90deg, #cdd5df 0%, #b0bccd 3%, #889bb3 50%,  
#8195af 51%, #6d84a2 97%, #2d3642 100%);

}
.pageitem {/* Converted 1 border radius*/
-moz-border-radius: 8px;
}
#tributton, #duobutton {/* Converted 1 gradient*/
background: -moz-linear-gradient(-90deg, #cdd4d9 0%, #c0c9cf 3%, #abb7bf 97%,    
#81929f 100%);

}

Upvotes: 0

Views: 282

Answers (1)

Bud Damyanov
Bud Damyanov

Reputation: 31839

For IE 9+ you can use .pageitem {border-radius: 8px}, because it is CSS3 standart.

For gradients you can use this CSS hack for IE: #topbar {filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cdd5df', endColorstr='#b0bccd');}

Internet Explorer gradient filter doesn't support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr. See here for more details.

Upvotes: 1

Related Questions