SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Problem with Button

    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. :\

    http://kidstlc.org/how-you-can-help/donate-now/

    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. #2
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    No need to hate. Just understand.

    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.

    Code CSS:
    #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. #3
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 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. #4
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code CSS:
    .Cart66ButtonPrimary, 
    .Cart66ButtonSecondary, 
    #content .Cart66ButtonPrimary, 
    #content .Cart66ButtonSecondary, 
    .Cart66CartButton .purAddToCart

    and for hover

    Code CSS:
    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
    Last edited by Victorinox; Dec 3, 2011 at 11:45. Reason: Deleted bad advice.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •