Question

Trying to implement this gallery on my website.

http://coffeescripter.com/code/ad-gallery/

It is noted in the css file that the next and previous buttons won’t show up in IE6 unless a nonexistent background image is applied to .ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next. The code they used is invalid, but it works. I have also tried using a color instead and it does work, but not what I wanted.

I don’t want to point to a nonexistent image file or a blank.gif if possible. Does anyone know what causes this problem in IE6 and if there is a pure css workaround? zoom: 1 does not work in this case.

Answer 1

I presume your IE6 requirement is referring to the following snippet from the jQuery AD Gallery plugin’s stylesheet, jquery.ad-gallery.css:

.ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next {
      /* Or else IE will hide it */
      background: url(non-existing.jpg)\9;
    }

The \9 at the end of the background shorthand rule is actually a CSS Hack targeting IE6, IE7 and IE8 — not just IE6.

Note: Paul Irish wrote a Comprehensive List
of Browser-Specific CSS Hacks back
in 2009 which highlighted this
attribute parsing bug in IE/Win:

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

If you don’t want to use a 1 pixel transparent spacer.gif or non-existent file for IE (which would throw a 404 error), just modify the CSS to re-use one of the existing images in the gallery but specify the background-position’s X and Y property to be off the screen:

.ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next {
    /* Or else IE will hide it */
    background: url(ad_next.png) no-repeat -9999px -9999px\9;
}

This creative work-a-round will allow IE 6-8 to display the previous and next links, but won’t actually show the specified background image file, since the X and Y values position the background completely off the screen.