title: CSS Hyperlink Colors Not Consistent for Link, Visited, Hover, Active
body: <p>I'm currently using CSS to change the hyperlink colors in my left navigation but there seems to be some inconsistency. Some links will take the correct properties I have declared, whereas, other links won't accept them. I have declared the same <code>class nav</code> to all the links. There isn't any overwriting that I know of for these links since it's isolated.</p>
  
  <p>Below is the left navigation code snippet</p>
  
  <p>This works:</p>
  
  <pre><code>var context='&lt;%=request.getContextPath()%&gt;';
  &lt;%--    var sOrg = '&lt;%=sOrg%&gt;'; --%&gt;
  document.write("&lt;div id=\"leftNav\"&gt;");
  document.write("&lt;div id=\"leftNavtext\"&gt;&lt;a href=\"home.htm?sOrg="+'&lt;%=sOrg%&gt;'+"\" class=\"nav\" id=\"phome\" style=\"text-decoration:none\" &gt;Home&lt;/a&gt;&lt;/div&gt;");
  </code></pre>
  
  <p>Then this doesn't work:</p>
  
  <pre><code>  &lt;% if(roles.contains("PEIMSDataCompleter")) {  %&gt;
  document.write("&lt;div id=\"leftNavtext\" &gt;&lt;a href=\"dataSubmissions.jsp\" class=\"nav\" id=\"dataSubmissions\" style=\"text-decoration:none\"&gt;Data Submissions&lt;/a&gt;&lt;/div&gt;");
  </code></pre>
  
  
  
  <p>Then this works:</p>
  
  <pre><code>document.write("&lt;div  style=\" padding-left: 20px;padding-top:5px;\"&gt;&lt;a href=\"scheduleMonitor.htm\" class=\"nav\" id=\"scheduleMonitor\" style=\"text-decoration:none\"&gt;Monitor Data Loads&lt;/a&gt;&lt;/div&gt;");
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>#leftNav {
  width:180px;
  height:687px;
  background-color:#E0F0F2;
  margin-bottom:15px;
  padding-left:10px;
  text-decoration:none;
  text-color: #0083cc;
  }
  
  #leftNavtext {
  font-family: Arial, Helvetica, sans-serif; font-weight:800;
  font-size:95%;
  color:#0083cc;
  width:auto;
  padding: 20px 10px 3px 0px;
  
  
  
  }
  
  #noteBody{
  font-family: Arial, Helvetica, sans-serif; font-weight:800;
  font-size:95%;
  width:960px;
  margin:auto;
  
  }
  
  // Below is the code for getting the hyperlink text to be formatted correctly (ie link colors)
  a.nav:link {color: #0083cc; text-decoration: none; }
  a.nav:visited {color: #0083cc; text-decoration: none; }
  a.nav:hover {color: orange; text-decoration: underline; }
  a.nav:active {color: #0083cc; }
  </code></pre>
  
  <p>As far as I can see, there are no differences between these two links. These are just a few of the many links I have in the left navigation and this happens randomly. I'm currently using IE 9 and this browser is my requirement. </p>
  
  <p>Any help would be greatly appreciated! Thanks!</p>