How come Firefox can't read an image path with a space when placed inside css?

Question

For example, something like this rule in a css

div.something { background-image: url(http://i2.photobucket.com/albums/y24/5609903697/Beyond Birthday/BB39.jpg); }

won't work in FF but will in IE because there is a space between "Beyond" and "Birthday". I know the solution is to either not have a space or put %20%, but just wondering why IE can handle this and FF can't.

Answer 1

Have you tried surrounding the url with single quotes?

background-image: url('/folder/file name.jpg');

This doesn't answer the why part, but I'm assuming it is because IE is just more forgiving and Firefox parses the CSS properly.

Answer 2

FF needs the url to be quoted. If you format the CSS as follows:

div.something {
  background-image:url('http://i2.photobucket.com/albums/y24/5609903697/Beyond Birthday/BB39.jpg'); 
}

...the file should work. At least it worked for me, when I tried with FireBug (while omitting the quotes didn't show a background image).

Answer 3

Simply put it in quotes.

Answer 4

Replace the space with "%20", like it's supposed to be encoded in Urls?

Answer 5

If you do not quote your URI, you must backslash-escape any characters that would cause the value to not be a URI token. Such characters include:

parentheses, commas, white space characters, single quotes (') and double quotes (")

See http://www.w3.org/TR/CSS2/syndata.html#value-def-uri.

When a parse error occurs on any rule, that entire rule is discarded. A compliant browser should never try to recover from such a parse error. In this case, Internet Explorer is not following the CSS recommendation, and its behaviour is incorrect. (IE gets CSS wrong. What else is new.)

Your CSS rule can be fixed by quoting as mentioned above, or by escaping as follows:

div.something {
  background-image: url(http://i2.photobucket.com/albums/y24/5609903697/Beyond\ Birthday/BB39.jpg);
}