Question

I have used Yahoo YUI Compressor for .net to minify my css and js and for some reason my fancybox close button is not appearing. If I use the non-minified css and js files then it appears ok. Any ideas why this might be happening?

Here’s the relavant part of my build file

<ItemGroup>
      <CssFiles Include="../src/UserInterface/Content/css/styles.css" />
      <CssFiles Include="../src/UserInterface/Content/css/mcfcStyle.css" />
      <CssFiles Include="../src/UserInterface/Content/js/fancybox/jquery.fancybox-1.3.4.css"/>
      <JavaScriptFiles Include="../src/UserInterface/Scripts/jquery-1.6.4.min.js">
        <CompressionType>None</CompressionType>
      </JavaScriptFiles >
      <JavaScriptFiles Include="../src/UserInterface/Scripts/jquery.cycle.all.latest.min.js">
        <CompressionType>None</CompressionType>
      </JavaScriptFiles >
      <JavaScriptFiles Include="../src/UserInterface/Scripts/jquery.countdown.min.js">
        <CompressionType>None</CompressionType>
      </JavaScriptFiles >
      <JavaScriptFiles Include="../src/UserInterface/Scripts/jquery.carouFredSel-5.5.0-packed.js"/>
      <JavaScriptFiles Include="../src/UserInterface/Scripts/jquery.tipsy.js"/>
      <JavaScriptFiles Include="../src/UserInterface/Scripts/script.js"/>
      <JavaScriptFiles Include="../src/UserInterface/Content/js/fancybox/jquery.fancybox-1.3.4.pack.js"/>
    </ItemGroup>

By the way we deploy today so I need a fix.

In styles.css I have

.close-history { display:block; width:30px; height:30px; background: url(../js/fancybox/fancy_close.png) no-repeat; text-indent: -999em; position:absolute; top:-15px; right:-15px; }

In jquery.fancybox-1.3.4.css I have

.fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_close.png', sizingMethod='scale'); }

Answer 1

9 times out of 10, it is a path issue to the img background. Is the relative path for the background in the css still correct after minification?