Anas - I think what you're looking to do is apply the border to the image, not
the anchor. You've got this:
.gallery a:hover {
background-color: rgb(218,215,194); /* or white */
border: 1px rgb(102,111,81) solid;
}
Try this instead:
.gallery a:hover img {
background-color: rgb(218,215,194); /* or white */
border: 1px rgb(102,111,81) solid;
}
Unfortunately this will cause the image to "jump" by a pixel since it doesn't
have a border to begin with. The way around this is pretty simple though, just
apply a 1px border to the image and have it match your background color.
.gallery img {
display: inline;
margin: 10px;
vertical-align: middle;
line-height: 120px;
padding: 10px;
border: 1px rgb(228,226,212) solid;
}
On 4/20/08 6:45 PM, "Anas R." <[EMAIL PROTECTED]> wrote:
Hi all,
Please check this problem: http://www.richstyle.org/web.php#gallery
The mouse-over effect for images works exactly the way I want in IE: a border
will appear around the image.
but not the rest othe the browsers. the border will appear as a border for an
inline object, since IMGs has been set
as an inline object.
Any solution?
Best regards,
- Anas R.
http://www.richstyle.org
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
