Sent by Andy Baker on 7 June 2002 09:09
> > 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...
>
>
>
> 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
>
>
But if an inline element contains a replaced element (in this case IMG)
which does have a height, shouldn't the inline element's height straetch
to fit it's legal contents? Imagine using inline images in a line of
text. You would want the content box of the line of text to be big
enough to contain it's contents?
I have set the text-size and line-height of the SPAN instead but I am
now getting what looks like a huge thick underline under each <a href>
image... I will put up an example when I get the chance.
