Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS - Adding and Getting rid of underlines on links 8

Status
Not open for further replies.

JennyW

Technical User
Mar 1, 2001
323
CA
Hi!

** Adding and Getting rid of underlines on links **

I have a page with lots of links.

Some of the links on this page I don’t want an underline to display.
And some of the links I only want an underline to display when it’s hovered over.

Can this be done?

Here’s my example page:

========================================

I know I probably use something like this:
[tt]
<style>
A:link {text-decoration:none}
A:active {text-decoration:none}
A:visited {text-decoration:none}
A:hover {text-decoration:none}
</style>
[/tt]
...But do I use it twice? Is that possible?

========================================

Thanks for your time,
Jenny
 
Use this:

<style>
A:link {text-decoration:none;}
A:active {text-decoration:none;}
A:visited {text-decoration:none;}
A:hover {text-decoration:none;}
</style>


And for the hyperlinks that you do want to be underlined
when they are hovered you need to copy the bolded part:

<a href=&quot;somesite.html&quot; style=&quot;text-decoration: underline;&quot;> Visit SomeSite !!! </a>

and put it in just like the example !!!

I hope this helps,

BobbaFet Everyone has a right to my opinion.
E-mail me at cwcon@programmer.net
Be a nice guy 'n press that little ol' button
VVV---(this one) for me ;-)
 
Or just create different A styles

A.style1 {text-decoration:none; color:red}
A.style1:hover {text-decoration:none; color:red}
A.style2 {text-decoration:none; color:black}
A.style2:hover {text-decoration:underline; color:blue}

.. and then in the code write

<a href=&quot;xx&quot; class=&quot;style1&quot;>xx.. etc etc
 
Hey guys!

Thanks for the help it was awesome!

However, I’m having trouble with the following attribute:

