CODEWITHSUNDEEP
javascriptcssinternet-explorer-7internet-explorer-6pseudo-element
calebo
calebo

Reputation: 3432

Alternative solution to css pseudo element :before for IE6/7

I've created a slide carousel and it uses pseudo element :before to identify the current item you are on, however pseudo element isn't supported in IE6/7.

Wondering if anyone can think of an alternate solution to have pseudo element working for IE6/7.

Here's what my page looks like: http://jsfiddle.net/Qcwta/

JavaScript solutions are acceptable as well.

Upvotes: 2

Views: 3271

Answers (3)

leopic
leopic

Reputation: 3002

I've used IE9.js in the past, works quite well and adds the :before/:after 'element's along with other niceties.

That's the only solution I've come up with.

Upvotes: 1

wheresrhys
wheresrhys

Reputation: 23500

I woudl add an extra element to the dom as follows.

Javascript

for (var i = 0; i < slides.length; i++){
            slideCount += '<li id="slide'+ i+'"><span class="highlight"></span><span>'+(i+1)+'</span></li>' ;
        }

Css

#carousel #slideCount li .highlight {
    display:none;
}

#carousel #slideCount li.current .highlight,
#carousel #slideCount .test {
    border: 5px solid #ccc;
    content: '';
    display: block;
    height: 120px;
    left: -5px;
    position: absolute;
    top: -15px;
    width: 201px;
    z-index: 3;
}

Upvotes: 0

powtac
powtac

Reputation: 41040

Why don't you use jQuery, it supports the :before selector also for IE 6. See also CSS :before/:after Selectors in IE 6,7

Upvotes: 0

Related Questions