View Full Version : Extra border around thumbnail, inside of blue hyperlink border

01-05-2003, 09:43 PM
I could use something like this, but have not been able to determine how to get it done.

The scenario:
I have a thumbnail image that is linked to its larger counterpart I want the blue hyperlink border=1 around the thumbnail I basically want to have a 1px white border between the blue 1px border and the thumbnail -- to set it off. It's hard to see the blue border on darker thumbnails.

Any ideas how I'd get that extra white or transparent (1 pixel) sandwiched between the 1 pixel blue hyperlink border and the thumbnail image --- WITHOUT adding the white border to the actual image? I want to do this with CODE...not an image manipulation program.

01-05-2003, 09:50 PM

01-05-2003, 09:55 PM
Where would that go - in the image tag?

01-05-2003, 10:41 PM
I am having difficulties including this code in the <img> tag. Any help?

Actually, having exact example code for BOTH the <img> tag and CSS styles would be beneficial for me (and others).

01-05-2003, 10:48 PM
can you post a link to your page?

01-05-2003, 10:58 PM
Well, I don't have a working example up right now. I'm just using a standard img tag with hyperlink. For example:

<a href="http://www.yahoo.com"><img src="myimage.gif" alt="Click for larger image" align="left" width="100" height="50" border="1"></a>

The CSS I have is as follows...but I would need to know how to simply add this to a single image as well as to all designated images (using <span class="thumbnail"></span>).

A:link, A:visited, A:active {
COLOR: #0000FF;
A {
FONT: 10pt Verdana, Arial, Helvetica, sans-serif, 'Times New Roman' normal;
COLOR: #000080
A:link {
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif, 'Times New Roman';
FONT-SIZE: 10pt;
FONT-STYLE: normal;
FONT-WEIGHT: normal;
COLOR: #0000FF
A:visited {
COLOR: #0000FF;
A:hover {
text-decoration: underline
A:active {
font-style: italic

01-06-2003, 12:43 AM
Here's a test page (no CSS). Having this as a CSS option would be good, too. But I need to learn it in <img> tag format first.


01-06-2003, 12:51 AM
try this:
<style type="text/css">
{ border: 2px solid blue;
background: #ffffff;
padding: 2px;

{ border: 0px;



<a href="#" class="imagelink"><img src="image.gif" width="100" height="100"></a>

01-06-2003, 02:00 AM
Cool. I now have two test pages. The first is thumbnail.htm (http://www.geocities.com/gordonmerrill/thumbnail.htm) and uses CSS in the <head>. The second, thumbnail2.htm (http://www.geocities.com/gordonmerrill/thumbnail2.htm), simply uses styles in the <img> tag.

Oh, to get it transparent (at least in my IE browser), I simply substituted it with #FFFFFF:
.imagelink { border: 2px solid blue; background: transparent; padding: 2px; }

I also tried adding this code to just a single image inside the <IMG> tag, but the padding is being ignored! Any clues?
See THIS PAGE (http://www.geocities.com/gordonmerrill/thumbnail2.htm).
<a href="http://www.yahoo.com"><img style="border: 5px solid blue; background-color: transparent; padding: 10px" src="2.gif" width="150" height="112"></a>

While I (personally) only care about the IE browser, I am always interested in other browsers viewing capabilities. I generally also test my pages in N4.x and N6.x.

The thumbnail.htm page (has only one image on it) has a large portion of the padding black in N4.x and shows the whole border/padding deal scrunched towards to bottom of the image in N6.x.

The thumbnail2.htm page (2 images) has the border/padding deal in a small (separate) box below the image, but works perfectly in N6.x.

:confused: :confused: :confused:

01-06-2003, 02:41 PM
Here's another testpage. Doesn't work in NN4 I guess (didn't test) but looks the same in IE, NN7, Moz and Opera on Mac...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<style type="text/css">
a {
border:1px solid blue;
img {
border:1px solid white;
<a href=""><img src="image.jpg" /></a>

01-07-2003, 03:59 AM
That's quite interesting MCookie! It does work just as it should.

Unfortunately, it's not a solution for my problem. You're declaring the image size in the CSS. The code I would need should be available to ANY image on the page so designated as a thumbnail. My images (even my thumbnails) are varying sizes. Therefore, the width/height of the images has to be given in the <img> tag.

01-07-2003, 06:02 PM
You can declare sizes and styles in any attribute or tag. I think your problem is the xhtml DTD. It won't work if you take that out. So you have to write your page in (transitional) xhtml...

01-08-2003, 02:43 AM
So you have to write your page in (transitional) xhtml...Nothing personal, but that's just not going to happen. This web design stuff is now a side gig, and I don' the time, etc. to move forward into anything like XHTML.

So, maybe it's just not possible (?)...certainly not for all browsers.