...

View Full Version : Link not showing until clicked



claire_t
06-11-2012, 02:52 PM
Ok this has been bugging the frick out of me for a day now and I can't for the life of me figure out whats happening.

I have a list of links, they all link to documents which open on a new tab. The div they are in has a class of page_link so the links are black and when you hover over they become dark blue. When I put a new link on the page and refresh it in browser (mostly Chrome) the link does not show (basically the text is white instead of black), until you hover over it. You click it and the document opens fine and then if you return to the page the link show up as it should.

I have validated the page and it validates fine so I can't see where the problem is.

When I open the page in Firefox it gets worse as the links again dont show, not even once they have been clicked!! GAHHHH!!!

I'm sure its a simple reason why and I really hope one of you lovely people can help me!

full page HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/other.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Noiz Electronics - Resources</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<link href="noiz.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header"><img src="images/logo_2.png" alt="Noiz Electronics" width="300" height="236" class="header"/></div>
<div id="wrapper">
<div id="nav">
<ul>
<li class="nav_bar"><a href="index.html">Home</a></li>
<li class="nav_bar"><a href="about.html">About Noiz</a></li>
<li class="nav_bar"><a href="projects.html">Projects</a></li>
<li class="nav_bar"><a href="electronics.html">Electronics</a></li>
<li class="nav_bar"><a href="installation.html">Installation</a></li>
<li class="nav_bar"><a href="acoustics.html">Acoustics</a></li>
<li class="nav_bar"><a href="resources.html">Resources</a></li>
<li class="nav_bar"><a href="prices.html">Pricing</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="content"><!-- InstanceBeginEditable name="top" -->
<div id="main" class="page_link">
<p><span class="intro">Information and Advice</span></p>
<p>Click on the link below to view some free information and advice documents.</p>
<ul>
<li><a href="analogue_tape_machine_alignment.pdf" onclick="window.open('analogue_tape_machine_alignment.pdf','new','');return false">Tape Alignment Guide</a></li>
<li><a href="adat_xt_psu_info.pdf" onclick="window.open('adat_xt_psu_info.pdf','new','');return false">ADAT-XT P.S.U. Info</a></li>
<li><a href="studer_head.pdf" onclick="window.open('studer_head.pdf','new','');return false">Studer Head Maintenance</a></li>
<li><a href="egg_carton_treatment.pdf" onclick="window.open('egg_carton_treatment.pdf','new','');return false">Egg Cartons...</a> (Source - Acoustics First Corporation)</li>
<li>How to modify a Quad 33 for CD input</li>
<li>PAT Testing European Directives list</li>
</ul>

</div>
<!-- InstanceEndEditable --></div>
<div id="footer">
<p>&nbsp;</p>
<p>Noiz Electronics Ltd. 24 Cynthia Road, Bath, BANES.* BA2 3QH. <br />
+44 1225 350 131 +44 7887 507 873<br/> <span class="email"><a href="mailto:info@noiz-electronics.co.uk">Email Enquiries</a> - <a href="terms.html">Terms &amp; Conditions</a></span></p>
</div>


</div>
</body>
<!-- InstanceEnd -->
</html>


full CSS


@charset "UTF-8";
/* CSS Document */

body {
margin:0;
background-image:url(images/bg.jpg);
background-repeat:repeat-x;
background-color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
background-image:url(images/bg_foot.jpg);
background-repeat:repeat-x;
background-position:bottom;
}

#header {
margin-top:0;
background-image:url(images/bg.jpg);
background-repeat:repeat-x;
height:236px;
width:100%;
margin-left:auto;
margin-right:auto;
}

img.header {
display: block;
margin-left: auto;
margin-right: auto;
}

#wrapper {
position:relative;
width:1000px;
height:auto;
margin-left:auto;
margin-right:auto;
}

#nav {
position:relative;
width:1000px;
height:40px;
background-color:#e5e5e5;
margin-left:auto;
margin-right:auto;
text-align:center;
}

