Extra border around thumbnail, inside of blue hyperlink border

Gordo · 01-05-2003, 08: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.

Vladdy · 01-05-2003, 08:50 PM

padding:1px;
background:#ffffff;

aggie · 01-05-2003, 08:55 PM

Where would that go - in the image tag?

Gordo · 01-05-2003, 09: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).

Vladdy · 01-05-2003, 09:48 PM

can you post a link to your page?

Gordo · 01-05-2003, 09: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;
text-decoration:none
}
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;
LETTER-SPACING: normal;
TEXT-DECORATION: none;
TEXT-TRANSFORM: none;
COLOR: #0000FF
}
A:visited {
COLOR: #0000FF;
text-decoration:none
}
A:hover {
COLOR: #BD4A10;
text-decoration: underline
}
A:active {
font-style: italic
}

Gordo · 01-05-2003, 11:43 PM

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.

http://www.geocities.com/gordonmerrill/thumbnail.htm

Vladdy · 01-05-2003, 11:51 PM

try this:
<style type="text/css">
.imagelink
{ border: 2px solid blue;
background: #ffffff;
padding: 2px;
}

img
{ border: 0px;
}

</style>

link:

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

Gordo · 01-06-2003, 01:00 AM

Cool. I now have two test pages. The first is thumbnail.htm and uses CSS in the <head>. The second, 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.
<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>

NOW....
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.

MCookie · 01-06-2003, 01: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">
<head>
<style type="text/css">

</style>
<title>Untitled</title>
</head>
<body>
<a href=""><img src="image.jpg" /></a>
</body>
</html>

Gordo · 01-07-2003, 02: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.

MCookie · 01-07-2003, 05: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...

Gordo · 01-08-2003, 01:43 AM

Quote:

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.