CSS - Links In Css

My first post Website:www.freewebs.com/weareamazing

I can't figure out how to move the links that are at the top of my page (Home, Graphics, Icons, Linking Back, Credits) to the side of my table. I also want to get rid of that line that is under the links. Thank you for your help!

I'm currently working on a website for college, but I've run into an issue I can't work out. I can't seem to get rid of the default purple box that appears around my links.

The HTML:
Code:

<div id="homelink"><a href="index.html"></a></div>

The CSS:
Code:

#homelink{
	position:absolute;
	width:53px;
	height:17px;
	margin-top:25px;
	margin-left:70px;
	z-index:10;
}

#homelink a{
	display:block;
	background-image:url(images/links/home.png);
	background-repeat:no-repeat;
	width:53px;
	height:17px;
}

#homelink a:hover{
	display:block;
	background-image:url(images/links/homehover.png);
	width:53px;
	height:17px;
}

As you can see, I use a background image for the div and no text for the link. Clicking the background image works fine and takes me to the homepage, however I get the default visited and active link border around it.

Is there any way to solve this so that no border appears?

I am not sure if these links count as navigation or not, so not sure if I should be using the UL element for semantic correctness?

<div id="footer_bottom" class="bold">

<a href="sitemap.php" title="Sitemap">Sitemap</a> |
<a href="accessibility.php" title="Accessibility Options">Accessibility Options</a> |
<a href="http://validator.w3.org/check?uri=referer;verbose=1" rel="external" title="Validate XHTML">XHTML Valid</a> |
<a href="http://jigsaw.w3.org/css-validator/check/referer" rel="external" title="Validate CSS formatting">CSS Valid</a>

</div>

I want to have a hover effect on the links of my page. I'm using an attached stylesheet to define it. Here is the section defining the links:

Code:

a:link {
  color: red;
  text-decoration: none;
}
a:hover {
  color: blue;
  text-decoration: underline;
}
a:visited {
  color: red;
  text-decoration: none;
}
a:active {
  color: red;
  text-decoration: underline;
}

Normal links appear red and is not underlined. When the cursor hovers over a normal link, it appears blue and is underlined.

However, visited links do not 'behave' as normal links. They appear red and are not underlined. When hovered over, they do not change color or get underlined.

I want visited links to act the same. They only way I could get them to act the same was to do the following:

Code:

a.general:link {
  color: red;
  text-decoration: none;
}
a.general:visited {
  color: red;
}
a.general:hover {
  color: blue;
  text-decoration: underline;
}
a.general:active {
  color: red;
  text-decoration: underline;
}

This is the only rules IE will obey. But every link need to be defined as instances of class "general". Is there a better way of handling this?

I have set up a CSS file for a website I am building, however, when I click on the links which work correctly (at first) it goes to the desired place, if I go "back" the link turns to a larger italic font. Look here for example. http://www.burrellprolabs.com/newsite.htm if you click on one of the body copy links under "latestNEWS" then go back you will see what I mean.

here is my css style for that particular part:

