This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > November 2004 > Re: How to make equal-width links? [## demo solution, and new problem ##]
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
Re: How to make equal-width links? [## demo solution, and new problem ##]
|
|
| Philip Herlihy 2004-11-23, 7:26 pm |
| "Philip Herlihy" <foof8501@herlihy.eu.veil.com> wrote in message
news:cnsf1e$c1g$1@sparta.btinternet.com...
> I've been trying to create a simple vertical navigation bar, using (as
> recommended) an unordered list (UL) of hyperlinks. I'd like to have a
> hover effect, so I have to style the links themselves.
>
....
> My problem is that because the link text length varies, the width of the
> background also varies, giving an awful ragged effect on the
> right-hand-side. I've seen this done beautifully (but can't now find an
> example). Any suggestions?
>
Thanks to everyone for their generous help, especially Els, who invited me
to study her beautiful site, and from which I learned a great deal. :-)
(1)
I've now studied carefully, and I have a "demo" version which I hope is both
correct and free of inessential detail. You can see this at:
http://philipherlihy.members.beeb.n...tical_links.htm
I've used "named" colours to make it easier to spot the elements concerned
from the source. (This is not a statement of my personal aesthetic...)
I've tested it in the latest versions of IE, Opera and Firefox, and it
appears to be the same in each, and what I wanted (a personal first!). I
found Opera and Firefox displayed incorrectly with line 37 setting:
width: 100%
instead of:
width: 100%
IE renders both correctly, but I notice that the hover effect (which works
perfectly in Opera/Firefox) only triggers over the *text* of the link in IE.
Any solution? (My customer will be using only IE).
(2)
You may spot a link to the "Horizontal Links Version". I decided to see if
I could achieve the same result with links across the page instead.
http://philipherlihy.members.beeb.n...ontal_links.htm
First, I changed line 34
display: block;
... to "inline", but I found I had to move that line from the <a> to the
parent <li> to get the effect I wanted. (Now line 31). However, as you'll
see, it looks pretty awful in all three browsers, and (once again) I'm out
of ideas.
In IE, you should see a hint of FUCHSIA colour to the right of the border of
each link. That doesn't appear in either Firefox or Opera, although I'm
using IE6 with a "standards compliant" doctype. Just a glitch or have I
done something wrong?
In Firefox/Opera the top and bottom borders (ORANGE) of the <li> tags are
absent, and there is a gap between the links which I'd like to remove
(without breaking the IE rendering).
Once again, I'd be grateful for any comments or advice. (Note: I'm using
the very latest versions of all three browsers - I found that Opera 7.23
didn't render correctly, which 7.54 does).
--
####################
## PH, London
####################
| |
| Philip Herlihy 2004-11-29, 12:21 pm |
| "Philip Herlihy" <foof8501@herlihy.eu.veil.com> wrote in message
news:cnsf1e$c1g$1@sparta.btinternet.com...
> I've been trying to create a simple vertical navigation bar, using (as
> recommended) an unordered list (UL) of hyperlinks. I'd like to have a
> hover effect, so I have to style the links themselves.
>
....
> My problem is that because the link text length varies, the width of the
> background also varies, giving an awful ragged effect on the
> right-hand-side. I've seen this done beautifully (but can't now find an
> example). Any suggestions?
>
Thanks to everyone for their generous help, especially Els, who invited me
to study her beautiful site, and from which I learned a great deal. :-)
(1)
I've now studied carefully, and I have a "demo" version which I hope is both
correct and free of inessential detail. You can see this at:
http://philipherlihy.members.beeb.n...tical_links.htm
I've used "named" colours to make it easier to spot the elements concerned
from the source. (This is not a statement of my personal aesthetic...)
I've tested it in the latest versions of IE, Opera and Firefox, and it
appears to be the same in each, and what I wanted (a personal first!). I
found Opera and Firefox displayed incorrectly with line 37 setting:
width: 100%
instead of:
width: 100%
IE renders both correctly, but I notice that the hover effect (which works
perfectly in Opera/Firefox) only triggers over the *text* of the link in IE.
Any solution? (My customer will be using only IE).
(2)
You may spot a link to the "Horizontal Links Version". I decided to see if
I could achieve the same result with links across the page instead.
http://philipherlihy.members.beeb.n...ontal_links.htm
First, I changed line 34
display: block;
... to "inline", but I found I had to move that line from the <a> to the
parent <li> to get the effect I wanted. (Now line 31). However, as you'll
see, it looks pretty awful in all three browsers, and (once again) I'm out
of ideas.
In IE, you should see a hint of FUCHSIA colour to the right of the border of
each link. That doesn't appear in either Firefox or Opera, although I'm
using IE6 with a "standards compliant" doctype. Just a glitch or have I
done something wrong?
In Firefox/Opera the top and bottom borders (ORANGE) of the <li> tags are
absent, and there is a gap between the links which I'd like to remove
(without breaking the IE rendering).
Once again, I'd be grateful for any comments or advice. (Note: I'm using
the very latest versions of all three browsers - I found that Opera 7.23
didn't render correctly, which 7.54 does).
--
####################
## PH, London
####################
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|