CSS styling of breadcrumb navigation in IE8 using pseudo :before and :after elements

Question

I've been trying for a long time to create a cross-browser compatible breadcrumb navigation that works in >= IE8 as well as all newer browsers.

Here is the closest I've come: http://codepen.io/anon/pen/jlbck

(The above link doesn't work in IE8, but you can see the end result here: http://codepen.io/anon/full/jlbck)

I have no idea what I can try to get this working. The problem seems to be that the absolutely positioned li:before element isn't appearing above the li. The css seems fine to me - especially as it works in all newer browsers - but does anyone know of an IE hack that can fix this for IE8?

Edit (sorry, thought it was enough to provide code just in a demo)

HTML:

<ul class="progress">
  <li class="first">One</li>
  <li class="current">Two</li>
  <li>Three</li>
  <li class="last">Four</li>
</ul>

CSS:

.progress {
    list-style: none;
    padding: 0;
    height: 24px;
    overflow: hidden;
}
.progress li {
    display: inline-block;
    width: 100px;
    text-align: center;
    padding: 4px 10px 2px 15px;
    margin: 0 1px 0 0;
    height: 20px;
    position: relative;
    background-color: #E4E4E4;
    font-size: 13px;
}
.progress li:after {
    content:" ";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 10px solid #E4E4E4;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    left: 100%;
    z-index: 3;
}
.progress li:before {
    content:" ";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 10px solid #fff;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    margin-left: 3px;
    left: 100%;
    z-index: 2;
}
.progress li.first {
    padding-left: 10px;
}
.progress li.current {
    background-color: #029E4A;
    color: #fff;
    font-weight: bold;
}
.progress li.current:after {
    border-left: 10px solid #029E4A;
}
.progress li.last:before, .progress li.last:after {
    display: none;
}

Please include the relevant code *here* in your question as well as in a demo. — David Thomas, Jul 22 '13 at 13:46
Did you find a solution to your problem? If yes, please share with the community! — AymKdn, Nov 25 '14 at 17:01
I honestly don't recall now, but I don't think that I did. This question is no longer relevant to me, so I'll vote that it be closed. — RobMasters, Nov 26 '14 at 09:54

score 0 · Answer 1 · edited May 23 '17 at 12:03

0

This could be related to the general problem of IE8 struggling with pseudo elements (:before, :after). I have experienced this with font icons. I found this thread helpful: IE8 CSS @font-face fonts only working for :before content on over and sometimes on refresh/hard refresh

This was the solution that I implemented (with YUI):

    _redrawIcons: function (node) {
        var style;
        if (Y.UA.ie === 8) {
            style = document.createElement('style');
            style.type = 'text/css';
            style.styleSheet.cssText = ':before,:after{content:none !important;}';
            node.appendChild(style);
            setTimeout(function () {
                node.removeChild(style);
            }, 0);
        }
    },

edited May 23 '17 at 12:03

Community

1
1

answered Jul 22 '13 at 14:05

JacobMcLock

435
1
3
11

Sorry if this is wildly off-base. I wasn't able to recreate your scenario since it requires IE8. – JacobMcLock Jul 22 '13 at 14:06
I just had a look at this but can't find anything relevant to my particular problem. Thanks anyway. – RobMasters Jul 22 '13 at 14:09

CSS styling of breadcrumb navigation in IE8 using pseudo :before and :after elements

1 Answers1