Having serious breadcrumb layout issues in IE7

HTML & CSS
1

Ok, working on finishing up a monster project, and we are now working on all the “little” things that we ignored during major development. One of those things was a bug with the breadcrumb in IE7. As you can see from the attached image everytime there is a 3rd item in the breadcrumb or more everything after the 2nd item kicks down a line. I can’t for the life of me figure out why this is happening.

Here is the code that is running the Breadcrumb. I would supply a link but the only way to get to the site is via VPN so this is the best I can do. Any and all ideas/help is greatly appreciated.

CSS:
#BreadcrumbNav {
float: left;
width: 910px;
margin-right: 20px;
margin-left: -20px;
background-color: #B7DCAE;
height: 30px;
padding-top: 10px;
padding-left: 10px;
margin-top: -20px;
margin-bottom: 15px;
z-index: 15;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #74C26B;
display:inline;
}
#BreadcrumbNav p {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
font-weight: bold;
color: #333;
float: left;
display: block;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
display:inline;
}
#BreadcrumbNav span {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
color: #666;
display: block;
float: left;
background-image: url(…/app_themes/nedd/images/subpage/BreadcrumbNavSepBG.jpg);
background-repeat: no-repeat;
background-position: right;
padding-top: 2px;
padding-right: 10px;
padding-bottom: 2px;
padding-left: 8px;
display:inline;
}
#BreadcrumbNav a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
color: #666;
display: block;
float: left;
background-image: url(…/app_themes/nedd/images/subpage/BreadcrumbNavSepBG.jpg);
background-repeat: no-repeat;
background-position: right;
padding-top: 2px;
padding-right: 10px;
padding-bottom: 2px;
padding-left: 8px;
display:inline;
}
#BreadcrumbNav span.CMSBreadCrumbsCurrentItem {
background-image: none;
}
#BreadcrumbNav a:hover {
}

HTML:
<div id=“BreadcrumbNav”> <p>You Are Here:</p><a href=“/KenticoCMS/” class=“CMSBreadCrumbsLink”>Home</a>
<a href=“/KenticoCMS/Providers.aspx” class=“CMSBreadCrumbsLink”>Providers</a>   <span class=“CMSBreadCrumbsCurrentItem”>Documentation Requirements</span>
</div>

Thanks,

2

Hi Matt
I think you just need to simplify your code - this is what i would do and should work on every browser. :wink:

.breadCrumbs{
padding: 5px 5px;
margin:0;
}
<p class=“breadCrumbs”>You are here: <a href=“/KenticoCMS/” class=“CMSBreadCrumbsLink”>Home</a> » <a href=“/KenticoCMS/Providers.aspx”>Providers</a> » <span class=“CMSBreadCrumbsCurrentItem”>Documentation Requirements</span></p>

So the » = is the character encoding for symbol you are using between each crumb - no need for a bg image. You can style it how ever you want.

There is no need to change the display of the elements: the paragraph element contains the links, which should all be inline.

You can use the span element to style specific parts.

Hope this helps.