Hi All,
I am creating a site which I am using the dynamic drive image thumbnail viewer, which works fine in ie8 and firefox but in ie7 when i add a title to the image and click them, the border goes the width of my screen and the picture is displayed on the left side.

The second time i click an image the image doesnt show but i still get the border????

here is my code for the image;

[a href="images/galleries/gallery/Mammal portraits/RedFox_portrait_AP2.jpg" title="Red Fox Portrait" rel="thumbnail"><img src="images/galleries/gallery small/Mammal portraits/RedFox_portrait_AP2.jpg" title="Red Fox" width="145" height="145" border="0" /></a>]

when i add a [alt] tag instead of a [title] tag it doesnt show the alt it only seems to show the [title] tags?

here is the css for the above;
[/*javascript gallery */


#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px;
padding-bottom: 0;
background: #d8d5cc;
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}

#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
font: bold 14px Tahoma;
letter-spacing: 5px;
line-height: 1.1em;
color: white;
padding: 5px 0;
text-align: right;

}


#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: white;
font-family:"Myriad Pro Light", "Century Gothic";
font-size:10px;
color:#968d78;
font-weight: normal;
text-align:centre;
}

#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: #EFEFEF;
padding: 5px;
z-index: 5;
}]

in ie8 and firefox it works fine and puts the border around the image and shows the title below the image.

any help would be appreciated?

if you require any other code please ask.