2

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?

James A Mohler
  • 11,060
  • 15
  • 46
  • 72
David Morales
  • 17,816
  • 12
  • 77
  • 105

4 Answers4

2

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>​
Jezen Thomas
  • 13,619
  • 6
  • 53
  • 91
  • Can you tell us what *zoom does ? – commonpike Jan 20 '13 at 22:56
  • [`zoom`](http://stackoverflow.com/a/1794381/704015) is a property often used to trick IE into setting `hasLayout` on an element. That means the element is responsible for its own sizing and positioning, rather than relying more on its parent. I added an asterisk in front of the property so its only read by IE7. You can [read more about the star hack here](http://www.evotech.net/articles/IE7hacksamples.html#star2). – Jezen Thomas Jan 20 '13 at 23:56
  • Nice going. You downvoted me as revenge, and also because you don't understand the code. If you look a bit harder, you might notice that the first CSS expression creates an element with the class `.ie-after`, and the second expression injects it with HTML. [Here's a fiddle of the same code](http://jsfiddle.net/jedhunsaker/vcazd/). – Jezen Thomas Jan 22 '13 at 00:57
  • i downvoted you out of revenge and i didn't look at the code. i just saw the extra class and made a judgement. you are correct. my bad. – albert Jan 22 '13 at 02:11
  • i did try to upvote, said my answer was locked in. how do i get unlocked in? – albert Jan 22 '13 at 02:38
  • 1
    This is a ridiculous hack, I like it. – kand Mar 05 '13 at 21:11
0

Have you tried using CSS3Pie

http://css3pie.com/

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
0

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.

albert
  • 8,112
  • 3
  • 47
  • 63
  • I agree. I think it's the best solution for the download size. It's not the same to download a few bytes-sized gif than a few kilobytes-sized javascript. – David Morales Nov 21 '11 at 11:04
  • "or display:inline-block for that matter" only if elements native display is not inline. If it is than it is ok. – Ivan Ivanic Apr 27 '12 at 10:09
  • downvoting answers that have been accepted. keep on trolling. – albert Dec 11 '12 at 20:41
  • @jezenthomas what's incorrect? preciate the response, but your comment isn't helpful. – albert Jan 21 '13 at 22:31
  • @David wanted to know how to make his code work. Your answer doesn't make his code work. Mine does. – Jezen Thomas Jan 22 '13 at 00:54
  • 1
    @jezenthomas Oh, come on. If the question doesn't state that changing the HTML is not an option, it's worth suggesting. "My answer is better" is not a reason for a downvote; this a community, not a competition. +1 for a perfectly sensible option. – Isabelle Wedin May 01 '13 at 23:08
  • thx for the sensibility. i've been guilty of that before. nice to be reminded though. – albert May 01 '13 at 23:14
0

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

Strelok
  • 50,229
  • 9
  • 102
  • 115