This discussion is archived
1 2 Previous Next 19 Replies Latest reply: Jul 31, 2012 8:14 AM by fac586 RSS

Bizarre IRR Button Colors in IE (Only!)

Joe Upshaw Journeyer
Currently Being Moderated
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
  • 1. Re: Bizarre IRR Button Colors in IE (Only!)
    jariola Guru
    Currently Being Moderated
    Hi,

    APEX version?
    Theme you use (build in/custom)?
    Any customization on CSS files?
    Have you check e.g. with Firebug what styles are affecting those buttons?
    Can you reproduce this on apex.oracle.com?

    I think IE have some similar tool as Firebug to investigate HTML source and styles.

    Regards,
    Jari
    -----
    My Blog: http://dbswh.webhop.net/dbswh/f?p=BLOG:HOME:0
    Twitter: http://www.twitter.com/jariolai
  • 2. Re: Bizarre IRR Button Colors in IE (Only!)
    682558 Journeyer
    Currently Being Moderated
    Hi,

    If you hit F12 in IE8/9 you get a Firebug style thing.

    You click on the arrow on the top left of the popup screen and then on the item you want to inspect on the web page.

    Regards

    Michael
  • 3. Re: Bizarre IRR Button Colors in IE (Only!)
    Joe Upshaw Journeyer
    Currently Being Moderated
    Sorry.

    Application Express 4.1.1.00.23
    Theme: Cloudy

    We have included our own CSS files (for classes we define in HTML tables for example) but, we haven't remapped any of the built-in apex CSS formatting.

    Without "Inspect Element" capability, it is difficult to determine what IE is doing. In Chrome, this is the CSS that is being applied:

    button.apexir-button {
    margin: 0;
    padding: 0 10px;
    height: 24px;
    border: 1px solid #969696;
    -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-color: #E5E5E5;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#eee', endColorstr='#ddd');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ddd')";
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #EEE), color-stop(100%, #DDD));
    background-image: -webkit-linear-gradient(top, #EEE,#DDD);
    background-image: -moz-linear-gradient(top, #EEE,#DDD);
    background-image: linear-gradient(top, #EEE,#DDD);
    }

    Looking up the same class in IE CSS panel (from F12), I get more attributes than are shown in Chrome, e.g. height, padding broken out into padding-top, padding-right, etc.

    IE, in their usual drive to be "helpful" doesn;t provide any way to copy and paste the whole section. IE does show the background color set to rgb(229,229,229) which is = #E5E5E5. So, why it is showing this hideous color, I do not know.
  • 4. Re: Bizarre IRR Button Colors in IE (Only!)
    Joe Upshaw Journeyer
    Currently Being Moderated
    So, I just created a new app, using just the unaltered Cloudy theme (with no custom CSS files) and the behavior is the same.

    Can someone else try this (only takes a minute) and see if it is just us?

    -Joe
  • 5. Re: Bizarre IRR Button Colors in IE (Only!)
    Joe Upshaw Journeyer
    Currently Being Moderated
    I have duplicated the behavior on apex.oracle.com

    http://apex.oracle.com/pls/apex/f?p=35990:1

    UID: Guest
    Pwd: IEIsAwful

    -Joe

    Edited by: Joe Upshaw on Jul 27, 2012 11:37 AM
  • 6. Re: Bizarre IRR Button Colors in IE (Only!)
    Joe Upshaw Journeyer
    Currently Being Moderated
    Michael,

    I missed your "arrow" tip before. Thanks. Yes, that does allow us to select individual elements. Very handy!

    -Joe
  • 7. Re: Bizarre IRR Button Colors in IE (Only!)
    fac586 Guru
    Currently Being Moderated
    Joe Upshaw wrote:
    Sorry.

    Application Express 4.1.1.00.23
    Theme: Cloudy

    We have included our own CSS files (for classes we define in HTML tables for example) but, we haven't remapped any of the built-in apex CSS formatting.

    Without "Inspect Element" capability, it is difficult to determine what IE is doing. In Chrome, this is the CSS that is being applied:

    button.apexir-button {
    margin: 0;
    padding: 0 10px;
    height: 24px;
    border: 1px solid #969696;
    -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-color: #E5E5E5;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#eee', endColorstr='#ddd');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ddd')";
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #EEE), color-stop(100%, #DDD));
    background-image: -webkit-linear-gradient(top, #EEE,#DDD);
    background-image: -moz-linear-gradient(top, #EEE,#DDD);
    background-image: linear-gradient(top, #EEE,#DDD);
    }

    Looking up the same class in IE CSS panel (from F12), I get more attributes than are shown in Chrome, e.g. height, padding broken out into padding-top, padding-right, etc.

    IE, in their usual drive to be "helpful" doesn;t provide any way to copy and paste the whole section. IE does show the background color set to rgb(229,229,229) which is = #E5E5E5. So, why it is showing this hideous color, I do not know.
    It's the cockamamie IE filter things. They don't support the shorthand colour specifications (<tt>#eee</tt> etc). These need to be specified in full (<tt>#eeeeee</tt> etc). Suspect that Oracle have minified the CSS files using a tool that isn't aware of this (<tt>filter</tt> being a largely useless proprietary feature that Microsoft chose to implement a decade ago instead of providing better standards support).

    You'll have to provide a CSS override for wonky IE versions (e.g. using IE conditional comments):
    <!--[if lt IE 10]>
    <style>
    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')"
    }
    </style>
    <![endif]-->
  • 8. Re: Bizarre IRR Button Colors in IE (Only!)
    maceyah Journeyer
    Currently Being Moderated
    @fac586: Impressive diagnosis!
  • 9. Re: Bizarre IRR Button Colors in IE (Only!)
    Joe Upshaw Journeyer
    Currently Being Moderated
    Paul,

    Sorry that this followup is more of a CSS question and less of an APEX question. We have a CSS style sheet that we are including as part of the application (via a change to the template). 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.

    So, without a conditional section, I would override the APEX definition like this:
    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')"
    }
    but, I don't know how to make this only apply for IE. Can you help?

    -Joe
  • 10. Re: Bizarre IRR Button Colors in IE (Only!)
    Joe Upshaw Journeyer
    Currently Being Moderated
    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.

    -Joe
  • 11. Re: Bizarre IRR Button Colors in IE (Only!)
    Joe Upshaw Journeyer
    Currently Being Moderated
    Paul,

    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.

    -Joe
  • 12. Re: Bizarre IRR Button Colors in IE (Only!)
    VC Guru
    Currently Being Moderated
    Hi Joe,

    Can you post your page view source here?
  • 13. Re: Bizarre IRR Button Colors in IE (Only!)
    Joe Upshaw Journeyer
    Currently Being Moderated
    Vikram,

    What exactly do you mean by the "page view source"? Do you want an export of the page posted here? Are you asking for the IRR query?

    It is very easy to duplicate. Build any* Interactive Report Region with the Cloudy theme, view it in IE and it will reproduce the described behavior . Also, you can access it at apex.oracle.com.

    -Joe
  • 14. Re: Bizarre IRR Button Colors in IE (Only!)
    fac586 Guru
    Currently Being Moderated
    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.
1 2 Previous Next

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points