IE7 CSS/Js Bugs...Help!

Question

I'm helping a friend do a little jquery, and along with that is some simple CSS work...but I'm no CSS expert, and things (as usual) are acting a fool in IE7--I think they are fine in IE8, but the client needs it to work in IE7...ahem.

I forgot to mention specific problems:

1. The Main nav contains a drop-down. In IE7 it doesn't work.
2. The content/pic scroller acts a bit funny--there is a border around the first image (that should stay as a background image). In IE7, it scrolls with the first image.

Can you please help me by showing my error!? I'm not sure what the problem is, but I'm almost sure it's CSS related...

Suggestions and ideas are most welcome! Thanks for your time! I know IE is a pain sometimes! :)

Here's the dev site link.

Answer 1

Try adding to your style.css:

li.drop-down > A {
    text-indent: -4000px;
    width: 4000px;
}

IE 7 is not triggering mouseenter event probably because it cannot see the element with such a large indent. Adding width makes it more visible to the browser at least.

Edit: Alternatively you could trigger the mouseenter on the li itself, rather than the anchor.

$("li.drop-down").bind("mouseenter",function(){
  var _li=$(this);
  $(".subMenu").slideUp("fast");
  $("."+_li.attr("id")).stop(true, true).slideDown("fast");
});

As for the background border issue, try wrapping your UL of images in a plain DIV.

<div>
  <ul style="width: 3100px; margin-left: -384.733px;"><li style="margin-left: -620px; float: left;"><img src="Eastside%20Baptist%20Home%20Page_files/jQueryPlaceHolder4.jpg" alt="Fourth Picture"></li>
    <li style="float: left;"><img src="Eastside%20Baptist%20Home%20Page_files/jQueryPlaceHolder.jpg" alt="jQueryPlaceHolder"></li>
    <li style="float: left;"><img src="Eastside%20Baptist%20Home%20Page_files/jQueryPlaceHolder2.jpg" alt="Second Picture"></li>
    <li style="float: left;"><img src="Eastside%20Baptist%20Home%20Page_files/jQueryPlaceHolder3.jpg" alt="Third Picture"></li>
    <li style="float: left;"><img src="Eastside%20Baptist%20Home%20Page_files/jQueryPlaceHolder4.jpg" alt="Fourth Picture"></li>
    <li style="float: left;"><img src="Eastside%20Baptist%20Home%20Page_files/jQueryPlaceHolder.jpg" alt="jQueryPlaceHolder"></li>
  </ul>
</div>