I have the following submit button in IE9:
The CSS I'm using is as follows:
.button,
input[type='button'],
input[type='submit'] {
text-decoration: none;
background: #eee;
color: #89a9d1;
padding: 4px 10px;
font-weight: bold;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fff', endColorstr='#eee')";
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
background: -moz-linear-gradient(top, #fff, #eee);
}
From what I understand on this page: http://www.colorzilla.com/gradient-editor/ this should work... I can't figure out where the blue is coming from. Using the IE developer toolbar if I deselect all styles that affect this element it still shows up looking like the image I've attached.
Does anyone have any suggestions on what could be causing this?
ColorZilla does not generate gradients with three-digit hexadecimal color values as they are interpreted differently within IE's filters (in fact, I believe they're invalid color strings). This discrepancy in your code is what's causing your gradient to appear blue in IE.
You need to expand the hex colors to six digits for them to be interpreted correctly:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#eeeeee')";
Related
I am facing an issue with CSS styles in ROR application in IE 9 and below versions.
It is displaying orange color (#ff5b09)when > IE 9 and also in firefox, but taking grey color (#666) for <= IE9.
I need to make the IE 9 and below versions also display the orange color (#ff5b09). Please suggest. I am new to ROR. appreciate any help on the same.
CSS is making use of filters.
Style related to it is as following:
.ui-sortable .lesson, .boxy-inner .block.lesson, .router .slider .lesson
{
background-color: #666;
background: -webkit-gradient(linear, left top, left bottom,
from(#ff5b09), to(#f93d1e));
background: -moz-linear-gradient(top, #ff5b09, #f93d1e);
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#ff5b09', EndColorStr='#f93d1e', GradientType=0);
}
background-color: #666;
Do you need this color(#666)?
if you don't then replace it with #ff5b09.
If you need it, then try this: put above statement at the end of all styles, some IE browser versions ignore all filters and gradients once they hit the background-color style. So, having it at the top could be causing issues.
I'm trying to combine a transparent CSS gradient and a background image, and fail gracefully in browsers that don't support the gradient.
I have this CSS, which works fine in Webkit browsers, but seems to be totally ignored by non-Webkit browsers (e.g. Firefox), which display a white background:
body {
height:100%;
-webkit-font-smoothing: subpixel-antialiased;
padding-top: 2%;
padding-bottom: 2%;
background: -webkit-gradient(linear, left top, right top,
from(rgba(0,0,0,0.4)), to(rgba(0,0,0,0.4)),
color-stop(0.03, rgba(0,0,0,0.2)),
color-stop(0.06, transparent),
color-stop(0.94, transparent),
color-stop(0.97, rgba(0,0,0,0.2))),
url(../img/myimg.jpg) repeat;
}
However, if I set background to:
background: url(../img/myimg.jpg) repeat;
instead, it works fine in Firefox. Shouldn't Firefox just ignore the -webkit-gradient part of the rule? How can I make this Firefox-friendly?
You should try to use the standard, unprefixed linear gradient syntax - this is now quite widely supported: IE10, chrome 26 (current is 27), firefox 16 (current is 20), opera 12.1 (the latest version). To support mobile browsers you'll additionally need the webkit-prefixed version.
Using your example gradient, the standard syntax is...
background: linear-gradient(to left,
rgba(0,0,0,0.4), rgba(0,0,0,0.0) 6%, rgba(0,0,0,0.0) 94%, rgba(0,0,0,0.4));
You can see this in a jsfiddle example.
If the value is invalid, firefox won't read anything after; here your background is ignored as -webkit is an unknown property value for firefox, so in your example, -webkit is an unknown value for firefox at first so it will skip that and move to next property in that class..Say for example
background: asadsa, url('http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif');
/* asadsa is invalid here, so firefox will skip to next property */
Demo
CSS
div {
background: asadsa, url('http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif');
---^---
/* Invalid Value For Property background */
height: 200px;
width: 300px;
border: 1px solid #f00;
}
Firefox doesn't just ignore "that part" of the rule. Firefox ignores the whole rule when it doesn't recognize a part of it.
This means you can specify several rules and Firefox will pick only those that it understands:
body {
height:100%;
-webkit-font-smoothing: subpixel-antialiased;
padding-top: 2%;
padding-bottom: 2%;
background: url(http://lorempixel.com/400/200/) repeat;
background: -webkit-gradient(linear, left top, right top,
from(rgba(0,0,0,0.4)), to(rgba(0,0,0,0.4)),
color-stop(0.03, rgba(0,0,0,0.2)),
color-stop(0.06, transparent),
color-stop(0.94, transparent),
color-stop(0.97, rgba(0,0,0,0.2))),
url(http://lorempixel.com/400/200/) repeat;
}
fiddle:
http://jsfiddle.net/yb5AE/
Firefox understands the first background rule, but not the second. Therefore the first one is used.
Webkit understands both and therefore the second one overwrites the first one, because it is declared "later", and so the second one is used.
My tables are causing problems in IE8. I cannot get the dividing borders in the table header to appear above the gradient (except for in one spot, which you can see in the image below). The borders appear fine in every other browser and even in IE8 Compatibility Mode. Any ideas on how to fix this? Here is a test site for everyone to see the applied code.
Here is the table header's CSS, but you can view the entire CSS file here:
.gridview th {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNTM4MyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzhmZDlmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
background-image: -webkit-linear-gradient(90deg, #005383 0%, #90d9ff 100%);
background-image: -moz-linear-gradient(90deg, #005383 0%, #90d9ff 100%);
background-image: -o-linear-gradient(90deg, #005383 0%, #90d9ff 100%);
background-image: -ms-linear-gradient(90deg, #005383 0%, #90d9ff 100%);
background-image: linear-gradient(90deg, #005383 0%, #90d9ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#90d9ff, endColorstr=#005383);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#90d9ff, endColorstr=#005383)";
background-color: #005383;
line-height: 18px;
vertical-align: top;
padding: 4px;
font-weight: bold;
text-align: center;
border-left: 1px solid #005580;
color: #fff;
}
I tried solving your problem but but could not. I see that this occurs in both IE8 and IE9 doc and browser mode. Not in IE 7 however. But when using only
background-image: url(data:image/.......);
the borders work in IE9...that only leaves IE 8 to solve. You can use IE7 and IE9 specific conditional commentsa to use above code(for IE9) and the
filter: progid:DXImageTransform.Microsoft
for IE7.
With regard to the problem in IE8, here is a similar post:
Table cell loses border when css gradient filter is applied in IE8
I found a fix, but I'm not very happy with it since it isn't valid HTML anymore...but this seems to fix the problem in older versions of IE:
<!--[if !IE]> -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- <![endif]-->
I showed this to my boss, he did not approve, so I am still looking for a solution!!!
Adding this to my css was a solution for me:
table {
border-collapse: separate;
}
None of the solutions I've searched on worked. For IE8, the background color only worked for the body table rows. Whenever I used a background color for the header row or header column, the borders would disappear.
What worked for me was defining a background color for the table itself. No background color for header. Each body table row would need to have a background color defined to overwrite the color defined on the table (if needed).
I have been pulling my hair out trying to get the shadows to work on IE... They are working fine in chrome, safari, and firefox! Does someone have experience with this subject? I put the site up so you can see the full code and output.
Test Site
I am using lesscss, so maybe that is my issue? I hope not!!! I am also using the IE CSS3 Fix, ie-css3.htcThe code I am using is as follows... I was attempting to do this without the htc, but with no luck.. at least the htc got my background gradients to work in IE... before it was showing only blue-black, the default Microsoft background gradient colors.
predefine.less
.RUNgradient(#COLOR: #CLR1){
#CLRL:lighten(#COLOR, 10%);
#CLRD:darken(#COLOR, 10%);
background-color: #CLRL;
background-repeat:repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#CLRL), to(#CLRD));
background-image: -moz-linear-gradient(top, #CLRL, #CLRD);
background-image: -ms-linear-gradient(top, #CLRL, #CLRD);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #CLRL), color-stop(100%, #CLRD));
background-image: -webkit-linear-gradient(top, #CLRL, #CLRD);
background-image: -o-linear-gradient(top, #CLRL, #CLRD);
background-image: linear-gradient(top, #CLRL, #CLRD);
behavior: url(css/ie-css3.htc);
}
styles.less
div.wrapper{
width:500px;
margin:25px auto;
padding: 10px 25px;
text-align:center;
.RUNgradient;
.RUNshadow;
p{
font:24px #HEADERFONT;
color:#ffffff;
.RUNtextshadow;
}
}
Filters are the answer! Almost...
For the gradient,
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="#CLRL~", EndColorStr="#CLRD~")";
And for the shadows,
filter: ~"progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR~", Strength="#STR~")";
Only thing left is changing the direction in a way to have the shadow visible all around the element, not just to one side.
Solution
After researching Microsoft Filters, I figured out how to get a similar effect. The corners are a bit rough for my liking, but this is MUCH closer than before!
This is the shadow filer I used...
.RUNshadow(#BLURRING:10px){
#SCLR:#111111;
#DIR:225;
#DIR2:45;
#DIR3:135;
#DIR4:315;
#STR:4;
box-shadow: 0px 1px #BLURRING #111111;
-moz-box-shadow: 0px 1px #BLURRING #111111;
-webkit-box-shadow: 0px 1px #BLURRING #111111;
filter: ~"progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR2~", Strength="#STR~")
progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR~", Strength="#STR~")
progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR3~", Strength="#STR~")
progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR4~", Strength="#STR~")";
}
I have been pulling my hair out trying to get the shadows to work on IE... They are working fine in chrome, safari, and firefox! Does someone have experience with this subject?"
Yeah, that's normal. Most people don't bother. Remember to ask yourself, Do Websites Need To Look Exactly The Same In Every Browser?
If you really want this, you'll have to use the gradient filter for IE. Add the following style to your RUNgradient class:
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="#CLRL~", EndColorStr="#CLRD~")";
For both of them you can use IE filters.
You can use the gradient filter for gradients and the Shadow filter for shadows. The gradient filter works very well, the shadow filter looks really bad.
You can read in the documentation of the filters how to use them. But if you want to do it automatic you need see how CSS3 please is dealing with the filters and convert gradients to IE filter gradients.
You need to add these lines to the style tag for making this to work in IE,
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222'); /* IE6 & IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222')"; /* IE8 */
Sample code Snippet:
.ms-viewheadertr ms-vhltr
{
background: #222 ;/when gradients doesn't fill it fills the color/
background: -webkit-linear-gradient(#444, #222);/* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(#444, #222);/* For Firefox 3.6 to 15 */
background: -o-linear-gradient(#444, #222);/* For Opera 11.1 to 12.0 */
background: linear-gradient(#444, #222);/* Standard syntax */
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222'); /* IE6 & IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222')"; /* IE8 */
}
I am trying to get a transparent PNG & Gradient to display at the same in IE. Right now, the filter dominates over the background image. If I take out the filter, the PNG does display. Ideally, I would like the PNG to be on top of the gradient.
CSS:
.defaultSelection {
border: 1px solid #bbb; color: #222222; outline: 0 none;
background: url('/img/dropdown-arrow.png') right center no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#e9e9e9', endColorstr='#ffffff' )
}
HTML:
<li class="defaultSelection">Current Selection</li>
Good news: This is possible with IE (despite what others have said). But it does need a little hack called CSS3Pie.
CSS3Pie is a hack for IE which allows it to support a variety of CSS3 features using ordinary CSS, rather than those horrible filter styles.
See here for its supported features: http://css3pie.com/documentation/supported-css3-features/
You'll note that this includes the ability to specify a background with an image and a gradient:
As described on the page linked above, simply specify your CSS with -pie-background in addition to the normal background style, and also with the Pie behavior style to run the Pie script.
#myElement {
background: url(bg-image.png) no-repeat #CCC; /*non-CSS3 browsers will use this*/
background: url(bg-image.png) no-repeat, -moz-linear-gradient(#CCC, #EEE); /*gecko*/
background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*webkit*/
background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
-pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*PIE*/
behavior: url(PIE.htc);
}
Behind the scenes, CSS3Pie creates a VML element, and layers it with the real element to achieve the desired effects (VML is a vector graphics language which is supported by IE6 and up). But you don't need to know any of this, as Pie goes to some lengths to make itself completely transparent to the developer and to the user. It does have some bugs and known issues, but overall it's a very very good tool for pulling older versions of IE up to some sort of parity with more modern browsers.
Have you tried using the gradient on the li and then applying the image on an element within the li?
<li class="defaultSelection">Current Selection<span class='bg'> </span></li>
.defaultSelection {
border: 1px solid #bbb; color: #222222; outline: 0 none;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#e9e9e9', endColorstr='#ffffff' )
}
.defaultSelection .bg{
display:inline-block;
width: 10px;
height:10px;
background: transparent url('/img/dropdown-arrow.png') right center no-repeat;
}
This is not possible with IE as a filter gradient is essentially another background image (it takes its place.) Try reversing the order to have the filter first and the bg image last in the CSS selector, you'll most likely see the image.
Your best bet is to go with layering, or make on PNG that has both the image and transparency.