homepage Welcome to WebmasterWorld Guest from 54.211.73.232
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
links not working
links, firefox, not working
TomVon



 
Msg#: 4413974 posted 6:05 pm on Feb 3, 2012 (gmt 0)

I'm having a problem getting two of my links on my website to work. The site is lylelabs.com, and the two links which don't work are "Useful links" and "Our laboratory" in the middle left side of the page. Actually, the links work in IE but not in Firefox or Safari. I've tried everything and have no idea what's going on. Any help would be greatly appreciated. My name is Tom. I'll cut and paste the html and css below. Thanks.

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lyle Environmental</title>
<link rel="stylesheet" type="text/css" href="css/browserReset.css" />
<link rel="stylesheet" type="text/css" href="css/indexCSS.css" />
<link rel="stylesheet" type="text/css" href="css/slider.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="scripts/slider.js" type="text/javascript"></script>
</head>

<body style="overflow-x: hidden;">
<div id="body">
<div id="content">
<div id="header">

<div id="logo">

<img id="logo1" src="images/logo11.png" alt="my logo" height="95" width="305" />
</div>

<div id="header_info">
<div id="text_info">
Phone: (614) 488-1022<br />
Email: <a href="mailto:manager@lylelabs.com" class="header_link">manager@lylelabs.com</a>
</div>
<div id="search_social">


<a href="#"><img src="images/twitter_icon.png" alt="twitter icon" /></a>
<a href="#"><img src="images/facebook_icon.png" alt="facebook icon" /></a>
</div>
<div id="credit"><img src="images/visa-mastercard-small.gif" alt="credit cards we accept" width="63" height="21" /></div>
</div>
</div>


<div id="slider">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#"><img src="images/slide1_new.jpg" alt="Technician at scope" /></a>
<a href="#"><img src="images/slide2_new.jpg" alt="Dr. Karl looking at plates" /></a>
<a href="#"><img src="images/slide3_new.jpg" alt="flowers in a house" /></a>
<a href="#"><img src="images/slide4_new.jpg" alt="trees looking down a nice street" /></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>
</div>

<div id="navBar">
<div class="triangle-topright"></div>
<div class="triangle-topleft"></div>
<div id="navMenu">
<ul class="level1">
<li class="submenu" style="height:50px;"><a href="index.html" class="textShadow">HOME</a></li>
<li class="submenu" style="width:200px; height:50px;"><a href="air_residential.php" class="textShadow">INDOOR AIR QUALITY</a>
<ul class="level2" style="margin-bottom:34px;">
<li><a href="air_commercial.php">Commercial</a></li>
<li><a href="air_residential.php">Residential</a></li>

</ul>
</li>

<li class="submenu" style="height:50px;"><a href="mold_testing.php" class="textShadow">MOLD</a>
<ul class="level2" style="margin-bottom:34px;">
<li><a href="mold_testing.php">Testing</a></li>
<li><a href="mold_remediation.php">Remediation</a></li>

</ul>
</li>

<li class="submenu" style="height:50px;"><a href="asbestos_remediation.php" class="textShadow">ASBESTOS</a>
<ul class="level2" style="margin-bottom:34px;">
<li><a href="asbestos_testing.php">Testing</a></li>
<li><a href="asbestos_remediation.php">Remediation</a></li>

</ul>
</li>
<li class="submenu" style="height:50px;"><a href="pictures.php" class="textShadow">PICTURES</a></li>
<li class="submenu" style="height:50px;"><a href="contact.php" class="textShadow">CONTACT</a></li>
</ul>
</div>
</div>


<div id="mainBody">
<div id="left">
<h2 class="H2column1">Quality Testing and Remediation Since 1976</h2>
<p>
We have been serving Columbus and the Central Ohio area for almost 35 years and have been located at 1507 Chambers Road since 1991.
</p>

<p>
Our staff include a Ph.D. microbiologist/mycologist, a Ph.D. virologist, and a Ph.D. certified industrial hygienist (CIH, ret.). Our technicians
are fully trained and professional.
</p>

<p>
We have modern, well-equipped facilities, allowing us to give our customers exceptional service and results.
</p>


<div style="width:325px; float:left; position:relative;">
<p>
We offer a wide range of testing and remediation services. We can test for biological contaminants, organic compounds,
industrial pollutants, carcinogens, etc., and we can do so in residential or commercial settings.
</p>

