Sent by Marek Prokop on 5 June 2002 17:05
Andy,
According to the CSS2 Spec you can't set the "height" property
for a non-replaced inline element. Why don't you leave your
DIV's display property "block"?
Best,
Marek
> -----Original Message-----
> From: Andy Baker [EMAIL-REMOVED]]
> Sent: Wednesday, June 05, 2002 6:41 PM
> To: [EMAIL-REMOVED]
> Subject: [css-d] Pure CSS image rollovers SNAFU'd by Mozilla's
> boxes
>
> 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...
