Sent by benjamin white on 18 August 2002 22:10
I've been attempting to make a rollover effect (as in ALA#140) with GIF
images that have a partially transparent (as in I cut out parts of them)
background. I've had success with this in the past but I'm having problems
with Netscape and Opera only changing the background color for part of the
transparent bits. It seems as though it's only changing the background where
the link text would be.
This is the CSS code I've been using for this effect:
img.butt {background: transparent; vertical-align: middle;}
a.butt, a.butt:visited {
background: rgb(220,54,50);
}
a.butt:active, a.butt:hover {
background: #fff;
}
And the page I've been working on is located here:
http://www.boptart.com/tests/home.php
The vertical-align: middle; statement is to keep Opera and Netscape from
moving the images up or down below the containing DIV element. Having
ignored Opera until this morning I had used a vertical-align: bottom;
statement as suggested in Eric Meyer's article for Netscape. While fine on
Netscape and IE, this pushed the images below the DIV in Opera. Of course,
this now ensures that the background color change is entirely unnoticed.
So what can I do to ensure that when the image is selected the entire
background changes rather than just the background behind the nonexistant
text?
While you're looking at that, maybe someone can come up with a suggestion to
replace the scrolling DIVs? I sure do like that effect (using overflow:
auto; rather than scroll) in IE and NS, but if Opera's going to screw it up
I guess I should find something new.
benjamin
