1

I am trying to build a step by step menu (just like a wizard) for an application. I found some code on the net that seems to be perfect for me.

I have created a JS Fiddle for the code.

The problem is that the example is based on before and after selectors that are not available for IE and it doesn't work in IE.

I know jQuery has before and after functions that could possible make it work for IE but I really don't have much expertise on jQuery to be able to find a solution.

What can I do to make this kind of menu work consistently across all browsers?

Nope
  • 22,147
  • 7
  • 47
  • 72
Neel
  • 613
  • 4
  • 14
  • 32

1 Answers1

1

In fact, all the :before and :after selectors do, is insert content before or after the element you apply it to. For older browser you could indeed resort to js, but then some of your visitors would still not see it as they might have js disabled.

You could just insert the required content straight in your html and give it a specific class, .a-after and .a-before for example. Then you can apply the styling to those in stead of to the :before and :after.

Because it is a bit hard to explain i took the liberty to update your fiddle with my suggestion. http://jsfiddle.net/9CsDr/2/ This should work fine in older browsers as well, as it does not use the :before en :after anymore. It does not make your code more pretty, but it works...

And i do agree with David Allen, working with background images would be my choice as well in this case!

Pevara
  • 14,242
  • 1
  • 34
  • 47
  • This is really great.. it is exactly what I was looking for.. I agree it does complicate the html a little but I think it is better than adding a external js or jquery plugin... thanks a lot – Neel Aug 19 '12 at 00:37