CSS - Css Underline Color On Links??

Is there a way to tell the browser not to change the color of a visited link? I have an anchor around some text, but I don't know the color setting of the text. When I visit the link, I just want the text to retain its color based on the other CSS declarations in effect for the text.

So, is there a way to specify a:visited { color: do-not-change; }?

Hi Guys!

Most of the links in my document are set to #ffffff, because they have a dark background.

I have 'content' section that I want to show blue links. I tried adding the following code into my style sheet:

PHP Code:
 a.content:link {
color: #0000FF; 
text-decoration: underline;
}

a.content:visited {
color: #0000FF; 
text-decoration: underline;
}

a.content:hover {
background-color: #6666FF;
text-decoration: underline;
} 





And nothing!? (apart from the layout crapped up!!!!) Could someone point me in a better direction?

Full CSS below!

Thanks Charlie



PHP Code:
 html {height:100%;}
body {
margin:0; padding:0; height:100%;
background-image:url(images/newback.jpg);
background-position:top right;
background-repeat:repeat-y;
background-color:#ffffff;
font-family: sans-serif; 
font-size: .7em;
}
#wrap {
background-image:url(images/newback150px.jpg);
background-position:top left;
background-repeat:repeat-y;
min-height:100%;
}
* html #wrap {height:100%}

div#navbar {padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px}

div#formbox {
color: #000000;
padding: 2%;
border: #000044 solid 1px;
}

div#userbar {padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px}

#header {
background-color: #000044;
background-image:url(images/wel.jpg);
width 100%;
background-repeat: repeat;
border-bottom: 2px #000000 solid;
color: #ffffff; 
margin:0; padding:0;
height:100px;
}

}
#left {
float:left;
width:149px;
background-image:url(images/newback.jpg);
background-repeat: repeat;
color: #ffffff; 
text-align:center;
background-color: #000044;
border-right: 1px #000000 solid; 
}
#main {
position:relative;
margin-left:200px;
}

#content {
text-align:center;
padding:4px;
margin-right:200px;
margin-bottom:150px;
text-align:left;
}

#clearfooter {
clear:both;
height:80px;
overflow:hidden;
}
#footer {
height:40px;
background-color: #000044;
border-top: 2px #000000 solid;
margin:0; padding:0;
background-image:url(images/newback.jpg);
background-repeat: repeat;
margin-top:-0px;
color: #ffffff; 
text-align:center;
}
div#newsbar {padding: 0%; 
text-align: center;
height:140px; 
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff;
margin-left: +150px;
margin-right: +10px; 
margin-top: -180px; 
border: 2px #000000 solid;  
width: auto;} 

code {
font-size:0.8em;
border:1px solid navy;
background-color:white;
color:#333333;
padding:10px;
display:block;
width:80%;
margin:10px auto;
overflow:auto;
}

h1 {font-size: 1.4em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h2 {font-size: 1.3em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h3 {font-size: 1.2em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h4 {font-size: 1.1em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h5 {font-size: 1em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

a:link {color: #ffffff; 
text-decoration: underline;} 

a:visited { 
    color: #ffffff; 
    text-decoration: underline;}     

a:hover {color: #dedbcb;
background-color: #0000FF;
text-decoration: underline;} 

I've got two questions of which one is to gather some opinions to help me decide what's best.

1) color notation in CSS:
Any recommendations as to what notation I should use?

examples:
color: rgb(255,234,0)
color: slateblue
color: #FF99CC
color: #F9C

Is there some recommendation here? I'm quite used to the long hex notation e.g. #FF99CC. Is the short notation also very much accepted? And should I be using those at all or should I prepare myself with a new site to switch to rgb().

2) text-decoration yes or no?
I was thinking the following:
A) when it's absolutely clear that some text presents a link, like e.g. in a menu or some newscolumn with a brief description and a bold title, then it's "okay" to set text-decoration: none. Maybe an underline or colorchange when hovering.
B) When it's not absolutely clear what's a link, like some word in a paragraph text, use underline or at least some other colour which is consistent over the website for being a link.

Also, with point B I was thinking of choosing:
A new link: text-decoration with color and text-decoration gone with hover, for a nice effect.

With a visited link:
I) text-decoration but normal paragraph color and again text-decoration gone when hovering OR...
II) no text-decoration, but still with that color and text-decoration when hovering.