.bodycopy {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #575757;
text-decoration: none;
line-height: 13px;
}
.bodycopy a:link {
color: #BF0000;
text-decoration: none;
}
.bodycopy a:active {
color: #BF0000;
text-decoration: none;
}
.bodycopy a:visited {
color: #BF0000;
text-decoration: none;
}
.bodycopy a:hover {
color: #969696;
text-decoration: underline;

On this site, the links do not work and I don't know why. The links should be a different color and when you hover over them they should change colors, but again, they do not. You can't even click on them and I can't figure out why. Any help is appreciated. Thanks!

Hi Whenever I shrink my window in Ie, the Links bar stays in the same place. You can view this at

http://www.trowbridge-wiltshire.co.uk/newtrowbridge

Code:

	body 		{

			
			background:#CBDEF5;
			margin: 1em auto;
			width: 600px;
			
			
			}

	#leftcontent	{
			margin: 1em auto;
			position: absolute;
			top:100px;
			left:250px;
			width:100px;
			background:#CBDEF5;
			
			}

	#centercontent 	{
			margin: 1em auto;
			width:500px;
			background:#87B4EB;
			color:#ffffff;
			border:2px solid rgb(75,123,211);
   			margin-left: 140px;
   			margin-right:20px;
			}
	
	
	#advertising {
			margin: 1em auto;
			width:500px;
			background:#87B4EB;
			color:#ffffff;
			border:2px solid rgb(75,123,211);
			margin-left:140px;
			margin-right:20px;
		}
		
	#banner 	{
			background:#CBDEF5;
			height:40px;
			padding:5px;
			}
	

	p,h1,pre 	{
			margin:0px 10px 0px 10px;
			}

	h1 		{
			font-size:14px;
			padding-top:10px;
			}

	
	background: #c3c8c3; }
	
	#button ul {
			list-style: none;
			margin: 0;
			padding:0;
			border:;
			}
	
		#button li {
			border-bottom: 1px solid #CBDEF5;
			margin: 0;
			}
	
	
	#button li a {
			display: block;
			padding: 5px 5px 5px 0.5em;
			border: 1px solid #1958b7;
			background-color: #87B4EB;
			color: #fff;
			text-align:center;
			text-decoration: none;
			width: 100%;
			}
	
		html>body #button li a {
			width: auto;
			}
	
		#button li a:hover {
			border: 1px solid #1958b7;
			background-color: #4B7BD3;
			color: #fff;
		}
	
	
		

Hi,

How would I code a div that is also a link? I want to have boxes on my page that will be links to other pages. I want to be able to have the div change background colour when you hover over the entire div.

I've tried:

.selectionBar {
padding: 5px;
background: #6687B5;
width: 150px;
}

.selectionBar a {
color: #FFFFFF;
}

.selectionBar a:hover {
background: #516C91;
}


<div class="selectionBar"><a href="">Text Field</a></div>


But that just changes the background colour directly around the text inside the href, and doesn't make the entire div a link.

Can anyone help me out here please?
I have an urgent request and need to get this site up and running tomorrow :-(
I cannot seem to hover over, mouse over any of my a:hover, link, over etc in IE.
The cursor just sticks as an arrow and doesn't change to a hand. It works in Firefox fine.
Thanks in advance. Lisa :-)

My HTM file:
**************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<META name="Description" content="">
<META name="Keywords" content="">
<link href="css/main.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<script language="javascript" src="scripts/menu.js" type="text/javascript">
</script>
</head>
<body>
<div id="nav-toplevel">
<div id="nav-meta">
<ul title="Top Level Navigation bar">
<li><a href="index.php" title="">home</a></li>
<li><a href="aboutus.php" title="">about us</a></li>
<li><a href="contact.php" title="">contacts</a></li>
</ul>
</div>
</div>
<!-- End of meta navbar -->
<div id="nav-nextlevel">
<div align="center">
<div id="menu">
<ul id="menujs">
<li id=""><a href="./" title="">Item 1</a>
<ul>
<li id=""><a href="" title="">Thailand</a></li>
<li id=""><a href="" title="">Thailand</a></li>
<li id=""><a href="" title="">Thailand</a></li>
</ul>

<li id=""><a href="./" title="">Item 2</a>
<ul>
<li id=""><a href="" title="">Thailand</a></li>
</ul>
</li>
<li id=""><a href="./" title="">Item 3</a>
<ul>
<li id=""><a href="" title="">Thailand</a></li>
</ul>
</li>
<li id=""><a href="./" title="">Item4</a>
<ul>
<li id=""><a href="" title="">Thailand</a></li>
</ul>
</li>
<li id=""><a href="./" title="">Item 5</a>
<ul>
<li id=""><a href="" title="">Thailand</a></li>
</ul>
</li>
<li id=""><a href="./" title="">Item 6</a>
<ul>
<li id=""><a href="" title="">Thailand</a></li>
</ul>
</li>
<li id=""><a href="./" title="">Item 7</a>
<ul>
<li id=""><a href="" title="">Thailand</a></li>
</ul>
<li id="selectcountry"><a href="#" title="">Item 8</a>
<ul>
<li id="thailand"><a href="" title="">Thailand</a></li>
</ul>
</li>
</li>
</ul>
</div>
</div>
</div>
<!-- End of top level navbar --> </div>
<!-- Start of main content section -->
<div id="container">
<div id="content">
<h1>Main Heading Here</h1>
<h2 align="center">These Links Don't Work :-(</h2>
<p>
<strong>This link doesn't work<a href="." target="_self">Thailand</a><br>
<br>
<strong>This link doesn't work<a href="." target="_self">Thailand</a><br>
<br>
<strong> This link doesn't work <a href=".">Thailand</a></p>
</div>
<div id="contentb">
</div>
<div id="footer">
<p id="info-footer">
<a href="">Doesn't Work</a> |
</p>
</div></div>
</body>
</html>


