Unexpected bottom border with images in Opera 7

I have the familiar 'thumbnail' scenario. I want to place a small
border around the image when the cursor hovers above it. I use a 1
pixel, solid border around the image that changes between normal and
hover.

This works fine in Internet Explorer, but in Opera 7.22, the bottom
border is 3 pixels thick. If I expand all borders to 3 pixels, this
bottom border is still 2 pixels thicker than the others, which
suggests that padding or a margin exists on the bottom (text links
use the same background colour as the border). However, during
previous attempts to correct this, I explicitly removed all margins
and padding from any related element that didn't need it. To add even
more confusion, at one point, the first image had uniform borders,
but all the others displayed the usual results. Unfortunately, I
can't seem to repeat this.

Can anyone explain this, or is it a browser bug? I am certain that no
other style sheets are affecting this page.


This is the HTML template:

<DIV class="image-container">
<DIV class="image-item">
<A href="big1.jpg"><IMG src="small1.jpg"></A>
<P><A href="big1.jpg">Image 1</A></P>
</DIV>
<DIV class="image-item">
<A href="big2.jpg"><IMG src="small2.jpg"></A>
<P><A href="big2.jpg">Image 2</A></P>
</DIV>
<DIV class="image-item">
<A href="big3.jpg"><IMG src="small3.jpg"></A>
<P><A href="big3.jpg">Image 3</A></P>
</DIV>
<DIV class="image-item">
<A href="big4.jpg"><IMG src="small4.jpg"></A>
<P><A href="big4.jpg">Image 4</A></P>
</DIV>
</DIV>
<DIV style="clear: both">&nbsp;</DIV>


....and the related CSS (less specific selectors have also been
included):

BODY {
background-color: #ffe8c3;
color: #cd6b01;
font-family: Arial, serif;
font-size: small;
}

A {
background-color: #ffe8c3;
color: #00173c;
text-decoration: none;
}

A:hover {
background-color: #00173c;
color: #ffe8c3;
text-decoration: none;
/*
************************************************** ******************

An aside: does text-decoration need to be specified explicitly here?

************************************************** ******************
*/
}

/*
All paragraphs have a 30 pixel left and right margin - this container
just keeps everything aligned
*/
DIV.image-container {
margin: 0 30px;
}

DIV.image-container DIV.image-item {
float: left;
margin: 5px;
}

DIV.image-container DIV.image-item A IMG {
border: 1px solid #ffe8c3;
}

DIV.image-container DIV.image-item A:hover IMG {
border: 1px solid #00173c;
}

DIV.image-container DIV.image-item P {
margin: 3px 0 0;
text-align: center;
}

The only missing selectors that are in the original style sheet are
for headers and paragraph elements, and a "header" class DIV.

Any help would be greatly appreciated.

Mike

--
Michael Winter
M.Winter (AT) blueyonder (DOT) co.uk.invalid (remove ".invalid" to reply)

Brian wrote on 20 Nov 2003:

Perhaps this will help:
http://devedge.netscape.com/viewsource/2002/img-table/

It did: a vertical alignment of either 'text-bottom' or 'middle' does
the trick. I'm glad that the difference was due to the non-conforming
nature of Internet Explorer*. That's much more comforting than a
"buggy" Opera.

Thank you,
Mike

* Does Microsoft ever intend to honour any standards that are not
their own?

--
Michael Winter
M.Winter (AT) blueyonder (DOT) co.uk.invalid (remove ".invalid" to reply)