Sent by Scott Sauyet on 5 July 2002 13:01
http://scott.sauyet.name/test.html
>> When the page is first loaded, the menu items ('A's inside'LI's)
>> are shifted left and cut off at the border of the div. As soon
>> as you hover over one it shifts to where it is supposed to be and
>> the background changes appropriately.
> in ie5.0/w2k; it's actually the text-indent: -20px; declaration that
> causes the bug AFAIK. it seems that ie5 only 'remembers' the correct
> position of the <li> blocks _after_ you hover over them for the first
> time. before then, all blocks are shifted 20px left; and a 20px wide
> region on the right inside of the black border doesn't react on
> mouseover.
You've got to wonder what would cause this sort of behavior, though.
Because of Opera problems with text-indent and padding, I've tried to
find another way of achieving the correct effect. What I want is for
the first line of each list item to sit further to the left than each
subsequent line. Usually there will be only one line per list item, but
some items will be longer and need to span two or more lines. The
logical property to consider is text-indent, but a positive text-indent
is just too ugly in this context, and a negative one is causing problems
in Op and IE5.0.
The next most obvious choice is the ":first-line" pseudo-element. But
that only applies to paragraphs. I am in an anchor inside a list item.
This is supposed to be a rollover menu providing a list of links. I
don't want to sacrifice the HTML list structure, as that seems the most
appropriate markup.
Can anyone suggest another method?
> there's even some sort of logic in this (for me, at least ;-), for the
> <li> doesn't know it's supposed to do some text-indenting before it's
> hovered over... but setting text-indent on the .menu li, .menu ul, or
> even body doesn't help (even with explicitly inherit-ing it down the
> tree).
You call that logic? :-)
> removing width: 100%; from the .menu li a selector on the other hand
> solves it, but adds an empty line between the <li> items.
I want to avoid the extra space, and, perhaps more importantly, I don't
want to limit IE's rollover abilities to those places where there is
text. Another IE feature that drives me nuts...
If anyone has a suggestion for how to distinguish subsequent lines from
the first one in an A element inside a LI element, I would love to hear
it. I'm not wedded to the idea of a hanging indent, but I really don't
like having no visual distinction between a list element which spans two
lines and two separate list elements.
Thanks for any help you can give,
-- Scott
