CSS Vertical Space Issue for JQuery Galleriffic Slideshow

The Main Photo of the SlideShow appears differently for it's Left Margin between IE7 and IE8 and Firefox.

Within IE there开发者_Python百科 are several pixels extra vertical space for the SlideShow Image that do not show-up for the Controls Div (Blue Div w/ Play Slideshow).

However, the SlideShow Div and Controls Div appear correct for the Left-Margin in Firefox.

Here is how the Image appears with my IE8 Browser:

I cant determine why there is extra vertical space.

Here is the Development Site: http://www.davincispainting.com/InteriorGallery.aspx

The name of the CSS is: galleriffic-2.css.

<div id="slideshow" class="slideshow">
  <span style="opacity: 1;" class="image-wrapper current">
    <a class="advance-link" rel="history" href="#bigleaf" title="Title #2">
&nbsp;
      <img src="images/Portfolio/Interior/Normal/InteriorPic2a.jpg" alt="Title #2">
     </a>
  </span>
</div>

That   is what's causing the vertical gap in IE, it's causing a horizontal gap in others :o it would be better to remove it and use a margin on the image if you want a horizontal gap

You can just simply add IE's css hack on this, specific for IE6/7/8, ex:

margin: 5px 0 0 55px\9; // it's for IE8
*margin: 5px 0 0 55px; // it's for IE7
_margin: 5px 0 0 55px; // it's for IE6

but actually your most serious problem is that the slideshow doesn't even work on IE9, you should probably try to fix this or switch to other plugins.

Cheers