Css
border-bottom: 1px solid silver;
background-color: #000;
background: rgb(51,51,51); /* Old browsers */
background: -moz-linear-gradient(top, rgba(51,51,51,1) 0%, rgba(153,153,153,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,51,51,1)), color-stop(100%,rgba(153,153,153,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(51,51,51,1) 0%,rgba(153,153,153,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(51,51,51,1) 0%,rgba(153,153,153,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(51,51,51,1) 0%,rgba(153,153,153,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(51,51,51,1) 0%,rgba(153,153,153,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#999999',GradientType=0 ); /* IE6-9 */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
Chrome and FireFox Output:
I.E. Output:
What is the problem about this? I cant find any think. How can I fix it.
Thanks.
The filter is the problem:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#999999',GradientType=0 ); /* IE6-9 */
Using a filter to provide a background gradient will make border-radius ineffective. So it's either the round corners or the fancy background on IE9. I'm sorry. :)
... just kidding. You can use another box shadow!
box-shadow: inset 0 -1em 1em -0.5em rgba(0, 0, 0, 0.8);
Adjust that until you get something that looks like the gradient.
border-radius is only supported on IE9+
Refer to caniuse.com for future browser compatibility info:
http://caniuse.com/#search=border-radius
.round {
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 12px;
/* Firefox 1-3.6 */
-moz-border-radius: 12px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 12px;
}
Border Radius is not supported on IE 7 & 8.
You can still have both border-radius and linear-gradients in IE 7 & 8 by using PIE.HTC - Progressive Internet Explorer HTML Component. It also supports gradients. So not use filter.
Related
i've this css class:
.defaultActionButton {
height: auto;
padding-top: 5px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
white-space: normal;
border: 1px solid #3079ed;
border-radious: 2px;
font-size: 13px;
color: white;
font-weight: bold;
text-align: center;
background: #4d90fe; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkOTBmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZDg3ZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #4d90fe 0%, #4d87ed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4d87ed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4d90fe 0%,#4d87ed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4d90fe 0%,#4d87ed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4d90fe 0%,#4d87ed 100%); /* IE10+ */
background: linear-gradient(to bottom, #4d90fe 0%,#4d87ed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d90fe', endColorstr='#4d87ed',GradientType=0 ); /* IE6-8 */
<!--[if gte IE 9]>
filter: none;
<![endif]-->
}
This class is loaded by a GWT CssResource:
interface Common extends CssResource {
//cut
String defaultActionButton();
//cut
}
applied with this line:
loginButton.addStyleName(Styles.INSTANCE.common().defaultActionButton());
This works correctly with Chome, Firefox and IE9:
but with IE8 this style is not applied and the button is ugly:
(border-radius is not supported by IE8, but it's not a problem).
By the way, copying the css style class to a plain HTML file that contains only a simple button, also IE8 displays it well:
How can I have the same result "inside" GWT?
Thanks in advance
I did it in my project and it's working in IE8.
You have to write following line in your CSS.
border-collapse: separate !important;
I tried to use border radius with linear gradients in IE-9, but it's not working together. I use specail filter for IE. Without gradient its working. I spent much time but could't understand the reason. button.new {
background: -moz-linear-gradient(#00BBD6, #EBFFFF);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#00BBD6), to(#EBFFFF));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBD6', endColorstr='#EBFFFF');
padding: 3px 7px;
color: #333;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #666;
}
<form action="">
<p><button class="new">Новая кнопка</button></p>
</form>
jsfiddle
You can see working example here I have problem also this menu and red button but i use example above to keep my code short. I also tried to use CSS3pie for Wordpress to make my css3 working in IE 7-8 with special code for Word Press function php but it doesn't work too. Any ideas will be greatly appreciated.
You can use this CSS:
background: rgb(0,187,214); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYmJkNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(0,187,214,1) 0%, rgba(235,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,187,214,1)), color-stop(100%,rgba(235,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,187,214,1) 0%,rgba(235,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,187,214,1) 0%,rgba(235,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,187,214,1) 0%,rgba(235,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,187,214,1) 0%,rgba(235,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00bbd6', endColorstr='#ebffff',GradientType=0 ); /* IE6-8 */
and for IE9 don't forget to add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
For rounded corners in IE9 you can add this:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
I have a problem I'd like to solve without JavaScript-preloading. The 'jumbotron' or banner at the top of the page consists of the background gradient overlaid with an alpha masked image.
When the page below loads, the gradient background is visible for a fraction of a second before the image loads (Chrome 23 on OS/X -- with empty browser cache):
http://criticue-staging.herokuapp.com
The image is pretty small; I've tried using :before to preload the image but it doesn't seem to work.
Here's the CSS for the jumbotron:
.jumbotron {
background: #550074; /* Old browsers */
background-image: url(/images/jumbotronbg.png), -moz-linear-gradient(45deg, #550074 14%, #CC26A7 82%); /* FF3.6+ */
background-image: url(/images/jumbotronbg.png), -webkit-gradient(linear, left bottom, right top, color-stop(14%,#550074), color-stop(82%,#CC26A7)); /* Chrome,Safari4+ */
background-image: url(/images/jumbotronbg.png), -webkit-linear-gradient(45deg, #550074 14%,#CC26A7 82%); /* Chrome10+,Safari5.1+ */
background-image: url(/images/jumbotronbg.png), -o-linear-gradient(45deg, #550074 14%,#CC26A7 82%); /* Opera 11.10+ */
background-image: url(/images/jumbotronbg.png), -ms-linear-gradient(45deg, #550074 14%,#CC26A7 82%); /* IE10+ */
background-image: url(/images/jumbotronbg.png), linear-gradient(45deg, #550074 14%,#CC26A7 82%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#550074', endColorstr='#CC26A7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
Is there anything that can be done, preferably without JavaScript preloading?
Thank you so much in advance.
UPDATE: I also tried embedding the images but it doesn't do the trick:
Here's the full CSS:
.jumbotron {
background-color: #310046;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAUCAYAAABF5ffbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAINJREFUeNpcj8EJACEMBMOSAgQR/Nt/DVeR4Et8HhtYCBFkk6jD6Gutr/duWntvQ2vNzjkxYLLHvdfmnDFksscYw957MWSyBwtyuHUAcTIb4mS2i6OnMcyNuKiO4Vkdub06BlMc/l8XUB2ZToaYvMn06sj06ki2Z0fVqI7BrI6sfwEGADdYfUa4U86zAAAAAElFTkSuQmCC),
-moz-linear-gradient(45deg, #550074 14%, #CC26A7 82%); /* FF3.6+ */
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAUCAYAAABF5ffbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAINJREFUeNpcj8EJACEMBMOSAgQR/Nt/DVeR4Et8HhtYCBFkk6jD6Gutr/duWntvQ2vNzjkxYLLHvdfmnDFksscYw957MWSyBwtyuHUAcTIb4mS2i6OnMcyNuKiO4Vkdub06BlMc/l8XUB2ZToaYvMn06sj06ki2Z0fVqI7BrI6sfwEGADdYfUa4U86zAAAAAElFTkSuQmCC),
-webkit-gradient(linear, left bottom, right top, color-stop(14%,#550074), color-stop(82%,#CC26A7)); /* Chrome,Safari4+ */
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAUCAYAAABF5ffbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAINJREFUeNpcj8EJACEMBMOSAgQR/Nt/DVeR4Et8HhtYCBFkk6jD6Gutr/duWntvQ2vNzjkxYLLHvdfmnDFksscYw957MWSyBwtyuHUAcTIb4mS2i6OnMcyNuKiO4Vkdub06BlMc/l8XUB2ZToaYvMn06sj06ki2Z0fVqI7BrI6sfwEGADdYfUa4U86zAAAAAElFTkSuQmCC),
-webkit-linear-gradient(45deg, #550074 14%,#CC26A7 82%); /* Chrome10+,Safari5.1+ */
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAUCAYAAABF5ffbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAINJREFUeNpcj8EJACEMBMOSAgQR/Nt/DVeR4Et8HhtYCBFkk6jD6Gutr/duWntvQ2vNzjkxYLLHvdfmnDFksscYw957MWSyBwtyuHUAcTIb4mS2i6OnMcyNuKiO4Vkdub06BlMc/l8XUB2ZToaYvMn06sj06ki2Z0fVqI7BrI6sfwEGADdYfUa4U86zAAAAAElFTkSuQmCC),
-o-linear-gradient(45deg, #550074 14%,#CC26A7 82%); /* Opera 11.10+ */
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAUCAYAAABF5ffbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAINJREFUeNpcj8EJACEMBMOSAgQR/Nt/DVeR4Et8HhtYCBFkk6jD6Gutr/duWntvQ2vNzjkxYLLHvdfmnDFksscYw957MWSyBwtyuHUAcTIb4mS2i6OnMcyNuKiO4Vkdub06BlMc/l8XUB2ZToaYvMn06sj06ki2Z0fVqI7BrI6sfwEGADdYfUa4U86zAAAAAElFTkSuQmCC),
-ms-linear-gradient(45deg, #550074 14%,#CC26A7 82%); /* IE10+ */
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAUCAYAAABF5ffbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAINJREFUeNpcj8EJACEMBMOSAgQR/Nt/DVeR4Et8HhtYCBFkk6jD6Gutr/duWntvQ2vNzjkxYLLHvdfmnDFksscYw957MWSyBwtyuHUAcTIb4mS2i6OnMcyNuKiO4Vkdub06BlMc/l8XUB2ZToaYvMn06sj06ki2Z0fVqI7BrI6sfwEGADdYfUa4U86zAAAAAElFTkSuQmCC),
linear-gradient(45deg, #550074 14%,#CC26A7 82%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#550074', endColorstr='#CC26A7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
text-align: center;
position: relative;
margin: 0;
padding: 30px 0 40px 0;
height: 300px;
-webkit-box-shadow: inset 0px -3px 3px #211;
-moz-box-shadow: inset 0px -3px 3px #211;
box-shadow: inset 0px -3px 3px #211;
margin-bottom: 30px;
}
You can set a navbar-inner to a height of 48px. The height of the image won't change, and you set the padding-top and padding-bottom as 10px. Will prevent resizing.
I'm having a bit of an issue with IE9 and just can't figure it out, I'm creating a button in CSS with a linear gradient, it displays perfectly in Chorme, Firefox and Safari but just not in IE9
http://ubizzo.co.uk/img/ie9.png
http://ubizzo.co.uk/img/ch-fi-sa.png
First image link is IE9, second image link is every other browser, the only way I can get it work is if I add float:left or float:right in the css as below but then that obviously screws up the layout, I've tried to use float:none but that doesn't work either, I've tried this in a blank html file just to rule out any conflicting css but still doesn't work :-s
.purchase {
margin-top: 5px;
display: block;
width: auto;
}
.purchase a {
margin-top: 10px;
margin-bottom: 10px;
padding: 5px 10px;
cursor: pointer;
border: none;
color: #fff;
line-height: 1em;
width: auto;
**float: left;**
border-image: initial;
text-align: center;
border: solid 1px #189199;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: -moz-linear-gradient(top, #19d7e3, #12A4B3);
background: -webkit-gradient(linear, left top, left bottom, from(#19d7e3), to(#12A4B3));
background: -moz-linear-gradient(top, #19d7e3, #12A4B3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#19d7e3', endColorstr='#12A4B3');
}
.purchase a:hover {
background: -moz-linear-gradient(top, #12A4B3, #19d7e3);
background: -webkit-gradient(linear, left top, left bottom, from(#12A4B3), to(#19d7e3));
background: -moz-linear-gradient(top, #12A4B3, #19d7e3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#12A4B3', endColorstr='#19d7e3');
color: #ffffff;
}
Thanks for any help,
Adam.
http://jsfiddle.net/gdmP8/ - notice that the button only displays once you've addded float:left/right
apply this css thi will work in all browser i have check in chrome, Firefox, safari, opera, ie-7, ie-8, ie-9
background: #12a4b3; /* Old browsers */
background: -moz-linear-gradient(top, #12a4b3 0%, #19d7e3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#12a4b3), color-stop(100%,#19d7e3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #12a4b3 0%,#19d7e3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #12a4b3 0%,#19d7e3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #12a4b3 0%,#19d7e3 100%); /* IE10+ */
background: linear-gradient(top, #12a4b3 0%,#19d7e3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#12a4b3', endColorstr='#19d7e3',GradientType=0 ); /* IE6-9 */
You'll have this same problem in Opera, why don't you just stick to a simple button image rollover for IE?
Float problems in IE 9 are usually due to a bad header. Check with this one :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Taken from IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly
(not sure if duplicate)
And you probably should use the now standard linear-gradient (or at least -ms-linear-gradient and -o-linear-gradient instead of just using moz and webkit specific gradients).
I want to apply a gradient background color to my div.
For IE I have used the property:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fad59f', endColorstr='#fa9907')
It's working in IE9 and IE8. But not working in IE7.
What should I do to see in IE?
Here is a JSFiddle: http://jsfiddle.net/xRcXL/2/
Having seen your fiddle in the comments the issue is quite easy to fix. You just need to add overflow:auto or set a specific height to your div. Live example: http://jsfiddle.net/tw16/xRcXL/3/
.Tab{
overflow:auto; /* add this */
border:solid 1px #faa62a;
border-bottom:none;
padding:7px 10px;
background:-moz-linear-gradient(center top , #FAD59F, #FA9907) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear, left top, left bottom, from(#fad59f), to(#fa9907));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fad59f, endColorstr=#fa9907);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fad59f, endColorstr=#fa9907)";
}
You didn't specify a GradientType:
background: #f0f0f0; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#eeeeee 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffffff 0%,#eeeeee 100%); /* W3C */
source: http://www.colorzilla.com/gradient-editor/
This should work:
background: -moz-linear-gradient(center top , #fad59f, #fa9907) repeat scroll 0 0 transparent;
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#fad59f), to(#fa9907));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #fad59f, #fa9907);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fad59f, endColorstr=#fa9907);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fad59f, endColorstr=#fa9907)";
Otherwise generate using the following link and get the code.
http://www.colorzilla.com/gradient-editor/