<p>
We can also clean up (remediate) any contamination or pollution problem, or act as a consultant for an ongoing remediation project .
</p>

<p>
Whether you need professional testing or remediation services, Lyle Environmental is your choice.
</p>
</div>


<div style="width:200px; float:right; position:relative;">
<img src="images/building.png" alt="the building at 1507 Chambers" />
</div>
<div id="lab_pictures" style="float:right; position:relative; top:255px;">
<table>
<tr>
<td>
<img src="images/lab1.png" width="90%" alt="design piece" />
</td>
<td>
<img src="images/lab2.png" width="90%" alt="design piece" />
</td>
<td>
<img src="images/lab3.png" width="90%" alt="design piece" />
</td>
<td>
<img src="images/lab4.png" width="90%" alt="design piece" />
</td>
</tr>
</table>
</div>
</div>

<div id="right">
<h2 class="sidebar first">Other Services</h2>
<h3 style="padding-left:30px;"><a href="air_commercial.php">Industrial/OSHA-compliant air testing</a></h3>
<p style="padding-left:30px;">
Full range of chemical and industrial air pollutant testing (time weighted average; PEL and STEL)
</p>

<h3 style="padding-left:30px;"><a href="site_survey.php">Phase 1 and Phase 2 Environmental Site Investigations</a></h3>
<p style="padding-left:30px;">
Site assessments compliant with Current ASTM (American Society for Testing and Materials) guidelines.
</p>



</div>
</div>



<div id="footer">
<div id="footer_title">Lyle <br />Environmental

</div>
<div id="footer_inner" align="center">
<a href="index.html">Home</a>
<a href="air_residential.php">Indoor Air Quality</a>
<a href="mold_testing.php">Mold</a>
<a href="asbestos_testing.php">Asbestos</a>
<a href="pictures.php">Pictures</a>
<a href="contact.php">Contact</a>
</div>
</div>


</div>





<div class="learnMore1">
<a href="links.php">Useful Links</a>
</div>


<div class="learnMore2">
<a href="pictures.php">Our Laboratory</a>
</div>



<div id="bg_circle2">
<img src="images/circle1.png" alt="a design piece" />
</div>


<div id="bg_circle1">
<img src="images/circle1.png" alt="a design piece" />
</div>



<div id="bg_circle3">
<img src="images/circle1.png" alt="a design piece" />
</div>




<div id="bg_circle4">
<img src="images/circle1.png" alt="a design piece" />
</div>



<div id="circle_city">
<img src="images/CityCircle.png" alt="a design piece" />
</div>




<div class="horizontal_line"></div>
<div class="vertical_line"></div>
<div class="vertical_line2"></div>


<div class="line">
<div style="border-width: 0px 0px 53px 29px; border-bottom-color: #81A9ED;">
</div>

<div style="left: 4px; border-width: 0px 0px 53px 29px; border-bottom-color: white;"></div>


</div>

<div class="line2">
<div style="border-width: 40px 0px 0px 53px; border-top-color: #81A9ED;"></div>
<div style="left: 5px; border-width: 40px 0px 0px 53px; border-top-color: white;"></div>
</div>


<div id="bg_circle5">
<img src="images/circle1.png" alt="a design piece" />
</div>

</div>

<div id="bg">
<img src="images/ocean_bg.jpg" alt="background" />

</div>
</body>
</html>


CSS:


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

body{
background-color:#CFEEFE;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}

p{
margin:13px 0px 13px 0px;
}

h2, h3{
margin:10px 0px 10px 0px;
}

h3{
font-size:15px;
font-weight:bold;
}
#bg {
position:fixed;
top:-50%;
left:-50%;
width:250%;
height:350%;
}

#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}

#body {
position: relative;
z-index: 2;
width: 930px;
margin: 0px auto;
padding:0px;
/*-moz-box-shadow: 0 0 10px black;
-webkit-box-shadow: 0 0 10px black;
box-shadow: 0 0 10px black; */
}

#content{
margin: auto;
position:absolute;
}

/*----------------Header-------------------*/
#header{
z-index:1000;
width:930px;
height:100px;
position:relative;
}

#logo{
z-index:1000;
display:inline;
width:305px;
height:95px;
background-color:#FFF;
float:left;
padding-left:0px;
-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: -1px -1px 3px 3px #999;
}

#logo1{
z-index:1000;
display:inline;
width:305px;
height:95px;
background-color:#FFF;
float:left;
padding-left:0px;
-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: -1px -1px 3px 3px #999;
}