It troubles me coz I can't make up my mind. Something keeps telling me that I should try to keep those text-decorations like with B-I and simply remove the colour, instead of relying on colour to indicate a link. So forget about B-II?! Ah, it was this site which works on my conscious not to rely on color for links: http://lists.w3.org/Archives/Public/www-style/2003Mar/att-0002/01-part#colorunits

Anybody got some comments or tips? And yes also some tip on the CSS I want things to be "user-friendly" enough, but this also means that I don't want text to be broken up too much. Some people even suggested that I should take ALL links out of the paragraph and simply mention them below the paragraph. All good points, but which way to go

Hi all,

I am having difficulty with the background for an image link. I have the following:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Test page</title>
    <style type="text/css">
      a:hover { color: #FFFFFF; background: #0000ff; text-decoration: none; } 
      a:hover img { background: none; }
      .box { background: #00ff00; padding: 1em; } 
      .box img { border: 0; }
    </style>
  </head>
  <body>
    <div class="box">
      <p><a href="#"><img src="images/a1a8aa6a43.jpg" alt="" /></a></p>
      <p><a href="#">Text link</a></p>
    </div>
  </body>
</html>

I have a global style for links that change the background color and the color of the text. However, this also changes the background color of an image link which makes it look odd. I attempted to fix this with

Code:

a:hover img { background: none; }

But this does not fix the issue. Any thoughts?

I am using XHTML strict because the CMS I am using forces me to an XHTML stylesheet. Also, this is just a snippet of the code of the actual page but the bug is present in this snippet.

Hey
i got some cells in a table which hold links.
How can i make only the links inside these cells a different color?

This is the class i use on the table cells:
css Code:
Original - css Code .selectedContactRow{ background-color: white; color: black; }

  

  


 .selectedContactRow{


     background-color: white;


     color: black;


 } 

I only know how to change the link colors in general.
css Code:
Original - css Code a:link{color: red;} a:hover{color: red;} etc.

  

  


 a:link{color: red;}


 a:hover{color: red;}


 etc. 

thanks in advance.

Hi,

I've been having a few problems with underlining text when hovered over.
Here is a site that I've made that has underline on hover implemented: www . amazanproperties . co.uk

Here are the problems:
On Chrome, it used to work, but now doesn't. On hover, it updates the text shadow of the underline, but doesn't actually show the underline. This started happening today.

On every browser except for Chrome, Safari, and IE (compatability mode), it doesn't work at all.

Does anyone know what the problem is?

Thanks!

I have a simple navigation with a undeline on hover in css. but what i would like is that when a link is click and it goes to the page the underline stays under that link ,

ie

page1 - page2 - page3 - page4

when you hove over say page3 it shows page3

when you remove it shows page3

but when you click on page3 and it goes to the page it shows up as

page1 - page2 - page3 - page4

Can some please help me with this my css code is below


.underlinemenu{
font-weight: bold;
width: 100%;
}

.underlinemenu ul{
padding: 6px 0 4px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/
margin: 0;
text-align: right; //set value to "left", "center", or "right"*/
}

.underlinemenu ul li{
display: inline;
}

.underlinemenu ul li a{
color: #ffffff;
padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/
margin-right: 10px; /*spacing between each menu link*/
text-decoration: none;
border-bottom: 0px solid gray; /*bottom border is 3px*/
}

.underlinemenu ul li a:hover, .underlinemenu ul li a.selected{
border-bottom: 3px solid #c12344;
}

I have a page that has a bunch of thumbnails on it and using css to format those images, i've added a margin to both sides for spacing. The class is applied to the href and set to have the img as a descendant. When the page renders in FF, there is no problem. But when it renders in IE, i get the nice little hyperlink underline where the margin is between two thumbnails. Any help would be great.

HTML

<a href="hometour/defiancemo/P9010045.jpg" class="thumbs" target="_blank">
<img src="hometour/defiancemo/thumbs/P9010045.jpg" alt="" />
</a>

CSS
a.thumbs img {margin: 0px 5px 10px 5px;text-decoration: none;color: #019934}

hi, i would like the underline of my top level links to be as wide as the naviagtion box, it is currently only streching to the end of the text itself

PHP Code:
<ul>
    <li><a href="?action=abouUs">about us</a>
        <ul>
            <li><a href="?action=press">press</a></li>
            <li><a href="?action=tellFriend">tell a friend</a></li>
            <li><a href="?action=feedback">feedback</a></li>
        </ul>
    </li>
    <li><a href="?action=new">fitting room</a></li>
    <li><a href="?action=offers">best sellers</a></li>
    <li><a href="?action=col">useful info</a>
        <ul>
            <li><a href="?action=pay">payment options</a></li>
            <li><a href="?action=delCharge">delivery charges</a></li>
            <li><a href="?action=retPol">returns policy</a></li>
        </ul>
    </li>
</ul> 





PHP Code:
/* LEFT NAV */
    
    #leftNav {
        color: #000;
        float: left;
        margin: 0;
        padding: 0;
        width: 128px;
    }
    
    #leftNav a {
        border-bottom: 1px solid #000;
        text-decoration: none;
        width: 120px;
    }
    
    #leftNav ul li ul a {
        border-bottom: none;
    }
    
    #leftNav ul {
        list-style: none;
        margin: 0;
        padding: 10px 0 0 10px;
        display: block;
        border: none;
    }
    
    #leftNav ul li {
        margin: 0;
        padding: 0 0 10px 0;
        width: 110px;
        font-size: 14px;
        font-weight: bold;
    }
    
    #leftNav ul li ul {
        margin: 0;
        padding: 5px 0 0 10px;
    }
    
    #leftNav ul li ul li {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 12px;
        font-weight: 300;
        width: 95px;
    }
    
    /* END OF NAV */ 





