CSS issue with IE 7 (Surprise!)

Wanderer

I have a CSS style for images to put a 1 pt black border on them.

It works in Safari, Firefox etc. but IE 7 refuses to display the border.

Even when I simply use border="1" the border (yes the image is a link) no border is displayed, is this normal.

Am I going to have to revert to putting a frame on the actual picture with Photoshop?

WallPhone

Point a link and maybe we'll find the bug. I know for certain IE supports borders on images. Probably some cascade or rule precedence issue.

Wanderer

It might appear some images on this site have a border but it's on the table cell, not the image. This one has no border in IE 7... http://www.jabulanicraft.com.au/order.htm

sjeeps

This class:

.highslide img { border: solid 1px white; }

Here:

<a id="ST1-2" href="prodpics/ST1-2.jpg" class="highslide" onclick="return hs.expand(this)"><img class="IMG_th" src="prodpics/ST1-2_th.jpg" alt="Click" title="Click to see item..." /></a>

And here:

<a id="6L" href="prodpics/6L.jpg" class="highslide" onclick="return hs.expand(this)"><img class="IMG_th" src="prodpics/6L_th.jpg" alt="Click" title="Click to see item..." /></a>

Is overwriting this class:

.IMG_th { border: solid 1px #800000; outline: solid 1px #800000; }

Try to get ride of it and just have one class like:

.IMG_th { border: 1px solid #800000; }

Wanderer

Thanks mate,
I checked all that, I changed the { .highslide img } class to a pink border, it had no effect (yes I refreshed 20 times or more) that's why I introduced the { .IMG_th } class.

The thing is that it's fixed everywhere except IE, but that's OK, I'll keep trying.

sjeeps

If you're using FF CSSViewer and hover over one of the images, you'll see that .IMG_th has 1px white border.

So I don't think that changing .highslide img class to a pink border or any other color would help, the .IMG_th will still be overwritten.

Wanderer

Did that, still sucks.

Looks like it's Photoshop to the rescue with a real image border.

Stuff you IE!