Riskbreaker
Riskbreaker

Reputation: 4791

CSS :after on ie7, jquery pattern

I am trying to figure this issue:

I have a :after class on my menu that shows an image and its working well after I work with this method:

:after and :before css pseudo elements hack for IE 7

I added the jquery that was mentioned there:

http://jquery.lukelutman.com/plugins/pseudo/

working good locally, but when I added this in my server it works well on homepage (IE7) url-homepage/images/image.jpg.

...But when I go to another page the pseudo does the path like this: url-homepage/about/images/image.jpg...how can i prevent this..I assume its the pattern on the js..

    var patterns = {
    text: /^['"]?(.+?)["']?$/,
    url: /url\(["']?(.+?)['"]?\)$/
};

function clean(content) {
    if(content && content.length) {
        var text = content.match(patterns.text)[1],
            url = text.match(patterns.url);
        return url ? '<img src="' + url[1] + '" />': text;
    }
}

Anyone know how to get it to be only go to one path (/path/images/)?

Upvotes: 2

Views: 475

Answers (1)

marty
marty

Reputation: 4015

Would be interesting to see your CSS, but in lack of that I guess that your content should read:

url(/images/image.jpg)

starting with the slash so that the path starts at your server's root (instead of being relative to your current folder).

Edit: So, in summary I'd suggest the following style:

#yourElementId, #yourElementId:after {
    after: url(/images/image.jpg);      /* IE7 polyfill */
    content: url(/images/image.jpg);    /* css for other browsers */
}

Upvotes: 4

Related Questions