SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Location
    Hillsborough NH
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Having serious breadcrumb layout issues in IE7

    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> &nbsp; <span class="CMSBreadCrumbsCurrentItem">Documentation Requirements</span>
    </div>


    Thanks,
    Attached Images Attached Images
    Matt Nelson
    Nelson Design Studios
    www.nelsondesignstudios.com

  2. #2
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Matt
    I think you just need to simplify your code - this is what i would do and should work on every browser.

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

    So the &raquo; = 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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •