Take the 2-minute tour ×


I love Davids code, but like to know the best way to give it support in < IE7. My first idea was to use a statement "if there is a child add a class". The class would then link to a background image positioned in a similar way.

What would your solution be?

Here is Davids fiddle: http://jsfiddle.net/w9xnv/2/

Edit: support for this in < IE7:

.menu li > a:after { margin-left: 5px; content: '\25BA'; }
share|improve this question
< Ie7 ? Really so, IE 6? IE6 was released in 2001. Firefox 1 wasn't even released until 2004 and you aren't supporting firefox 1 are you? I know sometimes you don't have an option, but support for an 11 year old browser sure is pushing it. –  John Koerner Oct 20 '12 at 18:26
Okey, lets say support for only IE7 then. –  Victor Oct 20 '12 at 19:27
Agreed -- there really is no point supporting IE6. Even support for IE7 is being dropped by major sites these days. See the stats here and decide for yourself just how valuable it is to your site to support them. For what it's worth, I don't know of any way to support :after in IE7. –  Spudley Oct 20 '12 at 20:02
add comment

2 Answers

Unfortunately, I don't know of any way to support the :before and :after selectors in IE7 or earlier. It simply isn't supported.

For a lot of CSS stuff, there are hacks that can force old IEs to work -- tools like Selectivizr or CSS3Pie.

However I know of no such hacks for :after. Sorry about that.

You can research it for yourself:

My sincere advice is to drop support for IE7 on your site. Unless you have a specific need to support it, the odds are no-one will even notice -- there are very few IE7 users out there these days; the usage for it dropped off much quicker than IE6, and today they're both sitting at under 1% of global browser usage. Judge for yourself whether it's worthwhile sweating over that half percent of users (who are probably well used to seeing sites that don't work properly anyway).

share|improve this answer
This may be the case if you look at the www users as one population. The service we are building will be used on many government computers and they are unfortunately still using IE7. We don't really have an option. –  Victor Oct 21 '12 at 14:20
@Victor - that's fair enough; as I said, you need to judge for yourself. If you have a specific need to deal with IE7 then you need to code for it. Unfortunately, in that case the only advice I can give is not to use :after in your stylesheet (or if you do, accept that IE7 users won't see it). The good news is that a lot of ither CSS can be polyfilled, see the links I gave for help with that. –  Spudley Oct 21 '12 at 18:48
add comment
up vote 0 down vote accepted

It seemed that no one read that I wanted a jQuery backup for this. I understood already that there was no support for this with CSS for IE7.

Anyhow this is my solution, if someone would be looking for the same thing.

JS (jQuery):

<!--[if IE 7]>
    <script type="text/javascript"> 
         $(function () {
             $("#mainnavi li:has(ul)").addClass("ie7_dropdown_arrow");


#mainnavi .ie7_dropdown_arrow {
    *background: url(../images/dropdown_arrow.png) no-repeat right 0px;
    *padding-right: 20px;

#mainnavi .ie7_dropdown_arrow:hover {
    *background: url(../images/dropdown_arrow.png) no-repeat right -15px;   
share|improve this answer
add comment

Your Answer


