background image disappears

[tiborsaas]

The following rule is parsed in a wrong way:

background-image: url( ../img/ricepaper2.png );

the spaces are converted to %20 and the result is that the image cannot be found.

[LeaVerou]

Hi, are you sure those spaces are actually valid?

[tiborsaas]

Yes, it is valid:
http://www.w3.org/TR/CSS21/syndata.html#value-def-uri

[LeaVerou]

Is it fixed?

[tiborsaas]

Yes, it is ok now.

[tiborsaas]

The issue isn't completely resolved, I've just noticed it. Last time I checked it it looked fine, but now I decided to use your script in my current project so I included it and it still broke the background images. I checked the test case and it worked. Finally I realized that if you view the file directly, not via localhost or a server it works, otherwise don't.

[LeaVerou]

Chrome does not allow cross-origin requests on file://. It's listed as one of -prefix-free's disadvantages in a very prominent place in its page.

[tiborsaas]

Yes, but prefixfree breaks when I use it through localhost. It converts the bg url to:
transparent url("http://localhost/mycloud.fm/assets/css/ slider-handle.png") no-repeat left top

[LeaVerou]

That tells me nothing on its own. What's the URL of the page? Of the CSS file? The original URL of the image? What should it be converted to?

[tiborsaas]

Ok, it was not so precise. I didn't change anything in your code other than the space in the body background image URL.
URL: http://localhost/labs/LeaVerou-prefixfree-2999f9e/index.html

Original rule:
background: transparent url( ../img/noise.png ) repeat left top;

Converted
background: transparent url("http://localhost/labs/LeaVerou-prefixfree-2999f9e/css/ ../img/noise.png") repeat left top;

If I view it with file:// it works I guess since it can't find any root URL.

[LeaVerou]

Oh, I get it now. There is a space in the URL.

[andyperlitch]

Having a similar problem (I think). I put up a testcase here: http://euphoricmanagement.com/prefixfree/.

Basically the stylesheet "sprites.css" is not being loaded correctly. But the other stylesheets are loading correctly. I don't think its my CSS because when I turn off javascript, everything displays correctly.

Any help would be appreciated! Thanks, you rock!

[LeaVerou]

I don't think it's the same issue. The issue in this thread is when spaces exist between the parentheses of url() and the actual URL, and the URL is additionally a relative one. In your case there are no such spaces (at least I didn't see any in that file).

Also, I'm not sure exactly what's not loaded correctly. Every image from sprites.css is applied to the page I see (Chrome 18 on OSX). Could you point me to the issue or make a simpler testcase, please? Thanks!

[andyperlitch]

Ok, just checked in Safari/Chrome and it's working, however when I view it (http://euphoricmanagement.com/prefixfree/) in Firefox 2.0, the main title image and follow links do not have appropriate styles (I think everything on that sprites.css file isn't coming through in FF). I think you have already seen the expected result in chrome, but just to prove that its not FF misinterpreting my CSS, you can either disable js for the page or view http://euphoricmanagement.com.

I initially thought it was an encoding issue because when I view the Response (in the Firebug console) of the sprite.css request, it was all garbled characters... If you can't see it I'll try to recreate the issue in a simpler testcase.

Thanks again!

[LeaVerou]

Yes, I can see it in FF. It seems like an encoding issue. Looking into it.

[LeaVerou]

I'm pretty sure it's an encoding issue, but I can't pinpoint exactly what. It's probably related to a Firefox bug, as it only happens with Firefox. Could you please make a reduction of the problem (e.g. only one CSS file, containing only one CSS rule applied to a very simple —or even empty— HTML page)? Then I'll be able to take it to friends working at Mozilla and they might be able to help more.

In the meantime, you can use the data-noprefix attribute in that <link> element, to prevent it from being processed by -prefix-free (since it doesn't seem to have anything that needs prefixes anyway, so it's a waste to pass it through -prefix-free).

[andyperlitch]

Lea -

Thanks so much for the help. I tried setting up a simple test case but
strangely could not recreate the bug...I'll let you know if and when i am
able to.

Thanks,
Andy

On Tue, May 1, 2012 at 3:39 PM, Lea Verou <
reply@reply.github.com

wrote:

I'm pretty sure it's an encoding issue, but I can't pinpoint exactly what.
It's probably related to a Firefox bug, as it only happens with Firefox.
Could you please make a reduction of the problem (e.g. only one CSS file,
containing only one CSS rule applied to a very simple —or even empty— HTML
page)? Then I'll be able to take it to friends working at Firefox and they
might be able to help more.

In the meantime, you can use the data-noprefix attribute in that
<link> element, to prevent it from being processed by -prefix-free (since
it doesn't seem to have anything that needs prefixes anyway, so it's a
waste to pass it through -prefix-free).

---

Reply to this email directly or view it on GitHub:
#59 (comment)

[DavidBradbury]

It doesn't fix the issue, but please stop using spaces in your URI's. It makes a panda cry every time you do it. Think of the pandas.

[tiborsaas]

Yes, I'll stop using it. It will significantly decrease the load time, and will be more easy to read. Humanity is saved now.