Table Header borders disappearing in IE8 with gradient background - css

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).

Related

CSS Radial Gradient browser differences

I have a really simple CSS radial gradient, which looks significantly different in different in Safari and others:
<style>
body {
background: #000;
}
div {
height: 200px;
width: 200px;
background-image: radial-gradient(100px, #1493a4 0%, transparent 100%);
}
</style>
<div></div>
Any ideas, how I could make them all look like the Safari version?
Safari Firefox
Fiddle: https://jsfiddle.net/2234zy6o/3/
I finally found a simple solution: Safari needs an own style:
background-image: -webkit-radial-gradient(#1493a4, transparent);
Just make sure to add it after the standard definition, other browsers then use the standard one and ignore the -webkit one, while Safari sees the first but then finds -webkit and ignores the standard.
But it's not quite the same, nevertheless. So I did some 'interpolation' and added some stops:
background-image: -webkit-radial-gradient(100px,
#1493a4 0%,
rgba(20,147,164,0.4) 40%,
rgba(20,147,164,0.2) 55%,
transparent 100%
);
It's still not the same but quite similar - at least I can live with it.

Bad looking linear gradient at Firefox

I'm giving my a linear gradient but in Firefox, even new versions, what I get is something like bars of solid color building the gradient. This is what's in my CSS:
background-color: #d3d3d3;
background-repeat: repeat-x;
background: -moz-linear-gradient(top, rgba(145,145,142,1) 0%, rgba(253,253,253,1) 99%);
background: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#fcfcfc));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d3d3',endColorstr='#fcfcfc');
background: -o-linear-gradient(rgb(211,211,211),rgb(253,253,253));
According to this, it is most unlikely you are facing a version problem. Firefox, as usual, was the first to implement a standards-compliant (no prefix) CSS property (and it has already been 9 versions back).
Try removing the background-repeat property as it is mostly useless for gradients unless you've set a background size. If it solves, I'd recommend posting a bug report on Bugzilla. Does it work well on IE10 and Chrome?

Where is this style coming from in CSS?

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')";

CSS Gradients & Shadows on IE

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 */
}

Gradient style in a div background, is not working in IE

I'm trying to make a nice frame for a logo that will be inserted in a webpage I'm working on. And for some reason IE won't display that div, with the fading color. All I want is a simple gradient in an empty div with predefined dimensions. Google chrome is displaying it just like I want, but IE is not displaying anything. And since I have copied the gradient part from here without understanding a word, I cannot debug it.
Here is the code (in a very reduced version):
<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-8-i">
<style>
#headGreen{
float: left;
margin: 52px 0px 0px 0px;
width : 300px;
height: 30px;
background-image: linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
background-image: -o-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
background-image: -moz-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
background-image: -webkit-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
background-image: -ms-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
background-image: -webkit-gradient(
linear,
right top,
left top,
color-stop(0.04, rgb(255,255,255)),
color-stop(0.82, rgb(68,179,68))
);
}
#header{
width: 800px;
height: 100px;
}
</style>
</head>
<body>
<div id="header">
<div id="headGreen"></div>
</div>
</body>
</html>
I'm using IE9, but I would like it to work in others also.
Thanks :)
Gradients In Internet Explorer going all the way back to Version 6 got you down?
No worries! Check out CSS3Pie.
http://css3pie.com/
Thanks, hope this helps!
Aaron
-ms-linear gradient is only available in IE 10.
Use the following:
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";
filter is supported in IE7-
-ms-filter is recommended in IE8 - 9. Important note: the property value has to be quoted.
See CSS3 cross browser linear gradient for a detailled explanation on the gradient filter syntax.
I recommend using the Ultimate CSS Gradient Generator for generating gradients.
It utilizes IE's native filters and ensures compatibility all the way back to IE6. I use this all the time.
I don't think that IE9 is already supporting this all I found is this:
http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html
Referring to CSS3 Please IE10 will support it.
http://css3please.com/
I think the older versions will work as they are :
/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";
background-color: transparent;
background-color: rgba(180, 180, 144, 0.6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490);
zoom: 1;
The following filter wlil only be read by IE:
#headGreen{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#44B244');
}

Resources