Cloning background image with parenthesis in file name

Question

I have a background image with a parenthesis in the filename:

<DIV style="BACKGROUND: url('http://site.com/image(8).png');"&gt;&lt;/DIV&gt;

This is fine normally, and there is no confusion because there are quotes around the file name.

Looking in IE's developer tools however, I see that the browser stripped the quotes for some reason.

<DIV style="BACKGROUND: url(http://site.com/image(8).png);"&gt;&lt;/DIV&gt;

Still, it works, so not a big deal. The problem comes when I try to use jquery's clone function.

Apparently, the output after clone() does not recognize the above image url as valid in IE8 and strips it out (other browsers, including IE7, are fine). And so I end up with this:

<DIV></DIV>

Anyone know how to fix this? That is, clone a background image with parenthesis in the url in IE8.

Thanks.

Also, as an addendum I have to use inline styling in for the relevant elements, so please don't recommend using a separate stylesheet.

Ad2: On escaping, After browser rendering the escaped entities becomes unescaped. Cloning again happens after page load, and the selected object to clone has unescaped characters in them.

Answer 1

Escaping the parentesis would work I guess. TBH, it would be the way I would use it on a URL.

Answer 2

you are misssing a quote character: "

<DIV style="BACKGROUND: url('http://site.com/image(8).png');&gt;&lt;/DIV&gt;

should be

<DIV style="BACKGROUND: url('http://site.com/image(8).png');"&gt;&lt;/DIV&gt;

you can see here that even the stackoverflow code formatter formats the code different

Answer 3

( for Left parenthesis '('

) for Right parenthesis ')'

Maybe that'll fix the problem?

Answer 4

Don't escape the parentheses with HTML entities (the browser is correct to treat entities in attributes as their literal character equivalent), escape them with URL entities:

( = %28
) = %29