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).
Related
I want to use opacity only for this gradient, not for text color. Here is code :
.large-thumb {
position: absolute;
bottom: 15px;
z-index: 99;
padding: 5px 5px 20px;
color: #fff;
background: #323232; /* Old browsers */
background: -moz-linear-gradient(top, #323232 0%, #858585 50%, #E7E7E7 100%) ; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#323232), color-stop(50%,#858585), color-stop(100%,#E7E7E7)) ; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #323232 0%,#858585 50%,#E7E7E7 100%) ; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #323232 0%,#858585 50%,#E7E7E7 100%) ; /* Opera 11.10+ */
background: -ms-linear-gradient(top, #323232 0%,#858585 50%,#E7E7E7 100%) ; /* IE10+ */
background: linear-gradient(to bottom, #323232 0%,#858585 50%,#E7E7E7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#323232', endColorstr='#E7E7E7',GradientType=0 ); /* IE6-9 */
width: 291px;
background:transperent;
margin-left: 20px;
margin-left: 20px;
padding-bottom: 20px;
bottom: 31px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
border-radius:25px;
}
For demo follow link demo blog
basically yout text color is what it is becouse at .large-thumb span.xpose_metayou set it at #00000 insteed of #000000(6 numbers) or #000 (3 numbers).
There's no opacity around on your project.
And, if possible, next time try to extract the part of the code that it's wrong (html and css) and give it to us in your question, even better if on a jsfiddle (nice info if you don't know jsfiddle here)
Don't expect people solving your problems like: "here is my web, this is not working, fix it for me... ah, don't even expect a single please or even ty in my question"
(and yes, I'm so stupid that still I try to help)
I have below code to set the background image to button.
CSS:
input.hButton{
background-image: url('images/hbutton.png');
height: 21px;
width: 110px;
text-align: center;
color: #696969;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
display:block;
}
HTML:
<input type="button" class="hButton" id="customize" value="Customize Table"></input>
Output:
Here when the button text is too long, button is split. How can I get it fixed?
Add
background-size: 100% 100%;
or find your perfect setting here:
http://www.css3.info/preview/background-size/
Btw in your case should be better:
use a gradient
use border-radius for the upper corners
use a thin border
replace your css code background-image property with this one :
background-image: url('images/hbutton.png') top repeat-y;
Hi please use the pure css code.. and remove your older method..
Fiddle:http:http://jsfiddle.net/nikhilvkd/RZ4vV/1/
What's Here?
1-Gradient
2-Border radius
3.border top,right and left
.hButton{
border:solid 1px #0e4f85;
border-bottom:none;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
padding:3px;
color:#696969;
background: #f7f5f5; /* Old browsers */
background: -moz-linear-gradient(top, #f7f5f5 0%, #e0dede 50%, #e0dede 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f5f5), color-stop(50%,#e0dede), color-stop(99%,#e0dede)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* IE10+ */
background: linear-gradient(to bottom, #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f5f5', endColorstr='#e0dede',GradientType=0 ); /* IE6-9 */
}
I am trying to make an IE8 compatible print CSS, however the browser is creating a large white div in place of what should be content.
In the regular CSS I have the following on the problem div:
.content-gradient {
background: #contentbg;
background: -moz-linear-gradient(top, rgba(45,45,45,0.8) 0%, rgba(45,45,45,1) 25%, rgba(45,45,45,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(45,45,45,0.8)), color-stop(25%,rgba(45,45,45,1)), color-stop(100%,rgba(45,45,45,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(45,45,45,0.8) 0%,rgba(45,45,45,1) 25%,rgba(45,45,45,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(45,45,45,0.8) 0%,rgba(45,45,45,1) 25%,rgba(45,45,45,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(45,45,45,0.8) 0%,rgba(45,45,45,1) 25%,rgba(45,45,45,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(45,45,45,0.8) 0%,rgba(45,45,45,1) 25%,rgba(45,45,45,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc2d2d2d', endColorstr='#2d2d2d',GradientType=0 ); /* IE6-9 */
}
This is a LESS mixin that I am applying to the div, then in my print.css I am attempting to clear this by using: background: #fff !important;
When I print preview, I see a grey background with black text. When I print the file, I get a solid white div. I have zero clues as to why this is being done.
I have a bunch of global stlyes I apply to clear the usual culprits:
#media print {
* {
overflow: visible !important; // fixes Firefox print CSS overflow bug
}
// Reset the CSS
body, html * {
background: #fff !important;
color: #000 !important;
padding: 0 !important;
position: static !important;
float: none !important;
}
// continue with the rest of the print css
}
This stylesheet has already been a nightmare matching FF & Chrome. Any help is much appreciated.
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" />