Breadcrumb Bug

Feb 14, 2014 at 7:58 PM
While poring over the Tidy.ascx I couldn't get to terms with the Breadcrumb skin object and noticed that your website has the same separator bug.

As a repayment for the menu bug fix you gave me a few days ago accept my fix for the breadcrumb bug as follows:

In the dnn:BREADCRUMB skin object change the misspelled CssClass="breadCrumb" into CssClass="Breadcrumb".

Greets from Poland.
Coordinator
Feb 17, 2014 at 5:31 AM
Hi Greg,

This "misspelling" is actually by design. I find there to be a lot of collisions with common CSS class names. One technique I use to keep my class names unique is to adjust their capitalization.

In this case Breadcrumb becomes breadCrumb.

Notice that DNNROOT/Portals/_default/Skins/Tidy/css/Tidy.css contains the breadCrumb class near line 55.

This helps keep the Tidy skin CSS from stepping on any toes of any module CSS with "Breadcrumb" classes (which are fairly common).

Hopefully that makes some sense, but let me know if you have any additional questions.

Thanks again,

Adam
Feb 17, 2014 at 9:14 AM
That's OK with me but only when I corrected the occurrence of the capital letters in the breadcrumb skin object class name was I able to align properly the breadcrumb triangles. Actually they aligned themselves.

And I commented out the breadCrumb class near line 55 to keep everything tidy. :)
Coordinator
Feb 18, 2014 at 5:56 AM
Well that is a little strange. If you commented out the CSS that creates the breadcrumb triangles and you still see them (and properly aligned to boot), this may be a bug.

Can you send me a URL so I can investigate further? This is the first time someone has experienced an issue with breadcrumb alignment.

FYI this is what the breadcrumb should look like:
What the breadCrumb should look like

Thanks.
Feb 18, 2014 at 6:50 AM
It's good you put up the screenshot. Now I can see we seem to have been talking about different things.
  1. Actually I cannot send you the URL as I am tweaking your skin on my local development machine.
  2. Since I can't insert screenshots here the only way for you to reproduce is to view your Tidy webpage in almost any web browser (I used Firefox - Chrome seems to have no background color options) with the background darkened (Options - Content - Colors in Firefox). Having done so you'll probably see two little triangles (Separators) after the Home --> Layouts --> TidySocial breadcrumbs.
  3. Speaking of the breadCrumb class near line 55 you wrote about which I think looks like this in your css file:
    .breadCrumb {
    background: none repeat scroll 0 0 #EFEFEF;
    display: block;
    float: left;
    height: 22px;
    line-height: 22px;
    margin-right: 18px;
    padding: 0 5px;
    position: relative;
    }}
    When I comment this out on your page in Firebug on Firefox the little triangles (Separators) are properly aligned.
The gist of what I'm saying here is that the little triangles in the breadcrumb skin object are visible and misaligned if a user has set a darker background to the browser's background color. It's not much of a bug I think but I happened to set my browser in such a way there and I immediately saw the misalignment.

Anyway your skin is great and I'm going to use it (subject to small modifications) on my revamped website.
Coordinator
Feb 18, 2014 at 7:24 PM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.
Marked as answer by adamhumphrey on 2/18/2014 at 12:29 PM
Coordinator
Feb 18, 2014 at 7:31 PM
This is why I like continuing the conversation. This was indeed a bug that has been resolved in the work item above. Thanks again Greg for following up.

Cheers,

Adam