**************
Here's my main.css

html {
font-family:verdana, arial, helvetica, sans-serif;
font-size:65%;
color:#555;
background:#fff;
/* Border Image */
background-image:url("../images/htm6l.png");
background-position:center center;
background-repeat:repeat-y;
}

body {
position:relative;
width:700px;
padding:15px 30px 180px 20px;
margin:10px auto 10px auto;
/* Page Background */
background-image:url("../images/body.png");
background-position:center center;
background-repeat:repeat-y;
border-bottom:1px solid #ECECEC;
border-top:1px solid #ECECEC;
}

#banner {
position:absolute;
left:0;
width:100%;
height:120px;
padding:0 !important;
padding-right:50px;
background-color:#FFF;
/* top image */
background-image:url("../images/scuba_8.jpg");
background-position:150px 0;
background-repeat:no-repeat;
border-top:1px solid #ECECEC;
border-bottom:1px solid #ECECEC;
}


#nav-toplevel {
position:relative;
right:290px;
margin-right:-25px;
}
#nav-nextlevel {
position:relative;
right:0px;
margin-right:-30px;
}

#nav-meta {
position:absolute;
right:0;
top:1px !important;
top:0px;
}

#nav-meta ul {
display:inline;
margin:0;
padding:0;
}

#nav-meta ul li {
display:inline;
margin:0 !important;
margin-left:3px;
padding:1px;
background-color:#F8FBFF;
border:1px solid #ccc;
border-top:none;
list-style:none;
}

#nav-meta a {
padding-left:2px;
padding-bottom:2px;
font-size:0.94em;
letter-spacing:0.04em;
color:#888;
text-decoration:none;
margin:0 !important;
margin-right:-2px;
}

#nav-meta li:hover {
border-top:1px dashed #CACACA;
}

#nav-meta a:hover {
background-color:transparent !important;
text-decoration:none !important;
background-color:#fff;
text-decorationverline;
}
#menu ul,
#menu li,
#ClearFloat {
margin:0px;
padding:0px;
}
#menu{
position:absolute;
display:block;
top:122px;
margin:0px 0px 0px 99px;
width:auto;
font-family:verdana,Georgia, serif;
font-size:11px;
list-style-type:none;
float:left;
z-index:300;
}

#menu ul li ,
#menu ul li ul li {
position:relative;
font-family:verdana,Georgia, serif;
list-style-type:none;
float:left;
z-index:500;

}
#menu ul li ul {
position:absolute;
display:none;
font-family:verdana,Georgia, serif;
}
#menu ul li a,
#menu ul li a:link,
#menu ul li a:visited {
display:block;
font-size:11px;
font-family:verdana,Georgia, serif;
color:#888;
text-decoration:none;
margin-left:3px;
margin-top:0px;
padding-bottom:3px !important;
padding-left:4px;
padding-right:4px;
padding-top:3px;
background-color:#FFF;
border:1px solid #ccc;
border-top:none;
line-height:10px;
}
#menu ul li.over ul,
#menu ul li:hover ul {
display:block;
font-size: 11px;
font-family:verdana,Georgia, serif;
text-align:left;
width:100px;
background-color:transparent !important;
text-decoration:none !important;
}

#menu ul li a:hover {
display:block;
font-size:11px;
font-family:verdana,Georgia, serif;
color:#ccc;
}

#menu ul li ul li a:hover {
display:block;
font-size:11px;
font-family:verdana,Georgia, serif;
}


