This discussion is archived
7 Replies Latest reply: Feb 4, 2013 8:24 AM by VANJ RSS

Breadcrumbs - Overlapping

VANJ Journeyer
Currently Being Moderated
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 Guru
    Currently Being Moderated
    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 Expert
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    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 Journeyer
    Currently Being Moderated
    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 Expert
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    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 Journeyer
    Currently Being Moderated
    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.

Legend

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