#lyle{
color:#7FA0B1;
position:absolute;
top:10px;
left:10px;
font-size:40px;
font-family:"Accord Heavy SF";
}

#Environmental{
color:#7FA0B1;
position:absolute;
bottom:10px;
left:10px;
font-size:35px;
font-family:"Accord Heavy SF";
}

#sun_wave_logo{

position:absolute;
top:5px;
left:110px;

}


#header_info{
width:625px;
height:95px;
float:right;
background-color:#7FA0B1;
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE);
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EEEEEE));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EEEEEE');
}

#text_info{
z-index:1001;
position:relative;
width:300px;
float:left;
font-size:17px;
margin:20px 0px 0px 20px;
line-height:20px;
color:#525252;
}

#text_info a{
color:#525252;
text-decoration:none;
}

#text_info a:visited{
color:#525252;
}

#text_info a:hover{
text-decoration:underline;
}

#search_social{
float:right;
margin:5px 20px 0px 0px;
}

#credit{
clear:right;
float:right;
margin:5px 20px 5px 0px;
}

#slider{
z-index:10;
width:900px;
height:280px;
background-color:#CCC;
margin:-25px 15px 0 15px;
}

/*-------------------Navigation Bar --------------------------------*/

.navigation{
float:left;
}

#navBar{
width:930px;
height:50px;
background-color:#7FA0B1;
background: -moz-linear-gradient(top, #7FA0B1, #638BA0);
background: -webkit-gradient(linear, left top, left bottom, from(#7FA0B1), to(#638BA0));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7FA0B1', endColorstr='#638BA0');
}

.triangle-topright {
margin-top:50px;
width: 0;
height: 0;
border-top: 15px solid #333333;
border-right: 15px solid transparent;
float:right;
z-index:1000;
}

.triangle-topleft{
margin-top:50px;
float:left;
width:0;
height: 0;
border-top: 15px solid #333333;
border-left: 15px solid transparent;
z-index:1000;
}


/*--------------------------Navigation Menu------------------------------*/

#navMenu{
width:900px;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
}

#navMenu a{
color:#FFF;
}

.textShadow{
text-shadow: 1px 1px 2px #000;
}

div#navBar ul {
background-color:#fff;
margin:0;
padding:0;
list-style:none;
}

div#navBar li {
position: relative;
float:left;
margin-left:-1px;
width: 135px;
height: 15px;
}

div#navBar li:hover {
background: #466473;
}

div#navBar li a {
line-height:50px;
display:block;
text-decoration:none;
text-align:center;
height: 15px;

}

div#navBar ul ul {
position:absolute;
width: 135px;
bottom: 16px;
display:none;
}

div#navBar ul ul li {
height:35px;
line-height:35px;
}

div#navBar ul.level1 li.submenu:hover ul.level2,
div#navBar ul.level1 li.submenu ul.level2 li:hover ul.level2
{display:block;
background:#7FA0B1;
}

div#navbar li ul.level2{

}

/*----------------------Body-------------------------*/

#mainBody{
margin:0px 15px 0px 15px;
width:900px;
height:880px;
background-color:#fff;
}

/*--------------Left Column--------------*/
h2.sidebar{
color:#ffffff;
font-size:18px;
font-weight:bold;
}



#left{
width:535px;
float:left;
margin:15px 0px 15px 15px;
background-color:#FFF;
}

/*--------------------------------------Right column ---------------------------*/
#right{
float:right;
padding:15px;
width:290px;
height:800px;
background-color:#DADADA;
margin:15px;
}

#right a{
text-decoration:none;
color:black;
}

#right a:link, a:visited {

text-decoration:none;
color:black;

}

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

h2.H2column1{
font-weight:bold;
font-size:16px;
}





/*-------------------------------footer--------------------------------*/

#footer{
width:900px;
height:100px;
margin:auto;
/*background-color:#7FA0B1;
background: -moz-linear-gradient(top,#638BA0, #7FA0B1);
background: -webkit-gradient(linear, left top, left bottom, from(#638BA0), to(#7FA0B1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#638BA0', endColorstr='#7FA0B1'); */
background-image:url(../images/footer2.jpg);
background-repeat:no-repeat;
}

#footer_title{
float:left;
font-size:28px;
font-weight:900;
margin:40px 0px 0px 35px;
color:#ffffff;
}

