CODEWITHSUNDEEP
csshyperlinkhover
Richard
Richard

Reputation: 826

CSS Hyperlink Colors Not Consistent for Link, Visited, Hover, Active

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 class nav to all the links. There isn't any overwriting that I know of for these links since it's isolated.

Below is the left navigation code snippet

This works:

var context='<%=request.getContextPath()%>';
<%--    var sOrg = '<%=sOrg%>'; --%>
document.write("<div id=\"leftNav\">");
document.write("<div id=\"leftNavtext\"><a href=\"home.htm?sOrg="+'<%=sOrg%>'+"\" class=\"nav\" id=\"phome\" style=\"text-decoration:none\" >Home</a></div>");

Then this doesn't work:

  <% if(roles.contains("PEIMSDataCompleter")) {  %>
document.write("<div id=\"leftNavtext\" ><a href=\"dataSubmissions.jsp\" class=\"nav\" id=\"dataSubmissions\" style=\"text-decoration:none\">Data Submissions</a></div>");

Then this works:

document.write("<div  style=\" padding-left: 20px;padding-top:5px;\"><a href=\"scheduleMonitor.htm\" class=\"nav\" id=\"scheduleMonitor\" style=\"text-decoration:none\">Monitor Data Loads</a></div>");

Here is my CSS:

#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; }

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.

Any help would be greatly appreciated! Thanks!

Upvotes: 1

Views: 1364

Answers (3)

Richard
Richard

Reputation: 826

I ended up having to place inline code for the links:

document.write("<div id=\"leftNavtext\" ><a href=\"dataSubmissions.jsp\" class=\"nav\" id=\"dataSubmissions\" style=\"text-decoration:none; color:#0083cc;\">Data Submissions</a></div>");

Upvotes: 0

Maen
Maen

Reputation: 10698

First of all,

  • text-color property doesn't exists ; use color instead.
  • If you're using ASP (it seems to), please add the appropriate tag to your question

Next, the problem isn't due to your CSS ; see this tiny JSFiddle here : http://jsfiddle.net/j8ruV/2/

The fact is you're dynamically adding objects to your page with the document.write() method, but this method adds your divs weirdly to the DOM, and so they're not considered by the CSS (except for the inline one). By simply testing with the .innerHTML property, this seems to work (see the fiddle).

Upvotes: 2

Milche Patern
Milche Patern

Reputation: 20442

Did you formated all :pseudo stated of your anchors ?

a, a:link, a:visited {some.css}
a:hover, a:visited:hover, a:active, a:focus {some-other.css}

Perhaps you are looking at a browser specific styling.

Upvotes: 2

Related Questions