Can anybody explain why I can't hide or redisplay a hidden footer or menu items when I click on the links stating to that effect?
I am not sure if it is my code or if I should be disabling some security options. I am using XP prof and testing on ie 6.0 and ff.
I know that the code has worked on other machines so I am a bit puzzled.
Thx, Claudia --------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>Styling the footer</title> <style type="text/css" media="screen">
.clearboth {
clear: both
}.spacer {
float: left;
width: 1%
}
.padder{
margin: 0; /*force content to sit in the very top left corner of the browser*/
padding: 0;/*will work for all standards compliant browsers.*/
}
body
{
/*padder*/
font: 85% arial, hevetica, sans-serif;
font-size : xx-small;
text-align: center;
background-color: gray;
}
#mainContainer
{
margin: 1em auto;/* the em is the height of the font. why is em auto used? */
width: 650px;
text-align: left;
background-color: red;
}
#header
{
height: 45px;
background-color: fuchsia;
}
#topMenu
{
height: 25px;
background-color: green;
/*margin-bottom: 5px;
width: 100%;*/
}
#menu1
{
overflow : auto;
width: 180px;
height: 100px;
background-color: yellow;
margin-left: 2%;
/*margin-bottom: 5px;
margin-left: 2%;
height: 100px;
width : 10px;*/
}
#menu2
{
/*margin-left: 1%;*/
overflow : auto;
float: left;
width: 180px;
height: 100px;
background-color: orange;
margin-bottom: 3%;
margin-left: 1%;
}
ul {
padding: 0px; /*remove this left-indentation consistently across all browsers*/
margin: 0px; /* set both padding and margins to "0" */
list-style-type: none /*remove the HTML list bullets*/
}
#headerList ul li{
display: inline; /*force the list into one line*/}
#menu1List li {
border: 1px solid red; }
#menu2List li {
border: 1px solid red;}
#contents
{
margin-top:-18%;
margin-left: 31%;
margin-right: 5%;
height: 220px;
background-color: aqua;
} #footer
{
height: 20px;
background-color: lime;
border: 1px solid black;
Visibility:visible;
} #mainContainer, #header, #topMenu,
#menu1, #menu2, #contents, #footer,
#headerList, #menu1List ul, #menu2List ul {
border: 1px solid black;
}
</style>
</head><body>
body
<div id="mainContainer">mainContainer
<div id="header">header</div>
<div id="topMenu">topMenu
<div id="headerList">
<ul>
<li><a href="#" onclick="#footer.style.visibility='visible'">Show footer</a></li>
<li><a href="#" onclick="#footer.style.visibility='hidden'">Hide footer</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
<li><a href="#">Six</a></li>
</ul>
</div>
</div>
<br class="clearboth" />
<div id="menu1">menu1
<div id="menu1List">
<ul>
<li><a href="#" onclick="#menu2List.style.visibility='visible'">Show Menu 2 Contents</a></li>
<li><a href="#" onclick="#menu2List.style.visibility='hidden'">Hide Menu 2 Contents</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
<li><a href="#">Six</a></li>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
<li><a href="#">Six</a></li>
</ul>
</div>
</div>
<br class="clearboth" />
<div id="menu2">menu2
<div id="menu2List">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
<li><a href="#">Six</a></li>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
<li><a href="#">Six</a></li>
</ul>
</div>
</div>
<div id="contents">contents</div>
<br class="clearboth" />
<div id="footer">footer</div>
</div>
</body>
</html>
******************************************************
The discussion list for http://webstandardsgroup.org/See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
