div needs a background to act as a trigger 
<p>I have a simple slide show that I am working on from a book (jQuery, novice to ninja)</p>

<p>It all works fine in everything except IE8 (and I am guessing 7)</p>

<p>Its triggered by a div that is placed above the slide show. It has a link in it which is sent off screen. The trigger div has no background (obviously!). </p>

<pre><code>#photos {
border: 1px solid #BEBEBE; 
height: 350px;
overflow: hidden;
position: relative;
z-index:1;
width: 350px;
}

#photos ul {
left: 0;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
z-index:2;
top: 0;
width: 1400px;
}

#photos li {
float: left;
}

#trigger {
position:relative;
left: 0;
top: 0;
z-index: 10;
text-indent: -9999px;
height:150px;
width:350px;
display: block;
}
</code></pre>

<p>Here's the html</p>

<pre><code>&lt;div id="photos"&gt;
&lt;div id="trigger"&gt;&lt;a href=""&gt;hi&lt;/a&gt;&lt;/div&gt;
&lt;ul id="photos_inner"&gt;
&lt;li&gt;
&lt;img alt="Glendatronix" src="images/clothes001.gif" /&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;img alt="Glendatronix" src="images/clothes002.gif" /&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;img alt="Glendatronix" src="images/clothes003.gif" /&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;img alt="Glendatronix" src="images/clothes004.gif" /&gt;
&lt;/li&gt;

&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>And lastly some jQuery - there's more which I'll happily post if anyone wants to see it. I can't even get simple alerts to work in IE8</p>

<pre><code>gallery.init = function() {
    $(gallery.trigger)
        .mouseout(function() {alert("hit mouseout")})
        .click(function() {alert("you clikced")})
</code></pre>

<p>What's weird (to me) is that if I reduce the height of the trigger div, and then give it a background colour it works fine. In other words it seems to need a background colour to take up its sizes???</p>

<p>ANyone got any ideas for what I need to try - don't really want the background colour there obviously</p>

<p>Thanks</p>

<p>E</p>

<p>Here's the rest of the jq. I realise that I might not have put enough in before.</p>

<pre><code>$(document).ready(function() {
        gallery.trigger = $("#trigger");
        gallery.content = $("#photos_inner");
        gallery.scroll = false;
        gallery.width = 350;
        gallery.innerWidth = gallery.content.width();
        gallery.timer = false;  

        gallery.init();

});

gallery = {};


gallery.offset = function() {
    var left = gallery.content.position().left;
    if (gallery.scroll == '&gt;') {
        if (left &lt; 0) {
            left += gallery.width;
        }
    } else {
        if (left &lt;= 0 &amp;&amp; left &gt;= ((gallery.innerWidth * -1) + (gallery.width * 2))) {
        left -= gallery.width;
        }
    }
    return left + "px";
}

gallery.slide = function() {
    if (gallery.timer) {
        clearTimeout(gallery.timer);
    }
    if (gallery.scroll) {
        $(gallery.content)
        .stop(true,true)
        .animate({left: gallery.offset()}, 500);
        gallery.timer = setTimeout(gallery.slide, 1000);
    }
}

gallery.direction = function(e,which) {
    var x = e.pageX - which.offset().left;
    gallery.scroll = (x &gt;= gallery.width / 2) ? "&gt;" : "&lt;";
}

gallery.init = function() {
    $(gallery.trigger)
        .mouseout(function() {alert("hit mouseout")})
        .click(function() {alert("you clikced")})
        .mouseout(function() {gallery.scroll = false;})
        .mousemove(function(e) {gallery.direction(e,gallery.trigger);})
        .mouseover(function(e) {
        gallery.direction(e,gallery.trigger);
        gallery.slide()
    });
}
</code></pre>
