Question

I am having problems getting jQuery to click on the images in the footer because of the margin: -107px 0 0 0; style applied to the footer. I don’t understand why this is causing a problem as I can still see the images in the DOM when I inspect the website. I also noticed that I am having problems highlighting the words “Grilled Chicken Pesto Sandwich” in the footer, and I believe this is also because of the margin: -107px 0 0 0; style applied to the footer.

Link to website

//jQuery
$("footer #thumbs ul li figure img").click(function() {
  var id = $(this).attr('id');
  $.backstretch(images[id]);
  $('html').css('background-size', 'cover');    
});

//css
footer {
  margin: -107px 0 0 0; //The -107px is causing the problem
  width: 100%;
  height: 107px;
  background: url(../img/bottom.png) repeat-x;
}

//html
<footer>
  <div id="thumbsDesc">Grilled Chicken Pesto Sandwich</div>
  <div id="thumbs">
    <ul>
      <li><figure><img id="0" src="img/01.jpg"></figure></li>
      <li><figure><img id="1" src="img/02.jpg"></figure></li>
      <li><figure><img id="2" src="img/03.jpg"></figure></li>
      <li><figure><img id="3" src="img/04.jpg"></figure></li>
    </ul>   
  </div>
</footer>

Answer 1

You need to decrease the z-index of the wrapper class, I tried this on firebug and I was able to select the text and click the images. No need to increase foot z-index
I used -10 for the wrapper

Edit: also if you remove the position relative on the wrapper, it works too so you can do whatever you think is best suited for all browser, I only played with this on FF