Sent by Andy Baker on 5 June 2002 12:12
All testing is comparing IE6 Win to Mozilla RC3
I suspect that Mozilla is doing something correct and IE is doing
something wrong (usually the case) but goddam the IE behaviour makes
more sense to me here!
I had a cunning idea to get pure CSS rollovers for images but I have
fallen at the first hurdle.
The idea was as follows:
1. Each button gets it's own class that defines a block with a
background image. 2. Add a pseudo class with the same ID but using the
'hover' selector giving the block a different background image when the
mouse is over it!
In my naivety I was expecting 2 to be the tricky bit but I am stuck at
stage 1... :-(
It seems that only DIV's can have background images - at least in IE6 so
instead of wrapping my button in a SPAN I use a DIV with display set to
'in-line'
Inside my DIV I use a transparent GIF set to the same size as the
background image. This is to give the <a ...> something to wrap around.
The DIV has a height and width and so does the GIF. The class for the
div is thus:
div.nav-about {
background-image: url(images/nav_about.gif);
position: relative;
width: 61px;
height: 51px;
display: inline;
overflow: visible;
}
The snag is that Mozilla only makes the DIV the height of a line of text
aligned at the bottom of the box and starts the background image there
also. Give me a little bit of my background but nothing else...
So what I want at this stage is simply an inline DIV containing a
transparant GIF and showing a background image that is the same height
and width as the GIF. Simple?
I know that there are other ways to get image rollovers with CSS. I
could use a transparent GIF and switch the background colour with CSS.
(Nice but the button looks pants without anti-aliasing.
There is also the cunning hack to get PNG's with alpha channels working
in IE. Can't find the link for that at the mo' but I am getting into a
whole can of worms there with div background colours and inheritance.
This will be my next question when I can work out what question I need
to ask!...
So if even if you don't know the answer to the DIV problem is my
ultimate goal of having an image change on a rollover possible without
Javascript?
Cheers...
AndyB
