IE Problem with Button

HTML & CSS
1

Hi There,

I am having a slight problem with an Add To Cart button across all IE Browsers (at least IE 7 IE 8 and IE 9, dont have 6 to check but I’m sure its the same). The problem is the background color is white in IE and it should be Purple. I believe its a simple CSS problem but I can’t seem to figure it out. :\

if you go to the above link in any browser besides IE you will see the Add to Cart button is purple. Then check it in IE and it will be white. What is going on? Any ideas? I hate you IE!!!

-B

2

No need to hate. Just understand. :slight_smile:

It looks to be caused by an IE proprietary filter in the following rules in the style.css stylesheet. The filter applies a very light grey gradient which is reversed on hover.

#commentform input[type="submit"],
input[type="submit"],
a.button,
.reply > a {
    cursor: pointer;
    width: auto;
    display: inline-block;
    font-weight: bold;
    padding: 5px 15px;
    font-size: 10px;
    color: #555;
    text-shadow: 0px 1px 1px #fff;
    border: 1px solid #fff;
    background: #dfdfdf;
    background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#eeeeee));
    background: -moz-linear-gradient(top,  #fefefe,  #eeeeee);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#eeeeee');
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 1px #222;
    -moz-box-shadow: 0px 0px 1px #222;
    box-shadow: 0px 0px 1px #222;
    /*THIS IS AN IE7 FIX --> */zoom: 1;*display:inline;
}

#commentform input[type="submit"]:hover,
input[type="submit"]:hover,
a.button:hover,
.reply a:hover  {
    text-decoration: none;
    background: #fefefe;
    background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#fefefe));
    background: -moz-linear-gradient(top,  #eeeeee,  #fefefe);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#fefefe');
}

See how it looks with the filters removed.

3

Do you know how I would approach fixing this? I’m not really a programmer I am just helping out on some overflow work :\ I understand basic CSS and HTML and some PHP but thats about it. Would I just switch that filter to the purple color I want instead of the gradient lol? That seems easy :slight_smile: I know you are probably wondering why I dont just go check right now, but I dont have a computer with IE at my house so I’ll check at the office on monday! Thank you for the reply.

4

Rules for background and color applied to the following selectors are currently taking precedence, so add any additional background and color changes for the button to these.

.Cart66ButtonPrimary, 
.Cart66ButtonSecondary, 
#content .Cart66ButtonPrimary, 
#content .Cart66ButtonSecondary, 
.Cart66CartButton .purAddToCart

and for hover

div#tickets-form .gform_footer input.button.gform_button:hover,
 .Cart66ButtonPrimary:hover, 
.Cart66ButtonSecondary:hover, 
#content .Cart66ButtonPrimary:hover, 
#content .Cart66ButtonSecondary:hover, 
.Cart66CartButton 
.purAddToCart:hover

Both rules are in cart66.css