thanks for your help

When hovering over a link, how can I make the underline thicker? Check out this site.

link

http://www.cad-design-engineering.com/New/index.php

Problem is most noticeable in IE, of course, because it also puts a space under the header image.

I need to get rid of that line, and the space. Have validated both XHTML and CSS.

Thank you.

The IPad is underlining my phone links automatically making them invisible. I am aware of the fix using the meta tag. The problem is that these numbers are substituted by javascript in our AdWords tracking. I am afraid the <meta name="format-detection" content="telephone=no" /> will cause the phone tracking not to work on IPad. This is the simple css for the phone number:
#phone {
position:absolute;
left:285px;
width:250px;
top:237px;
height:25px;
font-size:18px;
color:#0F2532;
}
and the site is assistedfertility.org. Is there a css rule I can add to #phone that will remove the automatic underline? What other ways that wont effect javascript number tracking?
Thanks

I've been playing with this for a while now, and I can't figure out what the heck I'm doing wrong.

Here's my site:

http://kick.hopto.org

Basically, I want the links inside the .storytitle class to NOT underline when they are hovered over (as the class name suggests, I'm talking about the story titles).

I thought this would work, but it seems to have no effect:

Code:

.storytitle a, .storytitle a:hover, .storytitle a:active
{
	text-decoration: none;
	border-bottom: 0;
}

Any help would be greatly appreciated.

As soon as I apply the floating to my footer spans the dashed border on the links stops working. Can anyone tell me why please?


PHP Code:
<div id="footer"><img src="../images/spacer.gif" alt="Whitespace Image" width="100%" height="4" align="top" />
<span class="spanLeft footerText">
Copyright 2005 <a href="http://www.xxxxxxxxx.co.uk" target="_blank" class="gray">xxxxxxxxxxx</a>.
</span>
<span class="footerText spanRight">
<a href="#" target="_blank" class="gray">xxxxxxxxxx</a> xxxxxxxxxxxxxx
</span>
</div> 





PHP Code:
.footerText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight: bold;
text-decoration: none;
color: gray;
}
.spanRight {
float: right;
margin-right: 5px;
}
.spanLeft {
float: left;
margin-left: 5px;
}
A.gray {
text-decoration: none;
color: gray;
}
A.gray:Hover {
border-bottom: 1px dashed;
color: #009966;
} 

I wonder how to create a link without an underline in HTML? Maybe you have also met such problems.

Anyone helps? Thanks in advance.