Image Thumbnail Viewer - unwanted border around thumbnail images

[solder_on]

1) Script Title: Image Thumbnail Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

3) Describe problem:
I am currently experimenting with this (excellent) script, and have managed to make a few minor changes to the css & javascript files with regard to border styles/fonts/titles etc without trashing the script. BUT, using Firefox as my browser I get a black border around each thumbnail image, which changes to grey on mouseover. I don't mind this too much (it's my default link style, so I suspect it's somehow related), but when I try it with IE7, the borders change to static (no change on mouseover) purple & blue. I figured if I could get rid of the border entirely this would resolve the problem, but haven't been able to identify the right section of code.

The borders don't appear on your demo - so I may be stuck with it ?

I don't think I can give you a link as my page isn't published anywhere, so here's the modified css:

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

#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
font: bold 13px Verdana;
letter-spacing: 1px;
line-height: 1.1em;
color: #000000;
padding: 3px 0;
text-align: center;
}


#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: #FFFFDD;
}

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

The only change I've made to the javascipt is to change the text displayed to close the window.

Here's the relevant section from my page:

<td><a href="Images/km_breakthrough_lg.jpg" "" rel="thumbnail" title="<center>Breakthrough<br />Dimensions<br />Price</center>"><img src="Images/km_breakthrough_tb.jpg" /></a></td>
<td><a href="Images/km_es_lg.jpg" "" rel="thumbnail" title="<center>Estuary Sands<br />Dimensions<br />Price</center>"><img src="Images/km_es_tb.jpg" /></a></td>
<td><a href="Images/km_es2_lg.jpg" "" rel="thumbnail" title="<center>Estuary Sands 2<br />Dimensions<br />Price</center>"><img src="Images/km_es2_tb.jpg" /></a></td>
<td><a href="Images/km_church_lg.jpg" "" rel="thumbnail" title="<center>Church<br />Dimensions<br />Price</center>
" ><img src="Images/km_church_tb.jpg" /></a></td>

Thanks in advance...

[Veronica]

I don't think it's the changes you made. It's your other styles. Try giving the thumbnails no border

<img src="Images/km_church_tb.jpg" style="border:0;">

Or give them a class and set the border to 0 for that class in your css

[solder_on]

Brilliant - I've added your border=0 suggestion and it works a treat - fortunately for me as I don't know how to do the css class stuff - I'm still very much a beginner & extremely daunted by it all!!

Many thanks for the swift response.

[Veronica]

To add a class for your link, you would just add a class with the name of your choice (let's say "noborder"):

<img src="Images/km_church_tb.jpg" class="noborder"/>

Then in your style sheet, you would say what you want anything with that class to do (in this case, not have a border):

<style>
.noborder {border:0}
</style>

If you want a good tutorial of css, try http://www.w3schools.com/css/css_intro.asp

[solder_on]

Much appreciated Veronica

As you may have guessed I'm a bit of a technophobe, and am currently still getting to grips with basic html. I've so much to learn that it's all a bit scary, so thank you for the tip !