Hi there,

so on these pages on the left sidebar, I've got the active / hover state so that there's the blue border on the bottom of the item. The problem is that it's going beyond the actual width of the text that it's highlighting.
http://www.moko.com.php5-21.websitet...m/?page_id=107

How can I have it so that it goes just under the width of each text item? Similar to the main nav at the top of the page?

Any help would be greatly appreciated. Kind of in a bind here and can't quite figure it out.

Thanks

Several ways you could do it, quickest would be to restrict the width of the link itself to the width of the text with overflow:hidden; . If there were more than two links in question then I might suggest other methods, but in this case quick 'n' dirty will work.

tim

You have given them a fixed width of 80px, so you might want to remove that.
Also, when you remove the width, the border will be too short, because there is a 40px right margin that "pushes the <a> element away". So you might want to remove that too.
Thirdly, when the right margin is gone the border will stretch too far, because you've set the <a> tags to display as blocks, which will make them stretch as far as possible. So remove that too or change it to something else, like inline or inline-block.

That should do the trick!

Use the text-decoration property instead of the bottom border

Er, edit. Thanks for the replies guys, the display: inline actually was all I need.

I have been really bad about overlooking stuff like that lately.

Thanks.

Right click -> View Source -> search for the anchor text of a link -> read the class name and/or the ID of the parent