Better way to have a transparent border on an image?

The obvious methods don't work or are slow to render

[MichaelBluejay]

This should be a piece of cake but it's not....

I want to have a 3px orange border appear over certain image links on mouseover. That's easy enough, but when I mouseover and mouseout the whole layout changes because the 3 pixels are being added and removed.

So I set the default style, and the mouseout style, to: "border:3px solid transparent"

That works great in Safari, but IE6 displays a 3px blue border because the image is also a link. Adding <BORDER=0> and {text-decoration:none} don't help, either. {border-style:none} removes the blue border, but it also removes the 3px space around the image too, so that takes me back to square one.

Here's one way I could get it to work with JavaScript, but it seems too complicated for such a simple task, and more importantly, it's SLOW! The effect appearing ad disappearing is really sluggish.

if (whichEvent==1) { 
 theObject.style.margin = "0px"; 
 theObject.style.border = "3px solid orange"; 
 } 
else { 
 theObject.style.margin = "3px"; 
 theObject.style.borderStyle = "none"; 
 } 

Another solution is to stick the image into a one-cell transparent table with 3px padding and change the background color of the cell. That produces a quick effect, but there again, the code seems really inefficient having a new table for each image, and it seems like I shouldn't have to make a bunch of tables just to have a simple rollover effect.

Didn't Steve Jobs promise that he was going to make computers easier to use? Wasn't that like, 20 years ago?

Thanks for your help, -MBJ-

[DrDoc]

Have you tried 3px padding, no border, and only changing the background on hover?
Or, if your background is single-colored, why not just change the border color between orange and whatever the background color is?

[MichaelBluejay]

Have you tried 3px padding, no border, and only changing the background on hover?

Huh, I hadn't thought about having the color appear via the background vs. via a border. Unfortunately the color didn't appear when I tried it -- evidently the background only extends out to the dimensions of the image, and not into the padding space.

Or, if your background is single-colored, why not just change the border color between orange and whatever the background color is?

Well, *this* page has a single-color background, but one day soon I'm gonna wanna do this on a textured background.

I can't believe something so easy is so hard. Wait a minute, I *can* believe it. :)

[DrDoc]

the background only extends out to the dimensions of the image, and not into the padding space

If you're using IE pre-6, or not using a full doctype, yes...

[MichaelBluejay]

Not using a Doctype. Doctypes scare me....