Results 1 to 3 of 3

Thread: Gradient Trouble IE 9

  1. #1
    Join Date
    Nov 2009
    Thanked 2 Times in 2 Posts

    Default Gradient Trouble IE 9

    Hello. I am using the CSS gradient effect on the top menu of my pages. I understand this isnt supported for IE 9. The thing that is confusing is that I have a hover effect using the gradient and that does work in IE I missing something? Why does the gradient work for hover but not for background? Site is here

    Thanks in advance.

  2. #2
    Join Date
    Jul 2008
    Derbyshire, UK
    Thanked 599 Times in 575 Posts
    Blog Entries


    In "/wp-content/themes/responsive/style.css", hexidecimal shades of grey are used on the menu's "normal" state, so you can actual see the gradient in IE9 - it's just grey instead of purple;
    .menu { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#585858, endColorstr=#3d3d3d); }
    The menu gradients are defined for all browsers in this "/wp-content/themes/responsive/style.css" stylesheet, however, there is a later stylesheet that is overriding all but the gradient for the Microsoft browser.

    That stylesheet is "/wp-content/themes/responsive_child/style.css", (which uses @import to pull in the stylesheet referenced above) and overrides the grey to shades of purple. It looks like you've tried to add extra lines for all the other browsers, but you've just missed the Microsoft filter to account for IE.

    So try changing "/wp-content/themes/responsive/style.css" to use shades of purple instead of grey against the .menu selector (its listed under a the "=Header Menu (Primary) heading"), OR in, "/wp-content/themes/responsive_child/style.css", make the change in red;
    .menu {
    font-family: arial;
    background-image:none !important;
    -moz-box-shadow: 0px 4px 4px #000;
    -webkit-box-shadow: 0px 4px 4px #000;
    box-shadow: 0px 4px 4px #000;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
      /* Safari 4-5, Chrome 1-9 */
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#663399), to(#110a15)) !important;
      /* Safari 5.1, Chrome 10+ */
      background: -webkit-linear-gradient(top, #663399, #110a15) !important;
      /* Firefox 3.6+ */
      background: -moz-linear-gradient(top, #663399, #110a15) !important;
      /* IE 10 */
      background: -ms-linear-gradient(top, #663399, #110a15) !important;
      /* Opera 11.10+ */
      background: -o-linear-gradient(top, #663399, #110a15) !important;
    /* IE 9 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#663399, endColorstr=#110a15); 
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Nov 2009
    Thanked 2 Times in 2 Posts


    Thanks a lot Beverleyh. I missed that. Worked great.

Similar Threads

  1. Apply a gradient to a box-shadow?
    By Schattenmann in forum CSS
    Replies: 1
    Last Post: 07-14-2011, 08:39 PM
  2. I want to center and add a gradient
    By Dgriff in forum CSS
    Replies: 6
    Last Post: 05-27-2010, 12:17 AM
  3. Css gradient problem
    By fg123 in forum CSS
    Replies: 10
    Last Post: 07-29-2009, 09:50 PM
  4. css gradient help
    By Mehok in forum CSS
    Replies: 3
    Last Post: 02-21-2008, 04:44 PM
  5. CSS Gradient Shadow
    By harlequin2k6 in forum CSS
    Replies: 2
    Last Post: 05-31-2007, 12:41 AM


Posting Permissions

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