#container {
position:relative;
top:160px;
height:100%;
background-color:#F8FBFF;
/* Footer Image */
background-image:url("../images/scuba_footer.jpg");
background-position:right bottom;
background-repeat:no-repeat;
margin-bottom:10px;
z-index:100;
}

#content {
position:relative;
width:700px;
background:transparent;
}

#content p {
font-size:1.08em;
line-height:1.4em;
padding:6px 11px 13px 25px;
margin:0 15px 1.1em 0;
background-image:url("../images/shadow2.png");
background-position:bottom center;
background-repeat:no-repeat;
}

#content ol, #content ul{
font-size:1.08em;
line-height:1.4em;
padding:6px 11px 13px 25px;
margin:0 13px 1.1em 0;
background-image:url("../images/shadow2.png");
background-position:bottom center;
background-repeat:no-repeat;
}
#content li {
list-style-type:square;
margin: 0px 0px 0px 15px;
}

#contentb {
position:relative;
width:525px;
background:transparent;
}

#contentb p {
font-size:1.08em;
line-height:1.4em;
padding:6px 11px 13px 20px;
margin:0 15px 1.1em 0;
background-image:url("../images/shadow.png");
background-position:bottom left;
background-repeat:no-repeat;
}

#contentb ol, #contentb ul {
font-size:1.08em;
line-height:1.4em;
padding:6px 11px 13px 40px;
margin:0 13px 1.1em 0;
background-image:url("../images/shadow.png");
background-position:bottom left;
background-repeat:no-repeat;
}
#contentb li {
list-style-type:square;}



h1,h2,h3,h4,h5,h6 {
height:auto !important;
height:30px;
margin-top:0;
margin-left:11px;
font-family:century gothic, serif;
letter-spacing:0.04em;
background-repeat:no-repeat;
border-bottom:1px solid #ECECEC;
background:transparent;
}

h1 {
width:680px;
padding-top:0.3em;
padding-left:2px;
font-size:14px;
color:#4a74c0;
background-image:url("../images/sand23.png");
background-position:bottom left;
background:transparent;

}

h4 {
border-bottom:0px solid #ECECEC;
}

h2,h3,h4,h5,h6 {
font-size:12px;
font-size:1.3em;
color:#4a74c0;
padding-left:25px;
background-position:bottom left;
}

h2,h3, h4, h5, h6 {
width:660px;
}

h1:first-letter ,h2:first-letter {
font-size:1.6em;
text-transform:uppercase;
}

h3:first-letter ,h4:first-letter ,h5:first-letter ,h6:first-letter {
font-size:1.5em;
text-transform:uppercase;
}

#footer {
position:absolute;
bottom:3px !important;
bottom:0px;
right:23px;
width:100%;
font-size:0.94em;
}

#info-footer {
position:absolute;
right:-32px;
}


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

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

a:hover {
color:#ff490d;
text-decoration:none;
}

a:active {
color:#000;
text-decoration:none;
}

*************************
Here's my menu.js

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menujs");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}

window.onload=startList;

********************
here's my ie.css#container {
z-index:-1;
}


I would really appreciate any help.
Thanks again Lisa.

I'm having a problem with CSS and links. The class for the links is correctly added to the anchor tag and there is nothing wrong with the code. The links are supposed to remain the same except when hovering which all it does then is change the color of the text and put add an underline. However when testing this out, it doesn't work in FF at all and in IE it's fine until you click the link and then it goes back to acting like FF does. It almost appears as if the .link:visted part was setup differently than the rest, but it's not. Here's the code: Code:

a.navtextlink:link{
  color: #666666;
  font-weight: none;
  text-decoration: none;
}

a.navtextlink:active{
  color: #666666;
  font-weight: none;
  text-decoration: none;
}

a.navtextlink:hover{
  color: #000000;
  font-weight: none;
  text-decoration: underline;
}

a.navtextlink:visited{
  color: #666666;
  font-weight: none;
  text-decoration: none;
}

If you want to view a live sample, you can do so here. Thanks for any help you can provide.

I've gone through my nav.php and nav.css files about 100 times and I can't find anything that would cause this error.

