Hyperlinks NOT underlined in website using CSS

  • Thread starter Thread starter dreamspinner3
  • Start date Start date
D

dreamspinner3

I created a website using a CSS template set I bought, the site is
http://www.parrotnanniesmn.com/. The problem is that the hyperlinks
within the website are NOT underlined, and I want them to be. I have
tried to figure out how to fix the problem myself and I can't. Can
anyone help me? This is the code for the styles.css sheet:

html, body {
color:#000000;
font: 10pt Verdana, Arial, sans-serif;
margin: 0px;
scrollbar-base-color:#8C2C22;
}

..header {
background-color:#FE9B84;
color: #000000;
border: 1px solid #DF7C69;
color: #8C2C22;
font-weight: bold;
}


table {
color: #979797;
font-size: 10pt;
}

ul, ol {
color: #C4C4C4;
line-height: 150%;
font-size: 10pt;
text-align: left;
}

ol {
list-style-image: url('none');
list-style-type: decimal;
}

ul, li {
color: #C4C4C4;
list-style-image: url('images/bullet.gif');
font-size: 10pt;
text-align: left;
margin-right: 10px;
}

h1 {
font-size: 16pt;
color: #C4C4C4;
text-align: center;
background-image: url('images/h1.gif');
padding: 2px;
border: 1px solid #2F0404;
width: 92%
}

h2 {
font-size: 14pt;
color: #3C0606;
text-align: left;
background-image: url('images/h2.gif');
padding: 2px;
border: 1px solid #2F0404;
width: 92%
}

h3 {
font-size: 12pt;
color: #3C0606;
text-align: left;
background-image: url('images/h3.gif');
padding: 2px;
border: 1px solid #2F0404;
width: 92%
}

a:link {
text-decoration:underline;
color: #DFC16F;
background-color:transparent;
}
a:visited {
text-decoration:underline;
color: #DFC16F;
background-color: transparent;
}

a:hover {
text-decoration: none;
color: #3C0606;
background-color: #DFC16F;
}
a:active {
text-decoration: none;
color: #3C0606;
background-color: #DFC16F;
}


#LeftNav {
color: #979797;
font: bold 10pt Verdana, Arial, sans-serif;
text-align: right;
vertical-align: top;
margin-left: 3px;

}

#LeftNav p{
color: #FFFFFF;
font: bold 10pt Verdana, Arial, sans-serif;
margin-left: 3px;

}

#LeftNav a:link {
color: #FFFFFF;
display: block;
background-color: transparent;
text-decoration: none;
text-align: center;
background-image: url('images/butt1.gif');
width: 140px;
height: 22px;
margin-left: 3px;
padding-top: 3px;

}

#LeftNav a:visited {
color: #FDE7AF;
display: block;
background-color: transparent;
text-decoration: none;
text-align: center;
background-image: url('images/butt3.gif');
width: 140px;
height: 22px;
margin-left: 3px;
padding-top: 3px;

}

#LeftNav a:hover {
color: #AD0000;
display: block;
text-decoration: none;
text-align: center;
background-image: url('images/butt2.gif');
width: 140px;
height: 22px;
margin-left: 3px;
padding-top: 3px;

}

#LeftNav a:active {
color: #FFFFFF;
display: block;
text-decoration: none;
text-align: center;
background-image: url('images/buthov.gif');
width: 140px;
height: 22px;
margin-left: 3px;
padding-top: 3px;

}

..main {
font-family: verdana;
font-size:10pt;
background-color: #FE9B84;
color: #8C2C22;
text-align: justify;
line-height: 20px;
vertical-align: top;
padding: 20px;
width: 100%;
border: 1px solid #DF7C69;
}

..Copyright {
text-decoration: none;
color: #8C2C22;
background-color: #711E28;
}
 
If you want them to "always" be underlined change:
a:hover {
text-decoration: none;
color: #3C0606;
background-color: #DFC16F;
}
a:active {
text-decoration: none;
color: #3C0606;
background-color: #DFC16F;
}

to:

a:hover {
text-decoration: underline;
color: #3C0606;
background-color: #DFC16F;
}
a:active {
text-decoration: underline;
color: #3C0606;
background-color: #DFC16F;
}


--

Steve Easton
Microsoft MVP FrontPage
FP Cleaner
http://www.95isalive.com/fixes/fpclean.htm
Hit Me FP
http://www.95isalive.com/fixes/HitMeFP.htm
 
Hi,

You have this bit of code
#LeftNav a:link {
color: #FFFFFF;
display: block;
background-color: transparent;
text-decoration: none;
.......

which set the links in your left nav to be not underlined. If you want them
underlined remove
text-decoration: none;

Cheers,
Jon
 
Back
Top