WolfShade
10-16-2006, 01:44 PM
Hello, all.
Got an issue that I'm sure you'll see immediately; but I'm semi-new to CSS.
What I'm trying to do is build a right-side menu that will expand for certain links, and change content in a layer for other links.
I've got the change content down, it works great in IE/FF/NN/Op.
What isn't working is the expand for the other links. I've initially set the first TR for "display:inline;", and the rest "display:none;", so the first one will be expanded by default.
But they are ALL showing/expanded - it's like the browsers are all ignoring the "none;" parameter. I've even tried using javascript at the end of the document to use getElementById to set display to none, that didn't work. What am I missing?
I'll supply the code:
HTML
<table width="180" border="0" align="center" cellpadding="0" cellspacing="0" hspace="0" vspace="0">
<tr>
<td class="menuHeader">Previous Institutes</td>
</tr>
<tr>
<td class="menu"><a href="javascript:void(0);" id="2006" name="2006" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">2006</a></td>
</tr>
<div id="2006sum" style="display:inline;">
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2006rep" name="2006rep" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Report</a></td>
</tr>
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2006mm" name="2006mm" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Multimedia</a></td>
</tr>
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2006pc" name="2006pc" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Partner Cities</a></td>
</tr>
</div>
<tr>
<td class="menu"><a href="javascript:void(0);" id="2005" name="2005" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">2005</a></td>
</tr>
<div id="2005sum" style="display:none;">
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2005rep" name="2005rep" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Report</a></td>
</tr>
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2005mm" name="2005mm" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Multimedia</a></td>
</tr>
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2005pc" name="2005pc" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Partner Cities</a></td>
</tr>
</div>
<tr>
<td class="menu"><a href="javascript:void(0);" id="2004" name="2004" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">2004</a></td>
</tr>
<div id="2004sum" style="display:none;">
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2004rep" name="2004rep" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Report</a></td>
</tr>
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2004mm" name="2004mm" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Multimedia</a></td>
</tr>
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2004pc" name="2004pc" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Partner Cities</a></td>
</tr>
</div>
<tr>
<td class="menu"><a href="javascript:void(0);" id="2003" name="2003" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">2003</a></td>
</tr>
<div id="2003sum" style="display:none;">
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2003rep" name="2003rep" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Report</a></td>
</tr>
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2003mm" name="2003mm" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Multimedia</a></td>
</tr>
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2003pc" name="2003pc" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Partner Cities</a></td>
</tr>
</div>
</table>
CSS
.menuHeader {
color:#000000;
background-color:#CCCCCC;
font-family:Arial;
font-size:13px;
font-weight:bold;
text-align:left;
vertical-align:top;
text-decoration:none;
border:1px solid #999999;
padding:4px;
}
.menu, .menu a, .menu a:active, .menu a:hover, .menu a:visited {
color:#FFFFFF;
background-color:#CCCCCC;
font-family:Arial;
font-size:13px;
font-weight:bold;
text-align:left;
vertical-align:top;
text-decoration:underline;
border-left:1px solid #999999;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
padding:4px;
}
Any help would be greatly appreciated.
Thanks,
^_^
Got an issue that I'm sure you'll see immediately; but I'm semi-new to CSS.
What I'm trying to do is build a right-side menu that will expand for certain links, and change content in a layer for other links.
I've got the change content down, it works great in IE/FF/NN/Op.
What isn't working is the expand for the other links. I've initially set the first TR for "display:inline;", and the rest "display:none;", so the first one will be expanded by default.
But they are ALL showing/expanded - it's like the browsers are all ignoring the "none;" parameter. I've even tried using javascript at the end of the document to use getElementById to set display to none, that didn't work. What am I missing?
I'll supply the code:
HTML
<table width="180" border="0" align="center" cellpadding="0" cellspacing="0" hspace="0" vspace="0">
<tr>
<td class="menuHeader">Previous Institutes</td>
</tr>
<tr>
<td class="menu"><a href="javascript:void(0);" id="2006" name="2006" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">2006</a></td>
</tr>
<div id="2006sum" style="display:inline;">
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2006rep" name="2006rep" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Report</a></td>
</tr>
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2006mm" name="2006mm" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Multimedia</a></td>
</tr>
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2006pc" name="2006pc" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Partner Cities</a></td>
</tr>
</div>
<tr>
<td class="menu"><a href="javascript:void(0);" id="2005" name="2005" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">2005</a></td>
</tr>
<div id="2005sum" style="display:none;">
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2005rep" name="2005rep" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Report</a></td>
</tr>
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2005mm" name="2005mm" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Multimedia</a></td>
</tr>
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2005pc" name="2005pc" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Partner Cities</a></td>
</tr>
</div>
<tr>
<td class="menu"><a href="javascript:void(0);" id="2004" name="2004" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">2004</a></td>
</tr>
<div id="2004sum" style="display:none;">
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2004rep" name="2004rep" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Report</a></td>
</tr>
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2004mm" name="2004mm" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Multimedia</a></td>
</tr>
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2004pc" name="2004pc" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Partner Cities</a></td>
</tr>
</div>
<tr>
<td class="menu"><a href="javascript:void(0);" id="2003" name="2003" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">2003</a></td>
</tr>
<div id="2003sum" style="display:none;">
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2003rep" name="2003rep" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Report</a></td>
</tr>
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2003mm" name="2003mm" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Multimedia</a></td>
</tr>
<tr>
<td class="menu" style="padding-left:10px;"><a href="javascript:void(0);" id="2003pc" name="2003pc" style="border:0px solid #999999;" onclick="changeContent(this.id);" onfocus="this.blur();">Partner Cities</a></td>
</tr>
</div>
</table>
CSS
.menuHeader {
color:#000000;
background-color:#CCCCCC;
font-family:Arial;
font-size:13px;
font-weight:bold;
text-align:left;
vertical-align:top;
text-decoration:none;
border:1px solid #999999;
padding:4px;
}
.menu, .menu a, .menu a:active, .menu a:hover, .menu a:visited {
color:#FFFFFF;
background-color:#CCCCCC;
font-family:Arial;
font-size:13px;
font-weight:bold;
text-align:left;
vertical-align:top;
text-decoration:underline;
border-left:1px solid #999999;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
padding:4px;
}
Any help would be greatly appreciated.
Thanks,
^_^