[snip]
> I am looking for a slightly more 'elegant' way of vertically
> centering text depending on whether there are one or two lines.
[snip]
> I've also just noticed a problem in all browsers except IE7. What I
> want to happen is for the currently selected item to show a different
> background and to change text color, as in [ #navbar a:active ]
> (below) and for this state to remain until another selection is made.
> IE7 does what I want, but other browsers are inconsistent. Some will
> show the correct state whilst the mouse button is down and it's
> possible in at least one other to select an item and drag the pointer
> away from the item whilst holding the button down and the active
> state will remain. It's late at night and I've probably missed
> something obvious!!
[snip]
> /* Set background for current item */ #navbar a:active {
> background-image:url(../images/buttons/navactive1x30.gif);
> background-repeat:repeat; color:white; }
[snip]
Hi Alan.
I think other browsers are either shifting the focus or not recognizing
the :active state on your link. Try adding the :focus state into that
rule as well, like this:
/* Set background for current item */
#navbar a:active,
#navbar a:focus{
background-image: url(../images/buttons/navactive1x30.gif);
background-repeat: repeat;
color: white;}
It's difficult to fully test that on my local machine because of the
frames (as you mentioned), but I think that should at least get you
closer to a solution.
In terms of vertical centering, one solution is just to use padding and
not rely on pre-determined heights for the links. This also creates an
accessibility issue (overlapping the text when people [like me] have the
font size set too high for your site's setup).
If you create a background image which fades to a specific color, you
can just set the background of the link to that color, center the fade
gif/png/jpg and let any overflow in odd situations show up as a solid color.
Here's a basic ascii'd example:
solid white link background peaking through
white->blue->white vertical fade [one or two lines here]
solid white link background peaking through again
Throw a little padding in there, use a "best guess" measurement and
it'll look great on 80% of browsers, be accessible on all browsers, and
still look decent on the remaining 20% browsers with configurations
which differ from your local system.
Let me know how it all works out for ya.
Bill Brown
TheHolierGrail.com
MacNimble.com
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
