What the heck is going on?

[Travis]

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]

That seems to be related to this css:

.breadcrumb .crust .arrow span {
border: 12px solid transparent;

I need to do a bit more digging though.

 

[Travis]

ok.

 

[Brogan]

Well in your main breadcrumb CSS you have this image as the background, which is almost black (#050505): http://www.ncisaddict.com/forum/styles/dark_xf/xenforo/gradients/breadcrumbsbg.gif

You're then applying a transparent border to the arrow so that is the reason.

 

[Jake Bunce]

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.

.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";
}

.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.