Css background images not being cached by FireFox

Question

I am dynamically adding <link> tags to the page using YUI3 and this works properly.

For testing purposes I have two nearly identical css files which include the exact same background images however when I load the second css file, Firebug shows that more http requests are being made for the same images in the first css file.

The JS

Y.one('head').appendChild(Y.Node.create('<link rel="stylesheet" id="' + cObject[target] + 'css' + '" type="text/css" href="css/' + c[target] + '.css" />'));

A css bg example

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

I obviously would like this to not happen but don't know where to start looking. This may do the same in other browsers but I do not know what plugins are available (if any) for the other browsers.

EDIT: The headers appear to be fine but that bug might be the culprit...What can I use in IE/Chrome/Safari to test for the http requests to see if it is ONLY FF?

Answer 1

Possibly it's the same problem as described here: http://stackoverflow.com/questions/657966/browser-cache-bypassed-in-firefox

Answer 2

Check the HTTP headers being sent in the image response.

Look particularly for headers that impact client-side caching, such as Expires, Etag, Last-modified, etc...

Check that they are being set/sent correctly, and that you know how to use them.