We have a lot of elements on the project I am working on that use ellipsis styles, which, of course, work fine with pure CSS in all major browsers but FireFox. We implemented the -moz-binding fix for that which references the xml file with the binding information for cropping an element defined with XUL/XBL as defined here and it worked great... Until we decided to move all our static files (CSS, images, etc) to performance optimized servers. The -moz-bindings no longer worked because FF has disabled XUL from working cross-domain as a security precaution.
I found a lot of references online about putting the binding xml directly into the url clause of the -moz-binding like this:
-moz-binding: url(data:text/xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%3F%3E%3Cbindings%20xmlns%3D%22http%3A//www.mozilla.org/xbl%22%20xmlns%3Axbl%3D%22http%3A//www.mozilla.org/xbl%22%20xmlns%3Axul%3D%22http%3A//www.mozilla.org/keymaster/gatekeeper/there.is.only.xul%22%3E%09%3Cbinding%20id%3D%22ellipsis%22%3E%3Ccontent%3E%3Cxul%3Adescription%20crop%3D%22end%22%20xbl%3Ainherits%3D%22value%3Dxbl%3Atext%22%3E%3Cchildren/%3E%3C/xul%3Adescription%3E%3C/content%3E%3C/binding%3E%3C/bindings%3E);
But that didn't work... the binding just fails and the element does not display at all in the browser. No error (that I can figure out how to capture at least) is thrown and so I can't diagnose what's going on.
I thought maybe it was just the way I encoded the xml but even trying the sample on the Mozilla documentation or this other sample doesn't work for me. I have tried simple html pages with nothing but an element with the Mozilla example and it fails. What is it I am missing configuration-wise to make this inline stuff work?
I am either looking for 1) a way to make the inline -moz-binding work or 2) a way to resolve it so that the external xml file works when the CSS is coming from another domain.
If anyone has advice it is much appreciated!
By the way, I'm not interested in any other solutions in applying ellipsis to fields (such as Javascript implmentations). This works fine for our purposes and is used too many places in the site as a CSS class to make a refactoring for another approach feasible.