#nav ul {
display:block;
width:920px;
height:40px;
margin-left:auto;
margin-right:auto;
}

#nav li {
display:block;
float:left;
list-style:none;
padding:0;
margin:0;
display:block;
height:18px;
line-height:18px;
margin-top:11px;
margin-bottom:11px;
padding-left:8px;
padding-right:8px;
}

#nav a {
text-decoration:none;
text-transform:uppercase;
font-size:15px;
color:#000;
}

#nav a:hover {
color:#FFF;
}

.nav_bar {
border-right-style:solid;
border-color:#000;
border-width:1px;
}

#content {
position:relative;
width:1000px;
height:auto;
padding:5px;
}

#top {
position:relative;
width:900px;
height:auto;
padding:5px;
float:left;
margin:10px 40px auto 40px;
text-align:center;
}

#main {
position:relative;
width:900px;
height:auto;
padding:5px;
float:left;
margin:10px 40px auto 40px;
}

.top {
font-size:14px;
}

.intro {
font-size:22px;
font-weight:bold;
text-decoration:underline;
}


#lower_left {
position:relative;
float:left;
width:298px;
height:320px;
border:thin solid #999;
margin:10px;
padding:4px;
text-align:center;

}

#lower_middle {
position:relative;
float:left;
width:298px;
height:320px;
border:thin solid #999;
margin:10px;
padding:4px;
text-align:center;
}

#lower_right {
position:relative;
float:left;
width:298px;
height:320px;
border:thin solid #999;
margin:10px;
padding:4px;
text-align:center;
}

#project_images {
position:relative;
float:left;
width:500px;
height:auto;
padding:4px;
margin:10px;
text-align:center;
}

#projects {
position:relative;
float:right;
width:298px;
height:auto;
padding:4px;
margin:10px;
text-align:center;
}

#completed {
position:relative;
float:left;
width:350px;
height:370px;
padding:5px;
float:left;
border:thin solid #999;
margin:10px;
padding:4px;
text-align:center;
}

#current {
position:relative;
float:left;
width:350px;
height:370px;
padding:5px;
float:right;
border:thin solid #999;
margin:10px;
padding:4px;
text-align:center;
}

.lower_txt {
font-size:18px;
text-decoration:underline;
}

#footer {
position:relative;
clear:both;
width:100%;
height:100px;
bottom: 0;
text-align: center;
color:#FFFFFF;
}


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

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

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

a:focus {
color: #000;
}

a:active {
color: #000;
}

.email a, a:link {
color:#FFF;
text-decoration:none;
}

.email a:hover {
color:#009;
text-decoration:none;
}

.page_link a:active {
color: #000;
}

.page_link a:focus {
color:#000;
}

.page_link a:hover {
color:#009;
}

#footer p {
color: #FFF;
font-size: 14px;
}

.imgfloatright {
float:right;
margin:10px;
border:none;
}

.imgfloatleft {
float:left;
margin:10px;
border:none;
}

.thumb {
height:auto;
width:150px;
float:left;
margin:4px;
}

.imgtext {
width:150px;
height:auto;
float:left;
clear:left;
text-align:center;
margin:4px 2px 0 2px;
}

h2 {
font-size:20px;
text-decoration:underline;
}

h3 {
font-size:18px;
}

h4 {
font-size:16px;
margin:8px;
}

h5 {
font-size:16px;
}

table {
border-collapse:collapse;
}


I know you don't really need to see all the CSS but, hey, whatever helps! This problem seems to be happening on all pages with links within the pages......won't show until clicked!!

Thanks in advance all!

C

SeattleMicah
06-11-2012, 03:42 PM
woops miss-read! Get firbug!!!! you would find this very quickly :)

abduraooft
06-11-2012, 03:47 PM
You have
.email a, a:link {
color:#FFF;
text-decoration:none;
} in your CSS. That makes the color of the anchors same as that of the background color.

I think you need .email a:link instead of the highlighted to exclude that rule from selecting those anchors.

The links are getting displayed after a click is due to


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum