Re: Fixes to menu tabs

[olafBuddenhagen]

Hi,

On Thu, Nov 27, 2008 at 12:19:14AM +0100, Thomas Schwinge wrote:
> On Thu, Nov 27, 2008 at 02:22:13AM +0600, Anatoly A. Kazantsev wrote:
> > Thomas Schwinge <address@hidden> wrote:
> > > On Wed, Nov 26, 2008 at 10:38:35PM +0600, Anatoly A. Kazantsev
> > > wrote:

> > > > CSS code of menu tabs was changed for better usage.
> > > 
> > > Thanks, but there are two issues:
> > > 
> > >   * Why do the action items' hyperlinks no longer get underlined
> > >   like all other hyperlinks are?  It seems odd to me that these
> > >   are treated differently.
> > 
> > Because now tab's borders are drawing by 'a' tag's borders. So I can
> > not apply 2 different border styles to one element. But as
> > workaround we can apply for 'a:hover' 'text-decoration: underline'
> > parameter

This is not a workaround -- this is the *proper* way to do underlining.
Misusing border as done now is an ugly ugly hack...

Also, disabling underline for non-hovered links is a very bad idea
anyways (in spite of being fashionable) -- the underline is at least as
important as visual clue as the color. And the underline is not a
terribly good hover indicator anyways. (Changing background color is
much more useful. In fact, I wonder why popular browsers don't do that
in the default style.)

BTW, the current approach, adding padding to inline elements (<a>) in
addition to the block element padding (<li> etc.) is not very robust.
(It breaks when the menu bar doesn't fit on a single line, for example.)
It's much more elegant to define the <a> itself as a block element, and
remove all other paddings.

Admittedly, this solution is somewhat problematic: The more elegant
variant (using inline-block) doesn't work with older Mozilla versions
(and probably also some other older browsers) -- should we care?...

The traditional variant is using ordinary block, in combination with
floats to make them occupy the minimal size instead of the whole
available width. (i.e. work more or less like inline-block.) This is
rather hacky, though.

> > >   * Have a look at the action items on
> > >   <http://www.thomas.schwinge.homeip.net/hurd-web/news/2008-09-11.html>.
> > >   Both the question mark (the hyperlink) and the ``Discussion''
> > >   text have to be included in the notch when pointing over them,
> > >   not just the qusetion mark as it is done with your change.
> > >   ``li:hover'' (old) vs. ``a:hover'' (new).  Why did you change
> > >   this?
> > 
> > Yes, I know about this problem. This was proposed by antrik on irc,
> > to make the whole tab as a link, not just text inside it. But... I
> > have nice css-only workaround for it :-)
> 
> Now I don't follow -- what is wrong with what we currently have, e.g.,
> on <http://www.gnu.org/software/hurd/> w.r.t. to the action bar?  It
> all seems perfectly fine to me?

The problem is that the "tab" hovers as soon as you enter the tab's
area, but the actual link is only active when you move over the link
text itself. This results in extremely bad usability -- the visual clue
provided by the tab's hover effect doesn't actually match the real
activation of the link.

The proposed change fixes this, making sure the tab hover happens only
when the link is indeed activated.

The "Discussion" link breaks this when no discussion page exists yet,
because the tab contains normal text in addition to the actual link.
Working around this probably requires some major hackery...

-antrik-