homepage Welcome to WebmasterWorld Guest from 174.129.163.183
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Removing underline from anchor tag
murphydog77




msg:3483691
 6:04 am on Oct 22, 2007 (gmt 0)

Hi. I'm a newbie to the CSS world, so please bear with me. I used FrontPage for years and decided to redo my web site with a free template I found online that uses CSS in combination with XHTML.

I'd say a good 75% of my pages have anchor tags(?) on them (FrontPage calls them bookmarks). The template I'm using underlines them like links, even though they aren't. How can I use CSS to remove the underline without removing the underlines from the real links on the pages?

Ex. of the code I'm talking about:

<a name="rear-facing">rear-facing</a>

If I set the text decoration for all a elements to none, that removes the underline for all links, including my <a name="">, correct? I don't want that to happen.

I also did a search and saw a post from a couple of years ago that said the <a name> tag is out-of-date.

Is there a way to deal with this in CSS or do I need to deal with it item by item in the HTML coding?

 

Old_Honky




msg:3483729
 8:18 am on Oct 22, 2007 (gmt 0)

I would make "name" a class.

CSS

a.name,
a:hover.name,
a:focus.name,
a:active.name
{
text-decoration: none;
}

I put in the hover, focus and active declarations in case some other part of your CSS later in the cascade overrides a.name.

Then in the HTML use ID where you would have used "name" and add the class "name" to each anchor.

HTML

<a class="name" id="rear-facing">rear-facing</a>

[edited by: Old_Honky at 8:19 am (utc) on Oct. 22, 2007]

rocknbil




msg:3483741
 8:50 am on Oct 22, 2007 (gmt 0)

Welcome aboard murphydog77, it's not that name is outdated, it's deprecated as a handle for identifying the object in the document. Names are still very important for form objects, this is the key of the data value being sent to the server.

Both "bookmarks" and links are anchors: <a...> which is why it's styling it as a default hyperlink.

Another way around this is to not put the anchor directly on the text. Then you don't have to worry about styling. You can style the element with something semantic, such as a list item or heading.

<a name="rear-facing" id="rear-facing"></a>
rear-facing

murphydog77




msg:3484373
 8:59 pm on Oct 22, 2007 (gmt 0)

Thank you both! I couldn't get it to work by making name a class, so I'll just not put the anchor directly on the text (that's a V-8 slap to the head).

What a great forum!

phranque




msg:3484467
 11:05 pm on Oct 22, 2007 (gmt 0)

welcome to WebmasterWorld, murphydog77!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved