January 26th, 2013, 11:07 PM
|
|
Contributing User
|
|
Join Date: Dec 2012
Posts: 64
Time spent in forums: 11 h 36 m 11 sec
Reputation Power: 1
|
|
|
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 12:38 AM.
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
