Bizarre IRR Button Colors in IE (Only!)

Question

When we go to any "Action" dialog from an Interactive Report Region, the button colors, e.g. Apply, Cancel etc. are dark blue with brown writing in IE only We've tested with IE 8 and 9.
This does not occur in FF, Chrome or Safari.
Has anyone else encountered this and does anyone know of a fix. We are demoing this next week and; it isn't just aesthetic, the color combination is actually very difficult to read.
(Yes, I, too, wish that IE would be forever stricken from the memory of Man)
Thanks and Here's Hoping,
-Joe

Answer 1

Joe
Ironically a combination of IE and Jive ate a lengthy response I made some hours ago, and I wasn't able to post again at that time.
Joe Upshaw wrote:
Sorry that this followup is more of a CSS question and less of an APEX question.That's OK. I know more about many aspects of CSS than I do about some of APEX!
We have a CSS style sheet that we are including as part of the application (via a change to the template).When you say this do you mean that this style sheet replaces the default APEX theme CSS or that it is applied later in the cascade to augment/override the theme?
However, we don't have any conditional* CSS formatting. I'm unsure of the syntax. I know I could paste the <style> section thgat you provided into the HTML Header section of the page but, as this is global, we'd prefer to do it in the CSS once for the whole app.There's no conditional processing in CSS. The browser applies the last rule it understands, which for this rule is roughly like this:
/* Older IE & IE8/9/10 */
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#eee', endColorstr='#ddd');
/* IE8/9/10 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ddd')";
/* Older Safari & Chrome */
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #EEE), color-stop(100%, #DDD));
/* Safari & Chrome */
background-image: -webkit-linear-gradient(top, #EEE,#DDD);
/* Older Firefox */
background-image: -moz-linear-gradient(top, #EEE,#DDD);
/* Firefox 16 & IE10 */
background-image: linear-gradient(top, #EEE,#DDD);So the problem with unconditionally including
button.apexir-button {
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#eeeeee', endColorstr='#dddddd');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd')"
button.apexir-button:hover {
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#eeeeee');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee')"
}later in the cascade is that it will override <tt>background-image: linear-gradient(top, #EEE,#DDD)</tt> for IE10 as IE10 still supports Microsoft's proprietary <tt>filter</tt> property.
That's why I suggested using conditional comments.
I tried this:
button.apexir-button {
[if lt IE 10] filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#eeeeee', endColorstr='#dddddd');
[if lt IE 10] -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd')"
button.apexir-button:hover {
[if lt IE 10] filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#eeeeee');
[if lt IE 10] -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee')"
}and it did not solve the problem.That's not valid CSS: there's no conditional processing in CSS. We have to use the IE conditional comments in HTML.
I also directly pasted the style tag version that you pasted above into the example at apex.oracle.com in the HTML header of the page.
It did not solve the problem there either. Works for me. Needs to pasted in the right place after the APEX theme style sheet to effect the override.
My recommendation would be to put the override in an external style sheet that you feed to earlier IE versions using conditional comments in each page template, which is the approach that APEX takes for IE workarounds:
<!--[if lt IE 10]><link rel="stylesheet" href="..." type="text/css" /><![endif]-->There also another alternative: fix the errant APEX CSS at <tt>/i/themes/theme_24/css/4_1.css</tt> if the powers that be will allow it.