Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Hyperlink Colors Not Consistent for Link, Visited, Hover, Active
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload