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