SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Breadcrumb list issue in IE

    I am having an issue with a ul based breadcrumb. The caret that is used as a delimiter is a background graphic.

    In IE ,when a line item wraps in the breadcrumb, the caret for that line item disappears. This only happens in IE. I did some investigating, and if I leave the font-family property at its default setting, or as serif, the wrapped list item works fine, but as soon as I define some other font, the caret dissapears.

    I have created a test page that you can see at:
    http://www.theworkshopproject.com/breadcrumb_only.html

    The first breadcrumb example does not have a font assigned to it and it works. the second breadcrumb example has the font arial assigned to it, so the wrapped items' caret dissappear.

    Here is the CSS---
    <style type="text/css" media="screen">

    /* --- Document Elements --- */
    body { background: #FFFFFF; color: #666666; margin: 0px 0px 15px 0px; }

    .navbreadcrumb { clear:both; width: 760px; margin: 0 auto; text-align: left; padding: 0px 0px 10px 0px; background-color: #ffffff;}
    .navbreadcrumb ul { list-style-type: none; margin: 0px 0px 0px 0px; padding: 10px 0px 0px 17px; }
    .navbreadcrumb li { display: inline; background: url(/images/breadcrumb.gif) no-repeat 5px 5px; font-size: 12px; font-weight: bold; padding: 0px 0px 0px 15px; }
    .navbreadcrumb li.start { background: none; padding: 0px 0px 0px 0px;}
    .navbreadcrumb li a { font-weight: normal; }

    </style>


    I am open to anyone's thoughts on this.

    Thanks in advance,
    JPS

  2. #2
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Strange. The > disppears in both examples in both IE for me. It's there in FF though.

  3. #3
    SitePoint Evangelist figbeam's Avatar
    Join Date
    Jun 2004
    Location
    Sweden
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, it's not the font family. Try to make the div .navbreadcrumb 10px narrower so the list items will wrap in both divs. You'll see that the picture disappears in both.

    I'm going to mess around with it for a while and see if I get somewhere. I have a feeling that the image is really outside the .navbreadcrumb div's left edge. Inline elements are wonderful but weird entities and strange things happen when they wrap.

    ...
    ...

    No, couldn't get it to work. Maybe you could use the image in the foreground instead. It's a bit more code but it works. Haven't tried using :before, and I'm not sure if IE understands that...
    Last edited by figbeam; Jan 19, 2006 at 14:31. Reason: Correction of spelling, and then some...

  4. #4
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Foreground ???

    Quote Originally Posted by figbeam
    Maybe you could use the image in the foreground instead. It's a bit more code but it works. Haven't tried using :before, and I'm not sure if IE understands that...
    Figbeam -

    What do you mean by foreground? I can get the ">" image to show up if I just insert it inline as an <img> element. Is that what you mean?

    JPS
    ===========================

  5. #5
    SitePoint Evangelist figbeam's Avatar
    Join Date
    Jun 2004
    Location
    Sweden
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, that's it.


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
  •