I've come across a possible css/browser bug that I can't quite figure out. Simply put, I have the following scenario set up:
.my-class {
background: #66c28f; /* Old browsers */
background: -moz-linear-gradient(left, #66c28f 0%, #0e9498 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #66c28f 0%,#0e9498 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #66c28f 0%,#0e9498 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66c28f', endColorstr='#0e9498',GradientType=1 ); /* IE6-9 */
}
<body class="my-class">
</body>
As you can see, there are multiple background properties added for backwards compatibility purposes. The problem is, when I have more than one background defined, sometimes nothing shows up at all. I'd say 1 out of every 3 times I load my page, the background doesn't show. It seems to be all or nothing. However, the second I resize the page, or select the body and toggle the background color on and off in developer tools, the colors show immediately (and yes, the styles show as working properly in developer tools- see screenshot below). I am using the most recent stable version of Chrome in my tests.
I am fairly certain it's not an issue with the body not having 100% height or anything like that. The stylesheet is also the last stylesheet in the head section. When I remove all but one background property, it works 100% of the time.
Any ideas why this would happen in a modern browser? Am I not allowed to provide fallback background styles?
The screenshot below shows the developer tools results when the background is not being displayed (but seems to be working properly in dev tools).
Note: This seems to be a similar issue as this 2009 post, but no explanation was given: background color doesn't always show up
Once i had a problem with this, but try to give height:100% to your <body> and <html> or sometimes try min-height:100% to your <body>.
In this case try again with the following css code:
html, .my-class {
height: 100%;
background: #66c28f; /* Old browsers */
background: -moz-linear-gradient(left, #66c28f 0%, #0e9498 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #66c28f 0%,#0e9498 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #66c28f 0%,#0e9498 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66c28f', endColorstr='#0e9498',GradientType=1 ); /* IE6-9 */
}
Check this question to know more about this problem.
Related
Some thing like this website where you can pick the middle color type.
https://www.w3schools.com/colors/colors_mixer.asp
For example, a color that mixes red and green with 80% opacity red and 20% green would come out with a color that is more red than green.
50-50 would come out with a color that is brown
and 20-80 would come out with a color more green than red.
use a tool like http://www.colorzilla.com/gradient-editor/, if you move the scales and change the colours and it should work, so in your case:
/* Permalink - use to edit and share this gradient:
http://colorzilla.com/gradient-
editor/#f93135+21,7fe87d+100,7fe87d+100 */
background: #f93135; /* Old browsers */
background: -moz-linear-gradient(top, #f93135 21%,
#7fe87d 100%, #7fe87d 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f93135
21%,#7fe87d 100%,#7fe87d 100%); /* Chrome10-
25,Safari5.1-6 */
background: linear-gradient(to bottom, #f93135
21%,#7fe87d 100%,#7fe87d 100%); /* W3C, IE10+, FF16+,
Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#f93135',
endColorstr='#7fe87d',GradientType=0 ); /* IE6-9 */
I have a pretty elementary knowledge of HTML, CSS, and Bootstrap. So please forgive me if any of the terminology is wrong.
This is the page: http://jowoco.com/stackoverflow/scheduletech.html
On large monitors (resolutions > 1500px) or zoomed out screens (ctrl/cmnd + "-"), you'll see the colors just stop. Ideally the angles would continue, but at the very least it would be nice just to have the colors continued to left and right of the screen as solids (see mock).
I've attached a screenshot of what I think might work as a fix (not sure if it's a div or span), but not sure how to do it in actual practice.
Thanks so much in advance for your help and time,
Wojo
There are a few ways to do this...but the easiest by far is to create a linear gradient background for the page, rather than straight white.
This would allow the bar to go from edge to edge even if the main body of the page stops.
Unfortunately, you have not given quite enough information for me to simply hand you the code for it:
What is the angle of the blue stripe?
Does the geometry of your page change when the browser window is resized? Specifically, does that blue banner move at all?
Which browsers do you need to be able to support?
If you have answers to these questions, feel free to drop them here, and I will update this answer.
If you would rather take a crack at the code yourself, you can generate is at Colorzilla. The resulting code will look something like this:
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(45deg, #ffffff 50%, #91b5b5 50%, #91b5b5 71%, #ffffff 71%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(50%,#ffffff), color-stop(50%,#91b5b5), color-stop(71%,#91b5b5), color-stop(71%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* IE10+ */
background: linear-gradient(45deg, #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
This code covers all browsers between Firefox, earlier and more recent Chrome, and even down to IE 6-9.
The code, generally, looks far worse than it is... for the bulk of the code, you can directly set the angle at which the blue bar should appear; the exceptions being IE6-9 and earlier versions of Chrome.
Earlier versions of Chrome are probably nearly non-existent, since Chrome generally auto-updates itself... but the earlier Internet Explorer, as always, can be problematic.
I have a classic background image gradient, fading out to a given background colour, see http://fiddle.jshell.net/7msZ5/ for the code.
The problem is that, when viewed on Mobile Safari (version 5 on iPhone 4), the image doesn't successfully blend into the background colour, there's a visible line at the bottom where the image runs out and the background image should take over, view http://fiddle.jshell.net/7msZ5/show/ to see the effect.
I would suggest extending the gradient image so that it will get to the gray earlier (so the gray is your exact desired shade instead of something that is 1 shade off), or using
-webkit-gradient (some older browsers may not support it....)
example:
background: url(http://i.imgur.com/ajzo0.jpg) rgb(145,127,103); /* Old browsers (in case they don't support webkit, use the original image. */
background: -moz-linear-gradient(top, rgba(145,127,103,1) 0%, rgba(236,235,233,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(145,127,103,1)), color-stop(100%,rgba(236,235,233,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(145,127,103,1) 0%,rgba(236,235,233,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(145,127,103,1) 0%,rgba(236,235,233,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(145,127,103,1) 0%,rgba(236,235,233,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(145,127,103,1) 0%,rgba(236,235,233,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#917f67', endColorstr='#ecebe9',GradientType=0 ); /* IE6-9 */
yes, it is a lot more code, but it does get the work done.
In my current project, I've used CSS3 gradient in my CSS file. To support IE browser, I've used filter property as well. Following is my code:
.card.active .content.back {
background: #333; /* Old browsers */
background: -moz-linear-gradient(top, #333 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #333 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #333 0%,#0e0e0e 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #333 0%,#0e0e0e 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */
}
But when I use the filter property in the above code, the border-radius property is not working. If anyone know a fix for this, please share it with me.
Thanks
You can use PIE.htc for your desired results.
PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.
PIE currently adds full or partial support to IE 6 through 8 for the following CSS3 features:
border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image
In addition, PIE adds support for border-image and linear-gradient to IE 9, which already supports the other features natively.
http://css3pie.com/
or see the demo:- http://jsfiddle.net/ZxzSs/1/
for support PIE.htc you have to keep the PIE.htc file on your root folder than will work for your website....
You should be able to apply the gradient to a child of the element with the rounded corners. I don't have access to IE9 on my home machine but this should work:
.element {
background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */
border-radius: 10px;
}
.element .ie-helper {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0 );
}
HTML:
<div class="element">
<!--[if lt IE 9]><div class="ie-helper"><![endif]-->
<p>Your content with gradient and rounded corners...</p>
<!--[if lt IE 9]></div><![endif]-->
</div>
If the page is viewed in IE10+ or other browsers, both the gradient and rounded corners will apply to same element (assuming you bring back the vendor-specific prefixes from your code sample). The inner div.ie-helper will only render on IE9 and below because of the conditional comments used.
This isn't ideal but would get the job done, but since you're after such a wide range of browsers to be fully supported this is a reasonable workaround
I know that Internet Explorer has some proprietary extensions so that you can do things like create divs with a gradient background. I can't remember the element name or it's usage. Does anyone have some examples or links?
The code I use for all browser gradients:
background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;
You will need to specify a height or zoom: 1 to apply hasLayout to the element for this to work in IE.
Update:
Here is a LESS Mixin (CSS) version for all you LESS users out there:
.gradient(#start, #end) {
background: mix(#start, #end, 50%);
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="#start~", EndColorStr="#end~")";
background: -webkit-gradient(linear, left top, left bottom, from(#start), to(#end));
background: -webkit-linear-gradient(#start, #end);
background: -moz-linear-gradient(top, #start, #end);
background: -ms-linear-gradient(#start, #end);
background: -o-linear-gradient(#start, #end);
background: linear-gradient(#start, #end);
zoom: 1;
}
Look at the custom CSS filters IE can handle
http://msdn.microsoft.com/en-us/library/ms532847.aspx
The filter style should work for IE8 and IE9.
.gradientClass
{
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');
}
A significant gotcha when it comes to gradients in IE is that although you can use Microsoft's filters...
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE');
zoom:1;
...they kill clear type on any text covered by the gradient. Given that the purpose of gradients is normally to make the UI look better, that's a show stopper for me.
So for IE I use a repeating background image instead. If the background image css is combined with the gradient CSS for other browsers (as per Blowsie's answer), other browsers will ignore the background image in favour of the gradient css, so it will only end up applying to IE.
background-image: url('/Content/Images/button-gradient.png');
There are plenty of sites you can use to quickly generate a gradient background; I use this.
Great tool from Microsoft, allows you to examine colors real-time and generates CSS for all browsers:
http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html
/* IE10 */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(3, #B7B8BD));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Proposed W3C Markup */
background-image: linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
Just thought I'd add this useful link: http://css3please.com/
Shows how to get gradients working in all browsers.
Note that IE10 will support gradients as follows:
background: -ms-linear-gradient(#017ac1, #00bcdf);
Right from ScriptFX.com article:
<body bgcolor="#000000" topmargin="0" leftmargin="0">
<div style="width:100%;height:100%; filter: progid:
DXImageTransform.Microsoft.Gradient (GradientType=1,
StartColorStr='#FF006600', EndColorStr='#ff456789')">
Your page content goes in here ...... at the end of all the page content, you must close the <div> tag, immediately before the closing <body> tag.... as below
</div>
</body>
Try this:
.red {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
height: 0; /* gain layout IE5+ */
zoom: 1; /* gain layout IE7+ */
}
Two things I discovered while struggling with IE 9 gradient.
The -ms-filter did not work for me. I had to use simply filter.
I had to add height: 100% to my class for IE to use the gradient.
In my case I inserted it on header section
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
then in style section insert it
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#49708f', endColorstr='#293f50');
zoom: 1;