A.style2:visited {text-decoration:none; color:#999999}

It seems if I put the above on my page then all of my links under ‘A.style2’ will display as the ‘visited’ color (grey) even if they’ve never been selected. An unselected link should display in green.

Why do you think this might be happening?

Here’s my example page:


Thanks,
Jenny
 
Hi JennyW,

The page displays them properly in my browser!
I think that maybe you have visited them on your
browser already via that page and then, of course,
they will be displayed in the visited color.

What I always like to do is to keep the visited link
color the same as the normal link color. But thats just me!

I know this didn't help :),

BobbaFet Everyone has a right to my opinion.
E-mail me at cwcon@programmer.net
 
Hi!

You were right bobbafet!
I added a like that I've never been to and it works as you described!

Thanks a lot!
Jenny
 
Hi again,

I'm having new troubles.

When I put the <script> directly in the page all of the links display correctly.

But when I call the css script externally some of my links no longer display right.

Here's my page:


The links on the left of the browser page should not have underlines (under the menu heading).

Here's the javascript I used:

<style>
A.style1 {text-decoration:none; color:red}
A.style1:hover {text-decoration:none; color:#6666FF}
A.style2 {text-decoration:none; color:green}
A.style2:visited {text-decoration:none; color:eek:range}
A.style2:hover {text-decoration:underline; color:#9999FF}
</style>


Thanks a lot!
Jenny
 
Hi JennyW,

you call the css script like this:
<link rel=&quot;stylesheet&quot; href=&quot;/css/css_primary.css&quot;>

try calling it like this:
<link rel=&quot;stylesheet&quot; href=&quot;/css/css_primary.css&quot; TYPE=&quot;text/css&quot;>

And remove these lines from the css script because they
are not CSS! They could cause the script to malfunction:
<!-- BEGIN --> <center> <table height=0 width=596 border=0 cellpadding=0 cellspacing=0> <tr><td><IFRAME SRC=&quot; WIDTH=&quot;468&quot; HEIGHT=&quot;60&quot; MARGINWIDTH=&quot;0&quot; MARGINHEIGHT=&quot;0&quot; FRAMEBORDER=&quot;0&quot; SCROLLING=&quot;no&quot;><a href=&quot; target=&quot;_top&quot;><img src=&quot; BORDER=&quot;0&quot; height=&quot;60&quot; width=&quot;468&quot;></a></IFRAME></td><td><a href=&quot; border=&quot;0&quot; alt=&quot;Free Web Hosting by Netfirms&quot; src=&quot;/nf-images/freewebhosting.gif&quot; width=&quot;120&quot; height=&quot;60&quot;><br></a></td></tr> <tr> <td colspan=&quot;2&quot; align=&quot;center&quot;> <img border=&quot;0&quot; src=&quot;/nf-images/freewebhosting.webhosting.gif&quot; width=&quot;1&quot; height=&quot;1&quot; alt=&quot;Free Web Site Hosting by Netfirms&quot;><br> <font size=&quot;2&quot;><a href=&quot; site is hosted by <b>Netfirms</b> Web
osting</a></font> </td> </tr> </table> </center> <!-- END -->


I hope this helps,

BobbaFet
Everyone has a right to my opinion.
E-mail me at cwcon@programmer.net
 
Hi,

Bobbafet, actually the lines you bolded are forced by my service provider (they weren’t in the <head> tag either).

Anyway, I’m looking better, but I still got problems.

The javascript is still having problems reading my code externally for the links under the menu heading on my page:



Here’s my javascript:

In my page:

<link rel=&quot;stylesheet&quot; href=&quot;/css/css_primary.css&quot; type=&quot;text/css&quot;>


Externally in my css file:

=============================
<style>
A.style1:link {text-decoration:none; color:red}
A.style1:active {text-decoration:none; color:yellow}
A.style1:visited {text-decoration:none; color:pink}
A.style1:hover {text-decoration:none; color:brown}

A.style2:link {text-decoration:none; color:green}
A.style2:active {text-decoration:none; color:yellow}
A.style2:visited {text-decoration:none; color:eek:range}
A.style2:hover {text-decoration:underline; color:#9999FF}
</style>
=============================


The links under the menu heading are using ‘style1’.

I don’t want an underline on these links.
But an underline displays on links that haven’t been visited.

Here’s a quick breakdown:

=============================
A.style1:link Doesn’t work. Underline displays, incorrect color displays.
A.style1:active Doesn’t work at all.
A.style1:visited Works Perfectly!
A.style1:hover Works Perfectly!
=============================

Do you or anyone know what’s wrong?

Thanks,
Jenny :)
 
dunno if this will solve your problem but i cant see anytyhing wrong in your css barring the <style> tags. When you create and external stylesheet with the extension .css you dont need <style> tags as it can only contain style information so you dont need to tell the browser what it is. I think this will sort it out for you. btw what browser are you using as i think some respond differently (netscape 4 - yawn yawn) to sub classes for css.

good luck

rob
 
JennyW,

could you repost the html page? its totally empty now!
so now i cant check out what might be wrong with it!

BobbaFet Everyone has a right to my opinion.
E-mail me at cwcon@programmer.net
 
Hi guys!

crazyboybert, your solution worked perfectly!
I took out the <style> tags and everything is now working correctly.

Do I always take out the <style> tags when putting css in an external .css file?

crazyboybert, you wrote:
btw what browser are you using as i think some respond differently (netscape 4 - yawn yawn) to sub classes for css.

What are sub classes for css? What does that mean?
I use IE 5.5 and 5.0.

Here’s my new page:

Thanks again for your help guys! :)

…I really do appreciate your help guys, this is great!
 
hi Jenny,

Your right there you never out a <style> tag into an external .css file. You only need to use the tags if you are creating style block in an html page.

Im sorry for not explaining more clearly what i meant by subclasses. I dont even know if that is the correct terminology but it is how i describe them. It is when you define a style for different states of an element. I think the correct wording is 'pseudo-class'. e.g

a:hover

these work fine for all browsers though i have had some confusion when defining classes for these like:

a.class1:hover

especially in NS4. If you are using IE5.5 / IE5 they will be absolutely fine.

hope this helps

rob
 
pseudo classes are somewhat like events in JavaScript
like onMouseOver (think A:hover) or onFocused (think A:active) ...

BobbaFet Everyone has a right to my opinion.
E-mail me at cwcon@programmer.net
 
Did you get it working yet? I prefer this format, slightly different than those given above!


a:link.style1 {color: ; text-decoration: none; }
a:active.style1 {color: ; text-decoration: none; }
a:visited.style1 {color: ; text-decoration: none; }
a:hover.style1 {color: ; text-decoration: none; }

a:link.style2 {color: ; text-decoration: none; }
a:active.style2 {color: ; text-decoration: none; }
a:visited.style2 {color: ; text-decoration: none; }
a:hover.style2 {color: ; text-decoration: none; }

and just change, colours, text-decoration, fonts etc to suit.

É
enzo@endamcg.com
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top