3 Replies Latest reply: Mar 2, 2013 5:17 AM by fac586 RSS

    Resizing image using CSS - not working in IE

    William Wallace
      Hello,

      I have a standard report with couple of columns one of which a image column. The images are of varying sizes and I manged to resize them to a fixed width & height by using CSS code in page header as below:
      td[headers="ITEM_PICTURE"] img {
        display: block;
        width: 70px;
        border: 1px solid #999;
        padding: 4px;
        background: #f6f6f6;
      }
      The CSS does the trick in Chrome & Firefox but does not work in internet explorer. Is there a way to make this CSS code IE friendly?

      Cheers for help.
        • 1. Re: Resizing image using CSS - not working in IE
          fac586
          William Wallace wrote:

          I have a standard report with couple of columns one of which a image column. The images are of varying sizes and I manged to resize them to a fixed width & height by using CSS code in page header as below:
          td[headers="ITEM_PICTURE"] img {
          display: block;
          width: 70px;
          border: 1px solid #999;
          padding: 4px;
          background: #f6f6f6;
          }
          The CSS does the trick in Chrome & Firefox but does not work in internet explorer. Is there a way to make this CSS code IE friendly?
          Why didn't Microsoft make IE CSS friendly?

          The likely explanation is that IE is ignoring the attribute selector because the page is being rendered in quirks mode. Either:

          <li>you're using IE6
          <li>you're using a legacy APEX theme with page templates lacking a DOCTYPE
          <li>the browser is in compatibility mode

          What is the APEX version, theme, page template and IE version?
          • 2. Re: Resizing image using CSS - not working in IE
            William Wallace
            I am using Apex 4.2.1 (had this issue in 4.1.1 as well) and using theme 10. My browser is IE 9.
            • 3. Re: Resizing image using CSS - not working in IE
              fac586
              William Wallace wrote:
              I am using Apex 4.2.1 (had this issue in 4.1.1 as well) and using theme 10.
              Ah, the Sludge Sand theme. In 4.x that's a legacy theme only really included to allow applications to run on IE6. It's therefore intended to run in quirks mode, meaning in Internet Explorer terms there's no support for anything that didn't work in IE6 (for certain values of "work"). This means no CSS3, no support for a lot of useful CSS2.1 stuff (like attribute selectors), and probably problems with jQuery which requires standards mode. Adding a DOCTYPE to the page templates to trigger standards mode Interactive Report: how can I display carriage returns?. In 4.2 you really should switch to one of the latest Standard themes, or at least one of the standards mode Legacy themes (those not marked with a "*").

              If you must use theme 10, and there are no other images in this report (like edit icons) then you could add a static ID to the region and use a more basic selector like:
              #static-id td.t10data img {
                display: block;
                width: 70px;
                border: 1px solid #999;
                padding: 4px;
                background: #f6f6f6;
              }
              However, it appears that one of IE's quirkier quirks mode quirks is that CSS padding is not supported on images, so the presentation you want is not possible using theme 10 in IE and CSS alone.

              Switching to a modern theme is recommended.

              Edited by: fac586 on 02-Mar-2013 10:31