[thelist] CSS <img> border problem

Thu Feb 3 12:36:56 CST 2005

Chris Heilmann wrote:

>>Okay, the solution to this is probably so simple it hurts, but here
>>goes...
>>
>>I'm trying to get a thumbnail image to display with a solid 1px border,
>>but with 3px of padding between the image and the border. Here's the CSS:
>>
>><style>
>>.thumbnail {
>>     padding: 3px;
>>     border: 1px solid #660000;
>>}
>></style>
>>
>>...and the <img> tag code:
>>
>><img src="image1.jpg" width="123" height="110" class="thumbnail" />
>>    
>>
>
>Are you sure your browser is in standards mode and not quirksmode?
>It works with a valid doctype here:
>http://www.onlinetools.org/tests/borderaroundimage.html
>
Alas, the doctype was the culprit (I was using <!DOCTYPE HTML PUBLIC 
"-//W3C//DTD HTML 4.01 Transitional//EN">)

As soon as I switched to "strict", it worked nicely in both browsers. 
Thanks!

>> What happens in FF if you wrap it in a span with this class rather than
>> applying the class to the image?  This works in IE (and I thought FF/Moz 
>> was more sticky about doing stuff like this with images).
>>
>> Peter

Strangely enough, wrapping the <img> in a <span class="thumbnail"> made 
it work *only* in IE.

--
Alan