I've fixed it for myself, but add this to theme -

background: -o-linear-gradient(top,  #efeeee,  #dadada);

Thanks ahead.

Comments

gtsopour’s picture

Assigned: Unassigned » gtsopour
Priority: Minor » Normal
Status: Needs work » Closed (fixed)
Issue tags: +corporate, +Corporate Theme, +Corporate Clean Theme

Hello lolsteamroller,

you are absolutely right with your mention. Based on your comment, I tried to accomplish gradient support for all browsers. So i made the following changes only at the style.css file and only at the gradient background attribute.

All changes are committed and will be included in next CorporateClean release 7.x-1.1. But if somebody needs these changes now, just replace already background rules with the following background rules.

#header

#header {
background: #2f2f2f;
/* IE10 */ 
background-image: -ms-linear-gradient(top, #2f2f2f 0%, #1b1a1a 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #2f2f2f 0%, #1b1a1a 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #2f2f2f 0%, #1b1a1a 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2f2f2f), color-stop(1, #1b1a1a));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #2f2f2f 0%, #1b1a1a 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #2f2f2f 0%, #1b1a1a 100%);
/* IE6-9 */ 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f2f2f', endColorstr='#1b1a1a'); 
}

#banner

#banner  { 
background: #efeeee;
/* IE10 */ 
background-image: -ms-linear-gradient(top, #efeeee 0%, #dadada 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #efeeee 0%, #dadada 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #efeeee 0%, #dadada 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #efeeee), color-stop(1, #dadada));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #efeeee 0%, #dadada 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #efeeee 0%, #dadada 100%);
/* IE6-9 */ 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#efeeee', endColorstr='#dadada'); 
}

#content

#content { 
background: #e8e8e8;
/* IE10 */ 
background-image: -ms-linear-gradient(top, #e8e8e8 0%, #efefef 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #e8e8e8 0%, #efefef 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #e8e8e8 0%, #efefef 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e8e8e8), color-stop(1, #efefef));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #efefef 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #e8e8e8 0%, #efefef 100%);
/* IE6-9 */ 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e8e8', endColorstr='#efefef'); 
}

#footer-bottom

#footer-bottom { 
background: #1a1a1a;
/* IE10 */ 
background-image: -ms-linear-gradient(top, #262626 0%, #1a1a1a 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #262626 0%, #1a1a1a 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #262626 0%, #1a1a1a 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #262626), color-stop(1, #1a1a1a));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #262626 0%, #1a1a1a 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #262626 0%, #1a1a1a 100%);
/* IE6-9 */ 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#262626', endColorstr='#1a1a1a'); 
}

#comments-title

#comments-title { 
/* background */
background: #fdfdfd;
/* IE10 */ 
background-image: -ms-linear-gradient(top, #fdfdfd 0%, #efefef 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #fdfdfd 0%, #efefef 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #fdfdfd 0%, #efefef 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fdfdfd), color-stop(1, #efefef));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #fdfdfd 0%, #efefef 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #fdfdfd 0%, #efefef 100%);
/* IE6-9 */ 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfdfd', endColorstr='#efefef');
}

#comments ul.links li a

#comments ul.links li a { 
/* background */
background: #0093c5;
/* IE10 */ 
background-image: -ms-linear-gradient(top, #0093c5 0%, #0079a2 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #0093c5 0%, #0079a2 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #0093c5 0%, #0079a2 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0093c5), color-stop(1, #0079a2));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #0093c5 0%, #0079a2 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #0093c5 0%, #0079a2 100%);
/* IE6-9 */ 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0093c5', endColorstr='#0079a2');
}

.links ul li a, a.more, #edit-submit, #edit-preview, input.form-submit

.links ul li a, a.more, #edit-submit, #edit-preview, input.form-submit { 
/* background */
background: #0095c7;
/* IE10 */ 
background-image: -ms-linear-gradient(top, #0093c5 0%, #0079a2 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #0093c5 0%, #0079a2 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #0093c5 0%, #0079a2 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0093c5), color-stop(1, #0079a2));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #0093c5 0%, #0079a2 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #0093c5 0%, #0079a2 100%);
/* IE6-9 */ 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0093c5', endColorstr='#0079a2');
}

Thanks lolsteamroller again
/George

lolsteamroller’s picture

Hey.

Wanted to say thanks for this.

--lolsteamroller

davedickens’s picture

I was under the impression that from IE8 and up that the proper filter syntax was to use -ms-filter: instead of filter: to properly make the CSS to be IE8-IE9 compliant AND the IE8-9 declaration must come first.

So in the case of the Banner style...I think the proper syntax would be
/*IE8-9*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#efeeee', endColorstr='#dadada')";
}
/* IE6-7 (which I think technically would work all the way back to IE4...but don't hold me to that.)*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efeeee', endColorstr='#dadada');
}

From http://msdn.microsoft.com/en-us/library/ms533754%28v=vs.85%29.aspx
is this tidbit
Windows Internet Explorer 8. The -ms-filter attribute is an extension to CSS, and can be used as a synonym for filter in IE8 Standards mode. When you use -ms-filter, enclose the progid in single quotes (') or double quotes ("). Use commas (,) to separate multiple values.