CSS gradients suddenly not working in IE9 only [closed] - css

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
For some reason certain gradients are ceasing to work on IE9 (and that is it as far as I know). On our website there should be a background gradient looking like the sky, and on our main menu navigation mega drop down it should have a blue gradient so that it is joined with the hover from the main nav.
site in question is: http://www.streetstyles4all.co.uk
Can any one advise?
The strange thing is that some gradients are actually working fine. I used a gradient generator to create some of the gradients but I am new to this and am in quite deep and it is beginning to get confusing.
Thanks in advance
Regards
Rob

background: #00b9ed; /* Old browsers */
background: -moz-linear-gradient(top, #00b9ed 0%, #f9fdff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b9ed), color-stop(100%,#f9fdff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b9ed 0%,#f9fdff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b9ed 0%,#f9fdff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b9ed 0%,#f9fdff 100%); /* IE10+ */
background: linear-gradient(to bottom, #00b9ed 0%,#f9fdff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b9ed', endColorstr='#f9fdff',GradientType=0 ); /* IE6-9 */
This code will work best in all the Browsers , here is a cross browser compatibility , if you face problem in this , do let me know i will see it myself.

From what I'm seeing, this is working just fine. Check to make sure that you don't have IE9 set to some other browser type in the Developer Tools. Make sure Browser Mode is set to IE9 and Document Mode is set to IE9 standards.
Incidentally, the reason your gradient backgrounds are not showing up on mouseover of the menu items is because you're using a :hover on an li. IE7 and IE8 do not support :hover on any element other than <a> tags. Changing your CSS styles just slightly would possibly correct this for you...
#general a:hover {
// your hover effect
}
... would be supported in all versions of IE. Of course, you'd have to make sure your <a> tag's adjusted to show the non-hover image, first, and that you've set the <a> tag to be display:block so it could show everything, but that's minor compared to trying to get IE < 9 to support :hover on non-anchor-tag elements.

Related

Bad looking linear gradient at Firefox

I'm giving my a linear gradient but in Firefox, even new versions, what I get is something like bars of solid color building the gradient. This is what's in my CSS:
background-color: #d3d3d3;
background-repeat: repeat-x;
background: -moz-linear-gradient(top, rgba(145,145,142,1) 0%, rgba(253,253,253,1) 99%);
background: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#fcfcfc));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d3d3',endColorstr='#fcfcfc');
background: -o-linear-gradient(rgb(211,211,211),rgb(253,253,253));
According to this, it is most unlikely you are facing a version problem. Firefox, as usual, was the first to implement a standards-compliant (no prefix) CSS property (and it has already been 9 versions back).
Try removing the background-repeat property as it is mostly useless for gradients unless you've set a background size. If it solves, I'd recommend posting a bug report on Bugzilla. Does it work well on IE10 and Chrome?

CSS Gradient in IE8 Disables my Dropdown menu

Website in question: http://atlanticsig.creativecurvedev2.ca/
A little background... This is a development site for a client that I am building in MODx using the Wayfinder extension for the menu and Ultimate Dropdown for the sub-menu. I am using CSS gradients to produce the pretty background color for the menu.
My issue is that in IE8, the drop-down menu does not display for the header navigation when I incorporate a "filter" gradient background color. Only the IE8 browser has this issue; even IE7 works properly. The drop-down menu is there, technically, because the cursor can click on the sub-menu links, but the browser refuses to show them.
I have fixed the issue by using a repeated background image for IE8, but I really didn't want to go this route; I thought for sure there should be a CSS solution, which is why I am posting this; my curiosity is piqued and I would like to see what the real issue was.
I was able to track down the issue to this line of code:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
As soon as I removed this line from the following block of code, the drop-down menu would work fine in IE8, however the gradient would disappear:
#header_menu {
background: -moz-linear-gradient(top, #003764 0%, #3b6b89 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003764), color-stop(100%,#3b6b89)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #003764 0%,#3b6b89 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #003764 0%,#3b6b89 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #003764 0%,#3b6b89 100%); /* IE10+ */
background: linear-gradient(to bottom, #003764 0%,#3b6b89 100%); /* W3C */
background-color: #003764; /* Old browsers */
height: 38px;
width: auto;
}
I tried a number of fixes in the HTML and CSS, including various arrangements of the gradients, applying the gradients to different elements, applying various heights/widths/position values to my containers and menus, playing with z-index values, adding extra blocks, etc.
In the end, it always seemed to come back to that "filter" line (I even tried -ms-filter-).
If you would like snippets of any other pieces of code, just let me know. This is a pretty interesting issue that I has made me genuinely curious to solve.
In all honesty, using IE's filter style is always asking for trouble -- it has a whole load of bugs and quirks that can break other stuff unexpectedly.
So what are your options?
You could try using CSS3Pie to render your gradients. It uses VML rather than filters, so it won't suffer from the same bugs. (or you could write the VML code yourself, but that would be tedious)
Or you could use a graphic for the gradient in IE8. You could arrange the CSS code such that the standard CSS gradient overrides the background graphic, so other browsers could carry on using the CSS gradient and wouldn't need to know about the graphic.
Or you could just accept that IE8 is an old browser and give it a plain background rather than a gradient. It may not look as pretty but it'll still work, and people still using IE8 are probably used to seeing sites these days that don't look their best.

CSS prefixes to achieve cross browser gradient

I'm hoping to achieve a cross browser gradient, if you inspect the anchor at the top right corner running inline with the branding of my mobile site it has been styled with the prefix moz for Firefox:
www.test-bed.co.uk/mobile/
background: -moz-linear-gradient(center top , #4A4A4A, #2C2C2C) repeat scroll 0 0 transparent;
May I ask is there is a similar way to achieve a cross browser gradient solution with the IE, Opera and webkit prefixes?
An online tool that automates CSS gradient rule generation for all modern browsers: little link.
But generically, here's the main syntax:
background: #color; /*fallback*/
background: -moz-linear-gradient(...);/*Firefox*/
background: -webkit-gradient(...);/*Chrome + Safari*/
background: -webkit-linear-gradient(...);/*Another Chrome + Safari*/
background: -o-linear-gradient(...); /*Opera*/
background: -ms-linear-gradient(...); /*IE10+*/
background: linear-gradient(...); /*W3C standards*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#color', endColorstr='#color',GradientType=0); /*IE6-9*/
Take a look at CSS3 Please. I personally like their indentation style.
.box-gradient {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, #444444, #999999); /* Firefox 16+, IE10, Opera 12.50+ */
}
As you can see, there is no -ms- prefix needed since IE10 supports the W3C syntax right away. Please make sure that you use the correct W3C syntax for linear-gradient()!
If you are using firefox as a browser. then you may want to use the addon called colorzilla. It is a nice tool that comes with options like Color picker, Eye Dropper, Pallette browser, CSS gradient generator, web page DOM code Analyzer , inspect Last element as well as zoom.
However you can generator css gradient'sat the folllowing link:
http://www.colorzilla.com/gradient-editor/

Adding gradient to element breaks CSS functionality in IE

I am working on a CSS-based drop-down menu. It works fine until I add gradient to elements. Than something breaks in IE and when I hover over <li> items in sub-menu the menu box disappears.
Here's the code I use to add gradient and make it cross-browser compatible:
background-color: #c1ddf4; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c1ddf4', endColorstr='#ffffff', GradientType=0); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c1ddf4), color-stop(100%, #ffffff));/* for webkit browsers */
background: -moz-linear-gradient(top, #c1ddf4, #ffffff); /* for firefox 3.6+ */
background-image: -o-linear-gradient(#c1ddf4, #ffffff);
Please see the following examples:
OK (without gradient) vs. NOT OK (with gradient)
The IE filter will break certain functionality when applied to elements. My suggestion is to use a horizontally tiled gradient image for IE, either by using a CSS hack, an IE-only style sheet, or targeting it using Modernizr.js.
The truly proper way would be to use Modernizr, then write this CSS:
.no-cssgradients li {
background: url(gradient.png) repeat-y;
}
That way, any browser that doesn't support CSS gradients (not just IE) will get served the image instead.

How to convert a multi-stop css3 gradient into an image?

I have a multistop gradient created with colorzilla that I have successfully gotten to work as the background of my website. It works perfectly for firefox, chrome, and IE9. For IE7 and below, it only shows a white background, which is acceptible but not preferable, and to be frank, going back 2 generations, I am not worried about it. However, IE8 only shows a gradient from the first color to the last color, no stops in the middle, which would normally get rid of the middle color, which was white in my case. For the purposes of making it somewhat better, I changed it so the white would be the last color of that gradient, but it is by no means a perfect suggestion.
The solution, to me, appears to be converting my already created multistop gradient from the css code it is in into an image that I can repeat endlessly as necessary, as was traditionally done before the modern era of css gradients. However, I have been unable to find any sort of tool or code that would allow me to do this for a given height and width. Does anyone know of any tool, preferably free, that would satisfy these needs? For the purpose of this question, the gradient code I am using is the following:
background: #72b4f9; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcyYjRmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iIzU3YzE0ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzOTc3MzEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #72b4f9 0%, #ffffff 25%, #ffffff 45%, #57c14f 96%, #397731 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#72b4f9), color-stop(25%,#ffffff), color-stop(45%,#ffffff), color-stop(96%,#57c14f), color-stop(100%,#397731)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #72b4f9 0%,#ffffff 25%,#ffffff 45%,#57c14f 96%,#397731 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #72b4f9 0%,#ffffff 25%,#ffffff 45%,#57c14f 96%,#397731 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #72b4f9 0%,#ffffff 25%,#ffffff 45%,#57c14f 96%,#397731 100%); /* IE10+ */
background: linear-gradient(top, #72b4f9 0%,#ffffff 25%,#ffffff 45%,#57c14f 96%,#397731 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A2CEFB', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
You may want to try CSS3Pie http://css3pie.com it is a quick/free solution for IE7/IE8
Or create a SVG image using the Gradient Background Maker
http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
Then find a way to import to photoshop
Photoshop always works for me. Im sure you could use GIMP though. A gradient dialog in any image program generally has the same sliders and attributes thet the css generator you used would. You should be bale to create a file at the canvas size you want then essentially use the gradient tool's dialog to set the same settings. For more on that ask on SuperUser or on a forum for users of the app you go with.
Im not aware of an app that will convert the css to an image.
I ended up finding a website that did essentially what I wanted at http://gradcolor.com/. I was able to create multiple gradients at a specific size, and the website created the file for me to download and upload to the website. Thank you everyone for your suggestions, as they led to me finding this.

Resources