This is the nav.php code
PHP Code:
<?php
$section = $_GET['section'];
switch($section){
    case 'memorial':{
        echo "
    <div id=\"nav\">
    <div id=\"nav_main\">
    <ul>    
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"home.php?section=home\">Home</a>
    </li>
    <li id=\"memorial_item\">
        <ul>
            <li>
                <a id=\"memorial_1\" class=\"selected\" href=\"memorial.php?section=memorial\">Memorial</a>
                <img src=\"image/section.png\" style=\"float:left;clear:left;height:13px;\" alt=\"V.C. Bar\" />
            </li>
            <li>
                <a id=\"memorial_2\" href=\"memorialkia.php?section=memorial&startpage=1\">K.I.A. WW2</a>
            </li>
            <li>
                <a id=\"memorial_3\" href=\"memorial.php?section=memorial&startpage=1#ENLISTED_DB\">Served WW2</a>
            </li>
        </ul>

    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"#not_complete\">Members</a>
    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"#not_complete\">Our Shop</a>
    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"about.php?section=about\">About</a>
    </li>

    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"credits.php?section=credits\">Credits</a>
    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"#last_item\">Site Map</a>
";
        break;
    }
    case 'about':{
        echo "
    <div id=\"nav\">
    <div id=\"nav_main\">
    <ul>    
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"home.php?section=home\">Home</a>
    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"memorial.php?section=memorial\">Memorial</a>
    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"#not_complete\">Members</a>
    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"#not_complete\">Our Shop</a>
    </li>
    <li id=\"about_item\" class=\"selected\">
        <ul>
            <li>
                <a id=\"about_1\" href=\"about.php?section=about\">About</a>
                <img src=\"image/section.png\" style=\"float:left;clear:left;height:13px;\" alt=\"V.C. Bar\" />
            </li>
            <li>
                <a id=\"about_2\" href=\"about.php?section=about&site=submit\">Site</a>
            </li>
            <li>
                <a id=\"about_3\" class=\"about_mid\" href=\"about.php?section=about&b3l=submit\">Branch 3</a>
            </li>
            <li>
                <a id=\"about_4\" class=\"about_mid\" href=\"about.php?section=about&rcl=submit\">R.C.L.</a>
            </li>
            <li>
                <a id=\"about_5\" class=\"about_mid\" href=\"about.php?section=about&jbc=submit\">John B. Croak</a>
            </li>
            <li>
                <a id=\"about_6\" href=\"about.php?section=about&vc=submit\">V.C.</a>
            </li>
        </ul>
    </li>

    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"credits.php?section=credits\">Credits</a>
    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"#last_item\">Site Map</a>

";
        break;
    }
    case 'credits':{
        echo "
    <div id=\"nav\">
    <div id=\"nav_main\">
    <ul>    
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"home.php?section=home\">Home</a>
    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"memorial.php?section=memorial\">Memorial</a>
    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"#not_complete\">Members</a>
    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"#not_complete\">Our Shop</a>
    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"about.php?section=about\">About</a>
    </li>

    <li class=\"selected\" id=\"credits\">
        <a  id=\"credits\" href=\"credits.php?section=credits\">Credits</a>
        <img src=\"image/section.png\" style=\"float:left;clear:left;\" alt=\"V.C. Bar\" />
    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"#last_item\">Site Map</a>
";
        break;
    }
    case 'home':{
        echo "
    <div id=\"nav\">
    <div id=\"nav_main\">
    <ul>    
    <li>
        <a class=\"selected\" id=\"home\" href=\"home.php?section=home\">Home</a>
        <img src=\"image/section.png\" style=\"float:left;clear:left;\" alt=\"V.C. Bar\" />
    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"memorial.php?section=memorial\">Memorial</a>
    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"#not_complete\">Members</a>
    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"#not_complete\">Our Shop</a>
    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"about.php?section=about\">About</a>
    </li>

    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"credits.php?section=credits\">Credits</a>
    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"#last_item\">Site Map</a>
";
        break;
    }
    default:{
        echo "
    <div id=\"nav\">
    <div id=\"nav_main\">
    <ul>    
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"home.php?section=home\">Home</a>
    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"memorial.php?section=memorial\">Memorial</a>
    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"#not_complete\">Members</a>
    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"#not_complete\">Our Shop</a>
    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"about.php?section=about\">About</a>
    </li>

    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"credits.php?section=credits\">Credits</a>
    </li>
    <li class=\"nav_item\">
        <a class=\"nav_item\" href=\"#last_item\">Site Map</a>
";
        break;
    }
}
echo "</li></ul></div><div id=\"nav_foot\">
<a href=\"http://validator.w3.org/check?uri=referer\">Valid XHTML 1.0!</a>
</div></div>";
?>




