What the heck is going on?

Travis

Active member
Can someone look at my site,NCIS Addict and work out what is going on in my Breadcrumbs menu? Scroll over the arrows in the breadcrumb menu and you will see what I mean.
 

Brogan

XenForo moderator
Staff member
That seems to be related to this css:

HTML:
.breadcrumb .crust .arrow span {
border: 12px solid transparent;
I need to do a bit more digging though.
 

Jake Bunce

XenForo moderator
Staff member
Screen shot 2010-11-16 at 9.46.56 AM.png

I was able to reproduce this problem by editing this template:

Admin CP -> Appearance -> Templates -> breadcrumb.css

In the two classes below you will see a background-color and a border-left-color which both use @primaryLightest. If you change one such that the two attributes no longer use the same color then you get that color mismatch.

Code:
.breadcrumb .crust a.crumb
{
	@property "breadcrumbItemCrumb";
	text-decoration: none;
	background-color: @primaryLightest;
	padding: 0 10px 0 18px;
	margin-bottom: -1px;
	border-bottom: 1px solid @primaryLighter;
	outline: 0 none;
	-moz-outline-style: 0 none;
	display: block;
	line-height: 24px;
	_border-bottom: none;
	@property "/breadcrumbItemCrumb";
}
Code:
.breadcrumb .crust .arrow span
{
	@property "breadcrumbItemArrowInner";
	border: 12px solid transparent;
	border-right: 1px none black;
	border-left-color: @primaryLightest;
	display: block;
	position: absolute;
	left: -13px;
	top: -12px;
	z-index: 51;
	white-space: nowrap;
	overflow: hidden;
	text-indent: 9999px;
	width: 0px;
	height: 0px;
	@property "/breadcrumbItemArrowInner";
}
Hopefully this helps.
 
Top