Adding gradient to element breaks CSS functionality in IE - css

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.

Related

Why is text using my custom colour gradient CSS class not displaying properly on mobile?

Visible Issue: http://stage.herotheapp.com/brand-assets
Problem seen on: Responsive / mobile view
I recently added a CSS class that I found on a forum to enable the change of text colour to a four-point gradient.
The colour gradient works well, but it has broken how the rest of the text behaves. Most visible on mobile - the text does not line-break cleanly (if at all), line-height is not consistent with theme h1/h2/h3 etc. presets, and is generally illegible.
In a perfect world, I only want the gradient colour override, much like using a rule so that the rest of the text settings apply the global theme / elementor text styling, but I couldn't find a rule for gradients.
I have tried word-break and word-wrap rules but neither have worked.
Here is the CSS applied:
.rainbowtxt {
background-image: -webkit-linear-gradient(left, #5cb6ea, #5245fc, #aa41b3, #ff6d9f); /* For Chrome and Safari */
background-image: -moz-linear-gradient(left, #5cb6ea, #5245fc, #aa41b3, #ff6d9f); /* For old Fx (3.6 to 15) */
background-image: -ms-linear-gradient(left, #5cb6ea, #5245fc, #aa41b3, #ff6d9f); /* For pre-releases of IE 10*/
background-image: -o-linear-gradient(left, #5cb6ea, #5245fc, #aa41b3, #ff6d9f); /* For old Opera (11.1 to 12.0) */
background-image: linear-gradient(to right, #5cb6ea, #5245fc, #aa41b3, #ff6d9f); /* Standard syntax; must be last */
color:transparent;
-webkit-background-clip: text;
background-clip: text;
word-wrap:break-all;
overflow-wrap: inherit;
}
It's probably an easy fix, but beyond my WP skillset unfortunately.
This has nothing to do with WordPress. linear-gradient() is a css property that create a gradient image, we couple it with the background-clip property to mask it to the text. Finally we change the font color to transparent to show the gradient image. Those are the only required properties to change the text to a gradient color.
linear-gradient() has an overall support, no need for browsers prefixes (eg: -webkit-, -moz-, -ms- ...).
background-clip has an overall support but require the -webkit- prefixes for support on all browsers webkit engine based. (All beside Firefox and Edge).
.🌈,
.rainbow {
background: linear-gradient(to left, #5cb6ea, #5245fc, #aa41b3, #ff6d9f)!important;
background-clip: text!important;
-webkit-background-clip: text!important;
color: transparent!important;
}
<h1 class="🌈 rainbow">Lorem Ipsum Dolor</h1>

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/

background needs to have gradient

I am totally a noob to css and I have a need to add gradient to the background image on the top of the page.
here is what I tried but obviously its not working as background overwriting the value. How can I fix it
I have a background image and I need a gradient on top of it. Here is my css
body.test {
/* Mozilla: */
background: -moz-linear-gradient(top, #00FF00, #000000);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#00FF00), to(#000000));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#00FF00', EndColorStr='#000000', GradientType=0);
background: url(../mybackground.png);
}
TEST HERE
http://jsfiddle.net/PsDuF/
First, have a look at this tool for creating CSS gradients.
change
background: url(../mybackground.png);
to
background-image: url(../mybackground.png);
background is the shorthand syntax. Alternatively, you could combine the image with your other syntax:
background: url(../mybackground.png), -moz-linear-gradient(top, #00FF00, #000000);
In your case, you are declaring background multiple times, so each time you declare it, you are over-riding the previous declaration.
When you declare multiple background in one declaration, the order you declare them will change the stacking order. JSBIN example using images and mozilla background gradients: jsbin.com/abumuz/1
Note that if you want the gradient on top of the image, but still want to see the image, you need to make sure your gradient has alpha transparency.

CSS Gradient height for IE?

In the webkit and moz vendor specific properties for CSS gradients, you can specify the height of the gradient. Is there something similar for IE?
For example:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#ffffff'); /* IE */
background: -webkit-gradient(linear, left top, left 3, from(#aaaaaa), to(#ffffff)); /* webkit */
background: -moz-linear-gradient(top, #aaaaaa, #ffffff 3px); /* firefox */
How can I specify a 3px high gradient in IE?
It's a hack, but you could create a duplicate div with a defined height of 3px and apply the IE filter to that.
Or you could avoid the IE code bloat, and accept that IE will have a different aesthetic than more capable browsers (square corners included).

Resources