7 Replies Latest reply: Feb 4, 2013 10:24 AM by VANJ RSS

    Breadcrumbs - Overlapping

    VANJ
      https://apex.oracle.com/pls/apex/f?p=57688:14

      Theme 24, Breadbrumb region template.

      In IE8, the breadcrumbs at the top of the page step on each other http://screencast.com/t/E6caaubQ

      In Firefox 18.0.1 and IE9, they show up fine http://screencast.com/t/miOf92Wa

      Any idea why? Thanks
        • 1. Re: Breadcrumbs - Overlapping
          fac586
          VANJ wrote:
          https://apex.oracle.com/pls/apex/f?p=57688:14

          Theme 24, Breadbrumb region template.

          In IE8, the breadcrumbs at the top of the page step on each other http://screencast.com/t/E6caaubQ

          In Firefox 18.0.1 and IE9, they show up fine http://screencast.com/t/miOf92Wa

          Any idea why? Thanks
          Microsoft never made a standards-compliant browser until 2011?

          Works in compatibility mode in IE8, suggesting that Oracle haven't fully taken account of all of the deficiencies in IE8's so-called standards mode. The <tt>div#uBreadcrumbs ul li</tt> theme CSS rule should apparently have an IE8 override to send <tt>display: inline;</tt> instead of <tt>display: inline-block;</tt> to IE8 as well as IE7.

          Try this in the page template after the theme CSS link:
          <style>
          .ie8 div#uBreadcrumbs ul li {
            display: inline;
            zoom: 1;
          }
          
          </style>
          Further investigation will have to wait until I have access to unminified CSS and a real web inspector that shows CSS properly instead of IE8's ass-backwards effort.
          • 2. Re: Breadcrumbs - Overlapping
            Tom Petrus
            Paul is correct. I also noticed this problem and fixed it by putting this after the theme link
              <!--[if lte IE 8]>
              <style type="text/css">
                div#uBreadcrumbs ul li {
                  display: inline;
                }
              </style>
              <![endif]-->
            I didn't need to add the zoom though. I'd also better remove the conditional comment and use the .ie8 class selector, i hadn't thought of that.
            • 3. Re: Breadcrumbs - Overlapping
              fac586
              Tom wrote:

              I didn't need to add the zoom though.
              That was the other difference from the IE7 rule. Thought I'd better include it so it can hasLayout.
              • 4. Re: Breadcrumbs - Overlapping
                VANJ
                Paul - Yup, that did the trick. But simply putting that CSS snippet in Page > CSS > Inline was sufficient, no need to modify the page template. I am not sure how to reconcile this with our Theme 24 - Standard report - Clear hover highlighting on the best place to put CSS overrides. Or was that because the hover pseudo-class is devilishly hard to override? Thanks
                • 5. Re: Breadcrumbs - Overlapping
                  Tom Petrus
                  Putting this override in the page template makes a lot of sense when you will have multiple pages with breadcrumbs. Unless you mean to add this css inline on each page this occurs on (ie each page with breadcrumbs in ie8). This does not have any problems as the theme style is overriden without any problems, unlike with the hover highlighting. With adding in ".ie8" in the selector the specificity should be higher than the selector in the theme (which is simply "div#uBreadcrumbs ul li"). But i'd still apply this style after the theme css - oh well.
                  • 6. Re: Breadcrumbs - Overlapping
                    fac586
                    VANJ wrote:
                    Paul - Yup, that did the trick. But simply putting that CSS snippet in Page > CSS > Inline was sufficient, no need to modify the page template.
                    Don't you want to fix the breadcrumbs wherever that template is used without repeating the rule on all of the pages?
                    I am not sure how to reconcile this with our Theme 24 - Standard report - Clear hover highlighting on the best place to put CSS overrides. Or was that because the hover pseudo-class is devilishly hard to override? Thanks
                    Specificity again. Since more than one rule affects the same properties, the rule that's applied is the one with the higher specificity score.

                    Why does the order not matter here? Because we're not doing a simple override using the same selector. Tom's fix above does, so it must come after the theme CSS in the cascade. The extra <tt>.ie8</tt> class selector I used means that 2 different rules affect the same property, so which is applied is determined by specificity, not cascade order.
                    • 7. Re: Breadcrumbs - Overlapping
                      VANJ
                      Oh abolutely, since a breadcrumb, by definition, is rendered on multiple pages, I didn't mean I would use the inline CSS on each page, I was just using that as an example. Putting the CSS on the global/Page 0 or in the page template (I prefer the former) makes sense.

                      Ah, I understand that adding the .ie8 selector makes the CSS rule more selective so it ends up surviving the cascade.

                      Thanks to both of you.