hover/focus "bounce" in IE

Hi,

I can’t seem to find where to fix the “bounce” I get in IE6.

Here’s the link to the site (works in Firefox, somewhat in Safari – you have to hold the thumbnail down to see the graphic, versus the alternate in IE, you have to “lose focus” there to see the pic)
[url]http://imageengineering.com/pages/pyrotechnics.htm[/url]

Here’s what happens: Open the page in IE 6, click on thumbnail (nothing happens until you move the mouse off the thumbnail), picture is there and positioned correctly. Move over the “arrow” graphic and the picture bounces to the left (as positioned from the thumbnail) 363px(? I think, got to check the margin-left amt in css), then after you move off the arrow, it’s back to normal.

I’ve tried fixing a *html hack for the hover/focus, but it doesn’t work.

Any suggestions?

Here’s the working css:
/* slides styling */

/* this first item styles the block that surrounds the thumbnail gallery */
.photo {
padding:20px;
background-color:#CCCCCC;
width:680px;
height:auto;
text-align:left;
min-height: 330px;
}

/* this styles the headline included in the block of thumbnail gallery */
.photo h1 {
font-size:14px;
font-weight:bold;
color:#000099;
margin:0;
padding:0;
text-transform: capitalize;
}

/* this styles the body text that follows the headline */
.photo p {
font-size:12px;
line-height:13px;
color:#000;
font-family:Arial;
width:340px;
display:block;
margin-top:5px;
text-transform: none;
}
/* styles box for photos, keep as auto height in order to create underline fx */
.photo ul {
list-style:none;
padding:0;
margin:0;
width:360px;

background-image:url(../../images/IEboxbkg.jpg);
background-repeat:repeat-x;
min-height:2px;
position:relative;
height:auto;
}

/* outerbox for the thumbnails in the gallery */
.photo ul li {
display:inline;
width:100px;
height:100px;
float:left;
margin:4px;
}
/* IE specific to combat float drop */
*html .photo ul li {
margin:0;
padding:4px;
}

/* background graphic for the thumbnails in the gallery */
.photo ul li a {
display:block;
width:100px;
height:100px;
cursor:default;
background-image:url(../../images/thumbarrow.gif);
background-repeat:no-repeat;
text-decoration:none;
background-position: center;
}
/* IE Fix */
*html .photo ul li a {
position:inherit;
}

/* turns the thumbnail images off when displayed to the right */
.photo ul li a b {
display:none;
}
/* styles the thumbnail outlines in the gallery */
.photo ul li a img {
display:block;
width:100px;
height:100px;
border:1px solid #666;
border-top-color:#ccc;
}

/* makes the thumbnails shuffle on hover */
.photo ul li a:hover {
white-space:normal;
position: relative;
}
/* IE6 fix for thumbnail bump and shuffle */
*html .photo ul li a:hover {
white-space:normal;
position:absolute;
}
/* bumps the larger thumbnail up and to the left when hovering */
.photo ul li a.hor:hover img {
position:absolute;
left:-14px;
top:-14px;
width:114px;
height:114px;
border-color:#fc0;
}
/* IE change */
*html .photo ul li a.hor:hover img {
position:inherit;
}
.photo ul li a:active, .photo ul li a:focus {
position:static;
outline:0;
}
/* IE6 fix for thumbnail bump and shuffle */
*html .photo ul li a:active, .photo ul li a:focus {
position:inherit;
}

/* Styles the focused thumbnail to the right of the image */
.photo ul li a:focus.hor img, .photo ul li a:active.hor img {
background-color:#000;
position:absolute;
left:360px;
top:0;
width:320px;
height:320px;
border:1px solid #fc0;
padding:5px 5px;
}

/* styles the caption box that goes above the image */
.photo ul li a:focus b, .photo ul li a:active b {
display:block;
background-image:url(../../images/captiongradient.gif);
background-repeat:no-repeat;
background-position: top left;
position:absolute;
width:339px;
height:10px;
border:none;
top:0px;
left:340px;
color:#000000;
font-weight:normal;
padding:6px;
margin-top: -22px;
font-family:Arial;
font-weight:bold;
font-size: 11px;
font-style:italic;
text-align:right;
color:#fff;
}
.photofloattext1 {
font-family:Arial;
font-size:11px;
font-style:normal;
clear:both;
display:block;
}
.photofloattext1 a:hover {
color:#FF0066;
font-weight:bold;
text-decoration:none;
}
.photofloattext1 a:visited {
color: #333333;
font-weight:normal;
text-decoration:none;
}
.photofloattext1 a {
color: #0000CC;
font-weight:normal;
text-decoration:none;
}

.photofloatpic {
display: block;
float:left;
}

Thanks!

Amy

Also in #CSS _↴