This discussion is archived
1 2 Previous Next 19 Replies Latest reply: Jul 31, 2012 8:14 AM by fac586 Go to original post RSS
  • 15. Re: Bizarre IRR Button Colors in IE (Only!)
    VC Guru
    Currently Being Moderated
    Hi Joe,

    I got IE9 on my laptop and after applying Paul's css override it does work fine in that dinosaur(IE), In fact I have tried in IE8 and IE7 modes as well.

    One thing I had noticed is that it does not work if you place that above css code in the page HTML header, instead place the code in your interactive report region header.

    You can see the working example here http://apex.oracle.com/pls/apex/f?p=32940:2

    Login as test/test
  • 16. Re: Bizarre IRR Button Colors in IE (Only!)
    Joe Upshaw Journeyer
    Currently Being Moderated
    Vikram,

    Any idea why it doesn't work if it is in the page header rather than the region header? Just curious.

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

    Any idea why it doesn't work if it is in the page header rather than the region header? Just curious.
    According to the HTML specifications <tt>link</tt> and <tt>style</tt> must only appear in the document's <tt>head</tt> element (with the exception of <tt>style</tt> elements using the <tt>scope</tt> element&mdash;which no user agent yet supports).

    If it's not working then you don't have things in the right order in the header...
  • 18. Re: Bizarre IRR Button Colors in IE (Only!)
    Joe Upshaw Journeyer
    Currently Being Moderated
    Paul,

    We created an additional CSS file just to contain IE overrides. Then, we conditionally load it in the HEAD section of the Page template.
      <!--[if lt IE 10]><link rel="stylesheet" href="#IMAGE_PREFIX#ice/css/apexIEOverrides.css" type="text/css"/><![endif]-->
    This does solve the problem.

    The "Powers that Be" (Me ;-) ) won't allow any changes directly to APEX CSS or JS files (although we are fine with explicitly overriding them).

    Wondering, since we have demonstrated that this is an "out of the box" problem for IE/APEX is this would be worth filing a bug??? Obviously, we'd be fine with having Oracle change the template to effect this change.

    For the record, I still totally don't get why the STYLE tag syntax doesn't work in the Page Header but, does in the Region Header. Typically, whenever we are testing style settings, we start off by placing them in the Page Header and then, once we get things like we like them, we move them into the common CSS and remove them from the Page Header. This seems to work just fine for us. Is it only for overrides that this doesn't work? I've seen some allusions to it "being in the wrong place" but, since it is the only thing specified in the Page Header (and since it seems to work with any new styles, e.g. "th.drillDownHeader"), I'm not totally sure I understand how it is out of order.

    Thanks, Again and As Usual, Paul!

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

    We created an additional CSS file just to contain IE overrides. Then, we conditionally load it in the HEAD section of the Page template.
    <!--[if lt IE 10]><link rel="stylesheet" href="#IMAGE_PREFIX#ice/css/apexIEOverrides.css" type="text/css"/><![endif]-->
    This does solve the problem.
    Good.
    The "Powers that Be" (Me ;-) ) won't allow any changes directly to APEX CSS or JS files (although we are fine with explicitly overriding them).

    Wondering, since we have demonstrated that this is an "out of the box" problem for IE/APEX is this would be worth filing a bug??? Obviously, we'd be fine with having Oracle change the template to effect this change.
    Of course. If no-one from Oracle responds on the forum and you have the ability to log it on MOS then do so.
    For the record, I still totally don't get why the STYLE tag syntax doesn't work in the Page Header but, does in the Region Header. Typically, whenever we are testing style settings, we start off by placing them in the Page Header and then, once we get things like we like them, we move them into the common CSS and remove them from the Page Header. This seems to work just fine for us. Is it only for overrides that this doesn't work? I've seen some allusions to it "being in the wrong place" but, since it is the only thing specified in the Page Header (and since it seems to work with any new styles, e.g. "th.drillDownHeader"), I'm not totally sure I understand how it is out of order.
    It's to do with the "cascading" aspect of Cascading Style Sheets. For any rules matching a selector, what happens later in the cascade overrides what has gone before (usually&mdash;for current purposes we'll ignore the similarly tricky issue of specificity ). The <tt>head</tt> element of your theme 24 page looks like this:
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <title>#TITLE#</title>
      <link rel="icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
      <link rel="shortcut icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
      #HEAD#
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_24/css/4_1.css">
      <script src="#IMAGE_PREFIX#themes/theme_24/js/4_1.js"></script>
    </head>
    Note the relative positions of the <tt>#HEAD#</tt> placeholder and theme style sheet (<tt>&lt;link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_24/css/4_1.css"&gt;</tt>). Page HTML Header content is one of the components that replaces <tt>#HEAD#</tt>, hence it appears before the theme CSS in the cascade, and does not override it.

    I put my override in the page template header, after the theme style sheet:
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <title>#TITLE#</title>
      <link rel="icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
      <link rel="shortcut icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
      #HEAD#
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_24/css/4_1.css">
      <script src="#IMAGE_PREFIX#themes/theme_24/js/4_1.js"></script>
    <!--[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]-->
    </head>
    where the cascade will result in the desired override. Presumably your external style sheet is also referenced after the theme style sheet.

    (Prior to APEX 4.0, Oracle placed <tt>#HEAD#</tt> after the theme style sheet, so theme CSS could always be overridden using the page HTML Header. The order was changed in 4.0 to allow theme-specific styles for Interactive Reports to override the default IR styling in core APEX CSS (another component included in the <tt>#HEAD#</tt> substitution). They should have used another way to do this as it was a lot easier to talk noobs through CSS overrides using page HTML Headers than it is now...)
1 2 Previous Next

Legend

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