Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Location
    Somerset,UK
    Posts
    138
    Thanks
    10
    Thanked 1 Time in 1 Post

    Link not showing until clicked

    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
    Code:
    <!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
    Code:
    @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
    Last edited by claire_t; 06-11-2012 at 02:58 PM.
    Hmmmm......scratchy head time......

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    woops miss-read! Get firbug!!!! you would find this very quickly
    Last edited by SeattleMicah; 06-11-2012 at 03:52 PM.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You have
    Code:
    .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.

    Edit: The links are getting displayed after a click is due to

    Code:
    a:visited {
    color: #000;
    text-decoration: none;
    }
    Last edited by abduraooft; 06-11-2012 at 03:49 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •