How can I reduce the length of this underline?

Amanda Watson
Amanda Watson used Ask the Experts™
on
Hi,
On this site here
http://web30.wave.studiocoast.com.au/index.php?option=com_content&view=article&id=56&Itemid=93

I have an underline for the active menu item on the left hand side.

Does anyone know how I can reduce this to extend only the length of the text?

Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
<<Does anyone know how I can reduce this to extend only the length of the text?>>
length of which text?
Commented:
When you use "Text-decoration: underline" for a specific object in CSS it should only underline your text and not an entire div section.

How is your CSS and HTML code regarding to the left hand menu?

But if you want to control the length of a underline, consider to use a <HR /> tag and then set the correct properties in your CSS document.

But please elaborate about the concrete code of the menu and your CSS

Commented:
You must specify the width of the anchor which has the border: style="width: 118px;"

<a id="active_menu_collections" class="mainlevel_collections" href="/index.php?option=com_content&amp;view=article&amp;id=63&amp;Itemid=86" style="width: 118px;">...

Open in new window

Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

The <A> tags you are using are all the same size. There as wide as the <TD> tag. Since they all have the same width (inherited from the TD), all the lines will be the same size.

There is no easy answer for this problem, since you are also using cufon.
Amanda WatsonWeb Developer

Author

Commented:
The text decoration underline works, except now I have all sorts of other issues also (gosh this is drving me nuts!)

Anyway the top menu active has an underline which it shouldn't and the underline is now doubled on the active left hand menu
http://web30.wave.studiocoast.com.au/index.php?option=com_content&view=article&id=63&Itemid=86
Amanda WatsonWeb Developer

Author

Commented:
I have also just noticed that this underline doesn't work in IE7 or IE8
Amanda WatsonWeb Developer

Author

Commented:
I have canned this altogether and just used a color to show the active state!
Thanks for all your comments.
Amanda WatsonWeb Developer

Author

Commented:
no quite there, but appreciate the help

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial