#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    64
    Rep Power
    2

    IE9 Gradient/Border-Radius Hover Issue


    For some reason my latest project in IE9 has decided to not use a gradient and remove the border-radius when hovered. I'm tired of fighting with IE9 gradients so I just threw together a conditional style sheet for IE9 and lower, and repeat 1px wide image gradients for IE only.

    Code:
    <!--[if lte IE 9]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
    <![endif]-->
    Everything seemed to work well for a couple days, but hovering displays a solid color instead of the image and removes the rounded corners. But what's even more strange is if you don't hover the button it retains the proper gradient and border-radius.

    Kind of a weird problem, and at this point I'm a little frustrated with trying to understand IE9's fickle interpretation of CSS. If anyone could help I'd appreciate it.

    Not much to the ie.css:

    Code:
    li#first-nav-button:hover{
    	background-image:url(images/robo/buttonhover.png);
    	background-repeat:repeat-x;
    }
    
    li#first-nav-button{
    background-image:url(images/robo/button.gif);
    background-repeat:repeat-x;
    }
    
    li#first-nav-button:hover{
    background-image:url(images/robo/buttonhover.png);
    background-repeat:repeat-x;
    }
    
    li.normal-button{
    background-image:url(images/robo/button.gif);
    background-repeat:repeat-x;
    }
    
    li.normal-button:hover{
    background-image:url(images/robo/buttonhover.png);
    background-repeat:repeat-x;
    }
    
    li#leaderboard-button{
    background-image:url(images/robo/button.gif);
    background-repeat:repeat-x;
    }
    
    li#leaderboard-button:hover{
    background-image:url(images/robo/buttonhover.png);
    background-repeat:repeat-x;
    }
    
    li#last-nav-button{
    background-image:url(images/robo/button.gif);
    background-repeat:repeat-x;
    }
    
    li#last-nav-button:hover{
    background-image:url(images/robo/buttonhover.png);
    background-repeat:repeat-x;
    }
    SOLVED: I found a filter element in my style.css that was throwing off IE.
    Last edited by nbasso713; January 27th, 2013 at 01:38 AM.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    1
    Rep Power
    0
    God will be praised ! you helped me

IMN logo majestic logo threadwatch logo seochat tools logo