Jump to content
Sign in to follow this  
gayatriom

Css In Ie9 All Good Except For Buttons Of Jigoshop Items

Recommended Posts

gayatriom

I've overridden jigoshop button colors in the custom css section. 

Someone Ie9 isn't reading it. 

Any idea why?>

Share this post


Link to post
Share on other sites
gayatriom

the right color shows for a split second and then the the color reverts to the old color. so weird.

Share this post


Link to post
Share on other sites
gayatriom

So this is what is weird. If you just use Background-color:#######; then IE won't recognize the change in color. You have the change the gradients that come with pagelines, so I had to add this to all of my button color changes: Basically had to trick IE.

background: -moz-linear-gradient(top,#A62219 0%,#A62219 0%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#A62219),color-stop(0%,#A62219));
background: -webkit-linear-gradient(top,#A62219 0%,#A62219 0%);
background: -o-linear-gradient(top,#A62219 0%,#A62219 0%);
background: -ms-linear-gradient(top,#A62219 0%,#A62219 0%);
background: linear-gradient(top,#A62219 0%,#A62219 0%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A62219',endColorstr='#A62219',GradientType=0);

Share this post


Link to post
Share on other sites
gayatriom

So this is resolved. Hope my solution helps someone.

Share this post


Link to post
Share on other sites
gayatriom

Grrr. no problem not solved. I'm getting a flash of the red and then boom goes back to the pagelines default color. 

Share this post


Link to post
Share on other sites
Rob

Okay.  I'm completely perplexed by one basic concept which I hope you can enlighten me on... that of why use linear gradients at all if both colors are exactly the same?  What possible effect could this have that couldn't be achieved with a single color tag?

 

Sorry if I'm naive here, but usually see the linear gradient used only with multiple colors.  IE9 doesn't like linear gradients, as far as I know and may be looking for a fall-back color, which your CSS lacks.  See the bottom of this link: https://developer.mozilla.org/en-US/docs/CSS/linear-gradient

 

One excellent site said:

 

Internet Explorer Limitations

Internet Explorer gradient filter doesn't support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr.

 


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
gayatriom

Hey Rob. 

I agree. 

I actually just had background-color:#A62219 !important; 

But internet explorer was refusing to 'believe' it and would actually go back to the gradient specified in the either the original pagelines input buttons or the jigoshop buttons. 

That's why I tried the above work around. 

It seems to work now - thankfully.

 

This topic is resolved.

Share this post


Link to post
Share on other sites
Danny

OK, the reason as to why this didn't work is that you're trying to override background-image with background color. That will not work, if you wish to have a button a specific color, simply use background: ######;


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
gayatriom

I tried that. Didn't work for IE. the above worked.

Share this post


Link to post
Share on other sites
Danny

So is this issue now resolved ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×