• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Browser issue Breadcrumb not showing properly in FireFox

#1
I've noticed that breadcrumb is not showing properly as it was before in firefox "using latest 19.0.2"

See attached images:

faultybreadcrumb.png

I didn't review the new code that may has been changed in templates, but I think this maybe a CSS changes!

I took a screenshot from my forum "left to right view" using Xenforo 1.1.3:

correctbreadcrumb.png
 

Mike

XenForo developer
Staff member
#2
Does anyone else see this, particularly if you had problems with the breadcrumb pre-1.1.4? I can't reproduce it.
 
#4
Does anyone else see this, particularly if you had problems with the breadcrumb pre-1.1.4? I can't reproduce it.
No, I didn't have any problem showing the breadcrumb pre-1.1.4 version, I've noticed this issue while ago here in xenforo.
 

Sheratan

Well-known member
#12
Ah, I run into this bug some time ago, when I implemented "Breadcrumb and arrow quick fix for FF" into extra.css in XF 1.1.3.

The fix was great, then after I upgrade FF from 18 to 19, the breadcrumb and arrow changed (Broken like #1 post)

Then I upgrade 1.1.3 to 1.1.4, and remove the quick fix. So far no problem.

Win 7 SP 1 32-bit
 

Sheratan

Well-known member
#14
Ah, I run into this bug some time ago, when I implemented "Breadcrumb and arrow quick fix for FF" into extra.css in XF 1.1.3.

The fix was great, then after I upgrade FF from 18 to 19, the breadcrumb and arrow changed (Broken like #1 post)

Then I upgrade 1.1.3 to 1.1.4, and remove the quick fix. So far no problem.

Win 7 SP 1 32-bit
Okay, strange. I see the broken arrow in here and in my site too. Using inspect element, it looks like the "real culprit is

Code:
.breadcrumb .crust .arrow span {
-moz-border-right-colors: rgb(240, 247, 252);
}
FF 19.0.2 Win 7 SP 1 32-bit
 
#15
Okay, strange. I see the broken arrow in here and in my site too. Using inspect element, it looks like the "real culprit is

Code:
.breadcrumb .crust .arrow span {
-moz-border-right-colors: rgb(240, 247, 252);
}
FF 19.0.2 Win 7 SP 1 32-bit
So I could edit the css style property in the meantime "-moz-border-right-colors: none;" to fix this issue?
 
#18
Before:


After -moz-border-right-colors: none;


Yeah, maybe. :unsure:

Anyway I'm using 1.1.4 (Upgraded from 1.1.3)
No, I've fixed this :)

You should edit both outer and inner breadcrumb style property:

remove this component in both Item Arrow, OuterItem Arrow, Inner

-moz-border-right-colors: @breadcrumbItemCrumb.border-bottom-color; or edit "@breadcrumbItemCrumb.border-bottom-color' to "none"

This should fix the issue.