tags:

views:

104

answers:

1

Is it possible to make these arrows with CSS and with all browser compatible including IE,6,7,8

or image is the only option?

Home > Products > Digital camera

+2  A: 

I think background images are your only real pure-CSS option, since content isn't well-supported (or supported at all) on earlier browsers.

If you're okay with it not being a pure CSS solution, you can fake it with Javascript, but of course that violates the "using CSS only" part of your question :-) (and requires that your site visitors have Javascript enabled). For instance, using Prototype:

document.observe("dom:loaded", handleDividers);
function handleDividers() {
    $$('nearly any CSS3 selector').invoke('insert', {
        bottom: ">"
    });
}

...puts a > at the end of any element matching the selector. You could do the same with jQuery, Closure, ... I think the quasi-equivalent jQuery would be:

$.ready(handleDividers);
function handleDividers() {
    $('nearly any CSS3 selector').append(">");
}
T.J. Crowder
is there any method to give support of `content` to non supported browsers?
metal-gear-solid
Yup, doesn't work in IE7 and lower. http://www.quirksmode.org/css/beforeafter.html
Pekka
@Jitendra there probably is using some horrible jQuery workaround :) But I would definitely go with the background image, too.
Pekka
@metal-gear-solid: By definition, any such method wouldn't be pure CSS. For instance, you could easily do it with Javascript.
T.J. Crowder
@Pekka - what would be jquery solution?
metal-gear-solid
@metal-gear-solid: I've added a couple of (untested) Javascript examples, one with jQuery, one with Prototype.
T.J. Crowder