I'm trying to fix something in css of my project but the behavior of that button is different on IE8. So this is the code:
.virtualS{
background: -moz-linear-gradient(top, #FF734C, #FF0000);
background: -webkit-linear-gradient(top, #FF734C, #FF0000);
background: -o-linear-gradient(top, #ff704a 0%,#ff0201 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF734C, endColorstr=#FF0000);
border:1px solid #eaeaea;
height:14px;
}
the problem is with height:14px because on Firefox, Chrome, Opera I should have 16px and on IE 14px. So what can I do in order to fix this? I don't want to use a different .css file with conditional comments only for this so what can I do in order to have properly the same height for that button on IE and Firefox.
I think if you want 14px you might need to set line-height: 14px
Although it is not W3C compliant the are 'hacks' you can use in your css to target specific browsers, the compliant way would be to use <!-- [if IE x]> <link ... /> <![endif] --> these 'special comments' are recognised by IE and it loads the appropriate style sheet
Check to see if IE is rendering in quirks mode, if it is, the sizing will be incorrect. But it can be fixed by correcting the HTML.
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.
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've decided to completely drop support for IE6 and IE7 in my website, redirecting it's users to a text-only warning page. However I still support IE8 and IE9.
I am achieving this using CSS3 PIE, and border-radius works in both (IE8/9), box-shadow works in both, however I also rely on linear-gradient. I have heaps of tags in use to achieve this:
background: #E6E6E6; /* fallback */
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E6E6E6), to(#B3BCC7)); /* old webkit */
background: -webkit-linear-gradient(#E6E6E6, #B3BCC7); /* new webkit */
background: -moz-linear-gradient(#E6E6E6, #B3BCC7); /* firefox */
background: -ms-linear-gradient(#E6E6E6, #B3BCC7); /* meant to be IE... */
background: filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#E6E6E6', endColorstr='#B3BCC7'); /* also meant to be IE... */
background: -o-linear-gradient(#E6E6E6, #B3BCC7); /* opera */
background: linear-gradient(#E6E6E6, #B3BCC7); /* W3C standard */
-pie-background: linear-gradient(#E6E6E6, #B3BCC7); /* PIE */
behavior: url(/PIE.htc); /* load PIE.htc */
linear-gradient works in IE8, but not IE9, oddly. I've tried any solutions I've found, but they haven't worked. IE8 just shows the fallback: background: #E6E6E6; - not a gradient.
I don't think it's anything wrong with the server or anything like that, because the other properties - border-radius and box-shadow - work with PIE but not without.
I've got all the properties to work in all browsers I support - just not IE9 :(
Any ideas?
Thanks
OK, here's my fix. It certainly isn't pretty, but it works.
<style type="text/css">
body{
background: #E6E6E6;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E6E6E6), to(#B3BCC7));
background: -webkit-linear-gradient(#E6E6E6, #B3BCC7);
background: -moz-linear-gradient(#E6E6E6, #B3BCC7);
background: -ms-linear-gradient(#E6E6E6, #B3BCC7);
background: -o-linear-gradient(#E6E6E6, #B3BCC7);
background: linear-gradient(#E6E6E6, #B3BCC7);
-pie-background: linear-gradient(#E6E6E6, #B3BCC7);
behavior: url(/PIE.htc);
}
</style>
<!--[if IE 9]><style>body{ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#E6E6E6', endColorstr='#B3BCC7'); behavior: url(/ie9-gradient-fix.htc); } </style><![endif]-->
EDIT: If anybody wants them, PIE.htc is found at http://www.css3pie.com and ie9-gradient-fix.htc is found at http://abouthalf.com/examples/ie9roundedbackgrounds/htc.zip. I couldn't get ie9-gradient-fix.htc to work unless it was in the root directory, PIE.htc worked in my /resources/ directory.
I don't think it's anything wrong with the server or anything like that, because the other properties - border-radius and box-shadow - work with PIE but not without.
PIE does not render border-radius and box-shadow in IE9 since IE9 supports both of those natively. So their presence is not an indication that PIE is working.
My guess is actually that your PIE.htc is being served with the incorrect content-type header -- IE9 is particularly strict about the content-type. See http://css3pie.com/documentation/known-issues/#content-type for details.
I was having a big headache because even with the correct content-type header (text/x-component), the linear-gradient wasn't working on IE9.
Upgrading to PIE 2.0 solved the issue.
http://css3pie.com/2013/01/28/pie-2-0-beta-1-released
Great!
i used PIE.php and fixed this bug (linear-gradient + border-radius) in IE8, IE9!
To use it, simply make sure both PIE.php and PIE.htc are in the same directory, and then in your CSS point the behavior to the PHP file instead:
behavior: url(PIE.php);
ie9-gradient-fix.htc worked for me in I.E. 9 but then again changing behavior from pie.htc to pie.php ALSO does the same thing.
The wheels turn oh so slowly at Microsoft but it appears they might also turn in opposite directions?
In my case i was using <!--[if lt IE 9]>, changing it to <!--[if lt IE 10]> fixed my problem (of not actualy including my IE css file).
I think** <!--[if lte IE 9]> would do the same logic.
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#88222222', EndColorStr='#00222222', GradientType=0);
PS. I am not using css3pie whatsoever (I thought I was, derp)
I am using the following bit of CSS to create a linear background gradient. It seems to work just fine in IE8/9, FF, Safari and chrome but not in IE7. IE7 shows a solid (green) background. Here is my code
.menu_body a {
display:block;
color:#006699;
background: #008800;
/* Mozilla: */
background: -moz-linear-gradient(top, #0b71a4, #025f8e);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#0b71a4), to(#025f8e));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#0b71a4', EndColorStr='#025f8e', GradientType=0);
padding: 1px 18px;
}
In IE<=7, filters won't work unless element has layout.
zoom: 1;
Be aware that it can break other things, so old good background-image might be safe and reliable solution.
Also please note that your CSS lacks gradient properties for Opera, IE10 and updated syntax for Webkit.
The correct syntax is:
filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr=#550000FF, endColorstr=#55FFFF00)
This is supported by IE4>
See the MSDN source here.
I'm unsure if the parameters of this transform are case sensitive - but seeing as most other CSS is, you could try:
startColorstr='#0b71a4', endColorstr='#025f8e'
Notice the lower-case starting character, and lower-case str suffix.