CODEWITHSUNDEEP
htmlcssinternet-explorer
Hassan Sardar
Hassan Sardar

Reputation: 4523

Button Styling CSS - Issue with I.E

I have this styling for a button. Working perfect on Firefox and Chrome, but not with Internet Explorer (ALL VERSIONS)

JsFiddle DEMO : http://jsfiddle.net/Mhded/1/

Here is my Code :

HTML:

<span class="button_style">Comment</span>

CSS:

.button_style { 
    background:-moz-linear-gradient(top,#006666 0%,#006666 100%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#006666),color-stop(100%,#006666));
    background:-webkit-linear-gradient(top,#006666 0%,#006666 100%);
    background:-o-linear-gradient(top,#006666 0%,#006666 100%);
    background:-ms-linear-gradient(top,#006666 0%,#006666 100%);
    background:linear-gradient(top,#006666 0%,#006666 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006666',endColorstr='#006666',GradientType=0);
    border: 1px solid #006666;
    border-radius: 3px 3px 3px 3px;
    color: #FFFFFF;
    font-family: 'Helvetica',sans-serif;
    font-size: 14px;
    padding: 6px;
    vertical-align: middle;
    width: 70px;
    cursor:pointer;
}

Upvotes: 0

Views: 119

Answers (2)

Albzi
Albzi

Reputation: 15609

This here works for me in IE10

This works in IE8+, (Not tested on IE8 down) - uses background colour rather than gradient

I added border:none; and it stopped displaying a border around it and looks like this in IE10:

Button screenshot http://puu.sh/4ucGX.png

and this in IE8 (Border radius is not supported in IE8-)

IE8 button

IE9 and down doesn't show anything since you're using gradients. You can (kind of) fix it by just adding background:#006666 since you don't need a gradient from one colour into the same colour with no difference in between.

Upvotes: 3

BenM
BenM

Reputation: 4278

It's because IE doesn't support some of your CSS properties. You need to research each one and find out how to do it for IE.

Filter is one that is not supported in IE 10 http://msdn.microsoft.com/en-us/library/ie/hh801215(v=vs.85).aspx

Upvotes: 0

Related Questions