This is the output of the nav.php file:
Code:

div id="nav">
	<div id="nav_main">
	<ul>	
	<li>
		<a class="selected" id="home" href="home.php?section=home">Home</a>
		<img src="image/section.png" style="float:left;clear:left;" alt="V.C. Bar" />
	</li>
	<li class="nav_item">

		<a class="nav_item" href="memorial.php?section=memorial">Memorial</a>
	</li>
	<li class="nav_item">
		<a class="nav_item" href="#not_complete">Members</a>
	</li>
	<li class="nav_item">
		<a class="nav_item" href="#not_complete">Our Shop</a>

	</li>
	<li class="nav_item">
		<a class="nav_item" href="about.php?section=about">About</a>
	</li>

	<li class="nav_item">
		<a class="nav_item" href="credits.php?section=credits">Credits</a>
	</li>

	<li class="nav_item">
		<a class="nav_item" href="#last_item">Site Map</a>
</li></ul></div><div id="nav_foot">
<a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0!</a>
</div></div>

and this is the CSS that's been my main target trying to iron out this bug.
Code:

#nav{
float:left;
width:122px;
}
#nav a:link, #nav a:visited{
color:#9fb594;
}
#nav_main ul, #nav_main ul li{
padding:0;
margin:0;
list-style-type:none;
text-align:left;
}
#nav_main{
margin:1em 0 0 0;
float:left;
clear:left;
width:122px;
background-image:url('../image/nav_bg.png');
background-repeat:repeat-y;
}
#nav_main p{
padding:0;
margin:0;
}
#nav_foot{
float:left;
clear:left;
width:122px;
height:177px;
margin:auto;
background-image:url('../image/nav_foot.png');
background-repeat:no-repeat;
}
.nav_item{
float:left;clear:both;
}
#memorial_1{
width:105px;height:1em;float:left;clear:both;color:#000;font-weight:600;
}
#memorial_2{
width:105px;height:1em;text-align:right;margin-right:19px;float:right;clear:both;background-color:#1a1121;border-top:thin solid #000;
}
#memorial_3{
text-align:right;height:1em;width:105px;background-color:#1a1121;border-bottom:thin solid #000;padding-bottom:.4em;margin-right:19px;float:right;clear:both;
}
.about_mid{
width:105px;height:1em;text-align:right;margin-right:19px;float:right;clear:left;background-color:#1a1121;
}
#memorial_item{
float:left;clear:both;
}
#about_item{
float:left;clear:both;
}
#about_6{
width:105px;height:1em;text-align:right;margin-right:19px;float:right;clear:left;background-color:#1a1121;border-bottom:thin solid #000;
}
#about_2{
width:105px;height:1em;text-align:right;margin-right:19px;float:right;clear:left;background-color:#1a1121;border-top:thin solid #000;
}
#about_1{
float:left;height:1em;width:105px;clear:both;font-weight:600;
}
#credits{
clear:both;font-weight:600;
}
#home{
clear:both;font-weight:600;
width:105px;float:left;clear:both;
}
.selected{
background-image:url('../image/section.png');background-repeat:no-repeat;
}

I've spent everyday since monday trying to fix this and I can't find anything. It happens in both IE and firefox so I think it's more of a CSS error but I'm convinced it's not in any of these files and they're the only files with styles for the nav.

Can some explain (briefly) how one goes about specifying CSS styles for different link areas in a page. for example, I want navigation links to have a different set of "rules" than footer links.

ted

Excuse me but i am a little thick on this one: How do I create different colored link style for say a:

1. navigation bar
2. footer bar
3. main body

Does making classes make sense in this situation

doug