Forums
View unanswered posts | View active topics It is currently Mon Sep 01, 2014 2:59 pm



Reply to topic  [ 7 posts ] 
 Linear Gradients not working in IE7-8 
Author Message

Joined: Fri Feb 08, 2013 12:43 pm
Posts: 4
Post Linear Gradients not working in IE7-8
I'm using linear gradients in the navigation of a site which works in FF, Safari, Chrome, etc. and works in IE9-10. I cant' get them to work in 7 or 8. Here's a sample css rule:
Code:
.ddsmoothmenu {
   background: #a0b59d; /* Old browsers */
   /* IE9 SVG, needs conditional override of 'filter' to 'none' */
   background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2EwYjU5ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyODNlMjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
   background: -moz-linear-gradient(top,  #a0b59d 0%, #283e25 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a0b59d), color-stop(100%,#283e25)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top,  #a0b59d 0%,#283e25 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top,  #a0b59d 0%,#283e25 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top,  #a0b59d 0%,#283e25 100%); /* IE10+ */
   background: linear-gradient(to bottom,  #a0b59d 0%,#283e25 100%); /* W3C */

   behavior: url('/PIE-1.0.0/PIE.htc');
   
   height: 36px;
   line-height: 36px;
   width: 1024px;
   }


I've also tried adding:
Code:
-pie-background: linear-gradient(to left,#b2c99f,#4b6236);
but no help.

The site is: http://dev.jacksonlandscapesc.com/index.php

NOTE: If I use:
Code:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0b59d', endColorstr='#283e25',GradientType=0 ); /* IE6-8 */
the styling works but the dropdown menu no longer works.

Thanks for any help,
Bill


Fri Feb 08, 2013 12:59 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Linear Gradients not working in IE7-8
PIE 1.x used the old gradient syntax (2.x uses the new one), so you'll have to use the same syntax as the -moz version:

-pie-background: linear-gradient(top, #a0b59d 0%, #283e25 100%);

By the way, PIE also handles the gradient in IE9 so you can remove the inlined svg background.


Fri Feb 08, 2013 1:20 pm
Profile

Joined: Fri Feb 08, 2013 12:43 pm
Posts: 4
Post Re: Linear Gradients not working in IE7-8
Jason,

I've made the updates you listed (SVG is commented out for now). Instead of gradients, the site displays the default 1-color backgrounds intended for older browsers. Do I have a coding error?

Bill


Fri Feb 08, 2013 2:33 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Linear Gradients not working in IE7-8
Your PIE.htc is being served with an incorrect content-type header of text/plain. See http://css3pie.com/documentation/known- ... ntent-type

Make sure you've spent time understanding all the commonly encountered issues on that page.

I notice you have the behavior property within a rule with a :hover selector -- this won't work, make sure you define the behavior property in the normal non-:hover rule for those elements.


Fri Feb 08, 2013 5:27 pm
Profile

Joined: Fri Feb 08, 2013 12:43 pm
Posts: 4
Post Re: Linear Gradients not working in IE7-8
I've added
Code:
AddType text/x-component .htc
to .htaccess.
I moved the behavior property from a hover rule to its non-hover
version. I've also read and reread the known issues section. Any
ideas on what else to look at?

Thanks,
Bill


Sat Feb 09, 2013 5:34 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Linear Gradients not working in IE7-8
It appears to be working when I visit your site in IE8 -- the menu items are displayed with gradients as expected. But there is a z-indexing issue which is causing your menus to drop behing the main content -- this is not a PIE issue but a general IE issue, which you'll have to figure out.


Sat Feb 09, 2013 8:47 pm
Profile

Joined: Fri Feb 08, 2013 12:43 pm
Posts: 4
Post Re: Linear Gradients not working in IE7-8
Thanks - it's working now. Appreciate your advice.
Bill


Sun Feb 10, 2013 5:59 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 7 posts ] 

Who is online

Users browsing this forum: Bing [Bot] and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.