CODEWITHSUNDEEP
cssinternet-explorer-7pseudo-class
David Morales
David Morales

Reputation: 18064

:after pseudoclass on IE7

I have this code, that shows a little triangle using pure CSS, and it works on all modern browsers, including IE8-IE9:

<html>
<head>
    <style>
        .arrow:after {
            display: inline-block;
            width: 0;
            height: 0;
            margin: 4px 0 0 4px;
            vertical-align: top;
            text-indent:-9999px;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid black;
            content: "&darr;";
        }
    </style>
</head>
<body>
    <div class="arrow">testing</div>
</body>
</html>

The problem is that it is not working on IE7, it just does not display the arrow.

I have seen people suggesting to use ie8.js, but it doesn't work either.

Does anyone know how to make it work on IE7?

Upvotes: 2

Views: 2612

Answers (4)

Jezen Thomas
Jezen Thomas

Reputation: 13800

Yes, this is possible in IE7 without the use of JS plugins. Don't let the naysayers fool you. Here's your updated code:

<html>
<head>
<style type="text/css">
    .arrow:after {
        display: inline-block;
        width: 0;
        height: 0;
        margin: 4px 0 0 4px;
        vertical-align: top;
        text-indent:-9999px;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid black;
        content: "&darr;";
    }
    .arrow {*zoom: expression( this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i")).className="ie-after" );}
    .arrow .ie-after {*zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = '&darr;');}
       </style>
</head>
<body>
    <span class="arrow">testing</span>
</body>
</html>​

Upvotes: 2

Strelok
Strelok

Reputation: 51451

http://code.google.com/p/ie7-js/ project claims support for :after, :before and content. You would use the IE8.js part of it.

Test page: http://ie7-js.googlecode.com/svn/test/index.html

Upvotes: 0

albert
albert

Reputation: 8153

style .arrow in conditional comments specifically for ie7. ie7 doesn't understand :after,:before,:content or display:inline-block for that matter. without looking at the site, it's hard to offer a solid fix. offhand, i'd make it display:block; with a text-indent and use background-image.

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

Have you tried using CSS3Pie

http://css3pie.com/

Upvotes: 0

Related Questions