Tweet
Hey 
odd little error started cropping up when I introduced the container div "mainDisplay". whenever I click one of my links (which currently don't work due to a script adjustment that needs fixing)... the div expands to fit the entire width of the page and hides the links.
I set the background color to red so you could see what i meant (click a link)
www.enviromark.ca/Collab/tests/T1.htm
here's the code.
why would this be occuring?
odd little error started cropping up when I introduced the container div "mainDisplay". whenever I click one of my links (which currently don't work due to a script adjustment that needs fixing)... the div expands to fit the entire width of the page and hides the links.
I set the background color to red so you could see what i meant (click a link)
www.enviromark.ca/Collab/tests/T1.htm
here's the code.
why would this be occuring?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>The Concordia Collaboration Lab</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript" src="js/borderFade.js"></script>
<script type="text/javascript">
var arrPrevDiv = [null, null];
function toggle(id, linkGroup) {
if (arrPrevDiv[linkGroup] != null) {
arrPrevDiv[linkGroup].style.display = "none";
}
var s = document.getElementById(id);
s.style.display = (s.style.display=="") ? "block" : (s.style.display=="none") ? "block" : "none";
arrPrevDiv[linkGroup] = s;
// window.location.href='#'+ id;
window.status=''
}
</script>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
text-align: center;
font-family: "verdana", trebuchet ms, arial, sans-serif;
font-size: 11px;
background-color: white;
}
#pageContainer {
min-height: 100%;
}
* html #pageContainer {
height: 100%;
}
A:link, A:visited, A:active {
text-decoration: none;
color: blue;
}
.mainLinks {
position: relative;
text-decoration: none;
margin-left: 25px;
margin-right: 25px;
}
#welcome {
margin-left: auto;
margin-right: auto;
margin-top: 50px;
margin-bottom: 50px;
position: relative;
font-size: 14pt;
}
#links {
float: left;
display: inline;
height: 100px;
width: 100px;
margin-left: 75px;
margin-top: 75px;
position: relative;
text-align: left;
border-right: 1px #ccc solid;
}
#mainDisplay {
position: relative;
background-color: red;
margin-right: 100px;
}
#mainLogo {
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
height: 300px;
width: 210px;
padding: 20px;
}
#Link2, #Link3, #Link4, #Link5 {
display: none;
}
</style>
</head>
<body onload="zxcInit('mainLinks','#FFFFFF','#000000',15)">
<div id="pageContainer">
<div id="welcome">Welcome to the Concordia Collaboration Lab</div>
<div id="links">
<a class="mainLinks" href="#Link2" onclick="return toggle('Link2', 0);" onmouseover="zxcMseOver(this,1);" onmouseout="zxcMseOver(this,-1);">Link 2</a>
<br>
<a class="mainLinks" href="#Link3" onclick="return toggle('Link3', 0);" onmouseover="zxcMseOver(this,1);" onmouseout="zxcMseOver(this,-1);">Link 3</a>
<br>
<a class="mainLinks" href="#Link4" onclick="return toggle('Link4', 0);" onmouseover="zxcMseOver(this,1);" onmouseout="zxcMseOver(this,-1);">Link 4</a>
<br>
<a class="mainLinks" href="#Link5" onclick="return toggle('Link5', 0);" onmouseover="zxcMseOver(this,1);" onmouseout="zxcMseOver(this,-1);">Link 5</a>
</div>
<div id="mainDisplay">
<div id="mainLogo">
<img src="images/toddler.gif">
</div>
<div id="Link2">Link 2</div>
<div id="Link3">Link 3</div>
<div id="Link4">Link 4</div>
<div id="Link5">Link 5</div>
</div>
</div>
</body>
</html>
Comment