#footer_inner{
float:left;
padding:70px 0px 0px 265px;
color:#ffffff;
}

#footer_inner a{ color:#ffffff; }
#footer_inner a:hover{ color:#dddddd; }






/*--------------------------Circles and other Design pieces-------------------------------------------*/
#bg_circle2{
position:relative;
z-index:4002;
left:95px;
top:750px;
}

#bg_circle1{
position:relative;
z-index:4001;
left:583px;
top:800px;
}

#bg_circle3{
position:relative;
z-index:3003;
left:583px;
top:350px;
}

#bg_circle4{
position:relative;
z-index:2004;
left:583px;
top:390px;
}


#bg_circle5{
position:relative;
z-index:2005;
left:138px;
top:258px;
}

#circle_city{
position:relative;
top:660px;
left:-25px;
z-index:1000;
}

.line {
position:absolute;
left:75px;
top:815px;
z-index: 999;
}

.line div {
position:absolute;
left: 0px; top: 0px;
border-left-color: transparent;
border-style: solid;
}

.line2 {
position:absolute;
left:90px;
top:945px;
z-index: 999;
}

.line2 div {
position:absolute;
left: 0px; top: 0px;
border-left-color: transparent;
border-style: solid;
}

.horizontal_line{
width:490px;
height:4px;
background:#81A9ED;
position:relative;
top:565px;
left:100px;
}

.vertical_line{
width:4px;
height:311px;
position:relative;
top:235px;
left:590px;
z-index:2000;
background-color:#81A9ED;
}

.vertical_line2{
width:4px;
height:60px;
position:relative;
top:-157px;
left:590px;
background-color:#81A9ED;
z-index:2000;
}

.learnMore1{
font-size:15px;
font-weight:bold;
position:relative;
top:795px;
left: 127px;
z-index:1001;
width:100px;
padding:0px 0px 2px 13px;
border-bottom:2px solid #003399;
}

.learnMore1 a{
text-decoration:none;
}

.learnMore1 a:link{

text-decoration:none;
color:#003399;

}

.learnMore1 a:visited{

text-decoration:none;
color:#003399;
}



.learnMore1 a:hover {
text-decoration: none;
color: #a3211f;
}

.learnMore2{
font-size:20px;
font-weight:bold;
position:relative;
top:960px;
left: 170px;
z-index:1001;
width:160px;
padding:0px 0px 2px 17px;
border-bottom:2px solid #003399;
}

.learnMore2 a{
text-decoration:none;
}

.learnMore2 a:link{

text-decoration:none;
color:#003399;

}

.learnMore2 a:visited {

text-decoration:none;
color:#003399;

}

.learnMore2 a:hover {
text-decoration: none;
color: #a3211f;
}

/*------------------------font stuff------------------*/
.first{
margin-top:0px;
}

 

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4413974 posted 8:08 pm on Feb 3, 2012 (gmt 0)

Hello Tom - and welcome to the forums. Wow - that is a lot of code to wade through. To be honest I just didn't do it. Usually you get the best results in a free advice forum by reducing the source code to just the minimum needed to reproduce the problem. In fact, in trying to go through that process, you may even find the problem maker directly ;)

The frustrating thing here is that the parts of the code that contain those two links look good - and even more, I checked your website with the browsers you mentioned and the links ARE working for me.

Maybe I've misunderstood what you mean by "not working". In what way are those links failing for you?

I'd also add that, when you're trying to solve any cross-browser problems, the best place to start is by validating the HTML and CSS:

W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]

In your case, the mark-up checks as valid, and that makes your report even more difficult to comprehend for me.

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4413974 posted 9:20 pm on Feb 3, 2012 (gmt 0)

Most common reason for valid links not working: Something else on the page is "hiding" the links. That is, humans can see them, but a transparent background (which is the CSS default) prevents the computer from "seeing" them.

If every single bit of your quoted CSS applies to the place where the links are, that's a lot of opportunities for links to get covered up with something else.

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4413974 posted 5:51 pm on Feb 29, 2012 (gmt 0)

TomVon, working here too - but I notice you're using absolute positioning a lot. Play around with your z-indexes on those elements a bit. It may be helpful to see what's going on with the FireFox Firebug extension and inspecting the elements if you haven't already - but it does look OK here in FF. Clear your cache?

[edited by: tedster at 10:53 pm (utc) on Feb 29, 2012]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved