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,