Results 1 to 3 of 3

Thread: Gradient Trouble IE 9

  1. #1
    Join Date
    Nov 2009
    Posts
    107
    Thanks
    7
    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 9....am 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
    Location
    Derbyshire, UK
    Posts
    2,026
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    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;
    Code:
    .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;
    Code:
    .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 | Latest News RSS | Facebook | Twitter |
    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 |
    The only limit to creativity is imagination: JemCon.org

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

    Default

    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, 09:39 PM
  2. I want to center and add a gradient
    By Dgriff in forum CSS
    Replies: 6
    Last Post: 05-27-2010, 01:17 AM
  3. Css gradient problem
    By fg123 in forum CSS
    Replies: 10
    Last Post: 07-29-2009, 10: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, 01:41 AM

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
  •