PDA

Click to See Complete Forum and Search --> : link problems

Blelisa
12-18-2006, 04:21 PM
I am having a problem with my css.

I have links along the uppper right of my pages that I want to always be black, bold, and no decoration.

Then I have links within my pages that I want to be the standard, underlined, and blue, red or purple depending on their status.

Everything is working fine except for the a:visited. It leaves all the links that were visited black, bold and with no decoration. Here is the style sheet code"

body {width: 850px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
font-family: arial, sans-serif;
font-size: small;}

.logo {float: left;
padding: 15px;}

.link {border: 0;}

#header {background-color: #FFFFFF;
padding: 0px;}

#left {float: left;
width: 200px;
margin-top: 20px;
padding-right: 10px;}

.leftbottom {margin-top: 75px; }

.rightbottom {margin-top: 75px; }

#right {float: right;
width: 200px;
margin-top: 20px;}

#center {margin-right: 265px;
margin-left; 265px;
border-right: #000000;
text-align: center;
background-color: #FFFFFF;}

#singleleft {float: left;
width: 160px;
padding: 10px;}

#footer {clear: both;
text-align: center;}

#footer2 {clear: both;
background-color: #FFFFFF;
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
text-align: center;
padding: 5px;}

#ctext {text-align: center;}

.headingl1 {font-family: arial;
font-color: #FFFFFF;
font-weight: bold;
text-align: center;
background-color: #000099;
border-color: red;
padding: 2px;}


#headpic {width: 844px;
height: 180px;
align: center;}

.greet {font-size: large;
font-weight: bold;
color: red;
text-align: center;}

.greet1 {font-size: medium;
font-weight: bold;
color: #0000FF;
text-align: left;}

.leftcolumn {float: left;
width: 100px;
margin-left: 0%;
margin-right: 5%;}

.middlecolumn {float: left;
width: 1%;
padding: 1px;}

.middlecolumn2 {float: right;
width: 1%;
padding: 1px;}

.heading1 {font-family: sans-serif;
color: red;
text-decoration: underline;
font-size: 16px;
text-align: left;
font-weight: bold;
margin-top: 12px;}

#lisa {margin-left: 300px;}

#lisa1 {text-indent: .50in;
float:left;}

.firstletter {color: red;
font-size: 16px;
font-weight: bold;}

.pheading {color: navy;
font-size: large;
font-weight:bold;
border-bottom: 1px solid #000066;}

#menu {
float: right;
text-align: center;
}
#menu div {
display: block;
width: 70px;
float: left;
border-left: 1px solid black;
}

#menu a:link, a:visited, a:active {text-decoration: none;
color: #000000;
font-weight: bold;
}

#menu a:hover {color: #ff0000;
}

.bold {font-weight: bold;
font-size: medium;
text-indent: 1in;}

.indent {text-indent: 1in;}

#navcontainer a {color: #000066;
display: block;
padding: 3px;
text-decoration: none;
border-bottom: 1px solid #000066;}

#navcontainer a:visited {text-decoration: none;
font-weight: normal;}

#navcontainer a:hover {background-color: #000066;
color: #ffffff;}


#form {
margin-left: auto;
padding-left: 200px;
}

.auto {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #0000FF;
}

.answer {font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
.highlight {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #0000FF;
text-decoration: none;
}

Here is my body code"
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Hemisphere Communications - WNY's Premier Provider of Telecom and Data Services</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="temp.css">
</head>
<body>
<div id="top">
<div id="header"><IMG SRC="images/topline.gif"></div>
</div>
<div id="menu">
<div><a href="VS101606.HTM">Voice<br />
Services</a></div>
<div><a href="DS101606.html">Data<br />
Services</a></div>
<div><a href="WS101606.html">Web<br />
Services</a></div>
<div><a href="OLS101606.html">Online<br />
Services</a></div>
<div><a href="CNTUS101606.html">Contact<br />
Info</a></div>
</div>
<a href="index5.htm"><img src="images/logoheading.gif" border="0" class="logo"></a></br></br>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="850" height="150">
<param name="movie" value="101206.swf">
<param name="quality" value="high">
<embed src="101206.swf" width="850" height="150" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed></object>

<div id="left">
<div class="headingl1"><font color="#FFFFFF">Service Now Available Online</font></div>
Hemisphere Communications is pleased to announce the arrival
of it's new online customer service department. Schedule a service call, order
parts, or even request a new manual, all the help you need is simply a click
away!</br> <a href="http://ws20.ipowerweb.com/hemisphe/OLS101606.html">Go to
Customer Service Page</a>
Thanks in advance for any help you can give. Thanks!
WebJoel
12-18-2006, 05:18 PM
Revisit this:

#menu a:link, a:visited, a:active {text-decoration: none;
color: #000000;
font-weight: bold;
}

Here you say "#menu a:link" should be "text-decoration: none; color:#000000; font-weight: bold; (comma), and ANY visited/active link (#menu or otherwise) are also "text-decoration: none; color: #000000;font-weight: bold;".

For just the anchor links in "#menu", try:

#menu a:link, #menu a:visited, #menu a:active {text-decoration: none;
color: #000000;
font-weight: bold;
}

This should 'exclude' any "anchor" that is not in "#menu" from your declarations.
ray326
12-19-2006, 12:34 AM
If the menu was coded correctly as a list it would be a lot easier to get the styles right.
Davey_M
12-19-2006, 06:48 AM
i might be wrong and probably am, but should they not be classes as opposed to id's for the links?
ray326
12-19-2006, 01:10 PM
The links don't have IDs, they are contained in an element with an ID.