3 Replies Latest reply on Sep 26, 2013 4:18 PM by JoeWNSD

    Strange CSS behavior with IE9 and JDeveloper


      I am working with JDeveloper and ADF. There is a single skinning CSS file that is just over 7800 lines. Everything is fine in Chrome, Firefox, IE7, IE8, and IE10. However, when running the application in IE9 some styles are not getting applied.


      I noticed that the elements that were not getting styled were further down in the CSS file (around line 7500). I cut and pasted the styles at the beginning of the CSS file, refreshed, and lo and behold the elements that were not styled before were now getting their styles (I could inspect the page and see that the CSS wasn't getting loaded at all - not an issue with the CSS selectors not matching the HTML being rendered).


      First I thought it may be a file size thing, but after reading this post, I'm not so sure. Plus that wouldn't explain why I only have the problem in IE9.


      Has anyone run into any issues with IE9? It seems very strange to me that this would be a browser problem. My first thought was that there was some error or invalid CSS being used, but I started with a line of CSS and moved it further down in the order until it stopped working (I changed the background on the header to pink). There was one line of CSS where the background would be pink when applied on the line directly before, but when applying directly after the background was gray again. I scoured the CSS but couldn't see anything wrong with it (see below). I removed the CSS in question and the header background showed pink again. Moved it down a few lines and it stopped getting picked up by IE9. Continued this process but wasn't able to find a solution.



      Here is the CSS in question in case something happens to stand out to someone else (I thought maybe "domready" was a reserved word or something):

      table.plan-slab td.cereal-box af|panelGroupLayout.cereal-box-detail af|panelGroupLayout.plan-cost-domready,

      table.cereal-box td.cereal-box-detail af|panelGroupLayout.cereal-box-detail-wrap af|panelGroupLayout.plan-cost-domready {

          position: absolute;

          left: 5px;

          right: 8px;

          bottom: 5px;