...

View Full Version : Please help me with this code



puddingsticks3
05-26-2007, 06:41 AM
I have the following code, and it only works in Internet Explorer and Netscape, but I need it to work with those and firefox and opera.




<style>
body {background: #555555; font-family: arial; margin: 20;}
table.body {width: 85%; height: 100%;}
td.body {background: #fcfcfc;}
table.nav {width: 200; border-top: 1px solid black; border-right: 1px solid black; border-left: 1px solid black;}
td.navbuttonhead {background: url(assets/images/structure/fadebar.png); border-bottom: 1px solid #191919; color: white;}
td.navbuttonoff {background: #6a6a6a; border-bottom: 1px solid #191919; border-top: 1px solid #8A8A8A;}
td.navbuttonon {background: #8C8C8C; border-bottom: 1px solid #191919; border-top: 1px solid #8A8A8A;}
td.navbuttonofftop {background: #6a6a6a; border-bottom: 1px solid #191919;}
td.navbuttonontop {background: #8C8C8C; border-bottom: 1px solid #191919;}
td.bodyleft {width: 12; background: url(assets/images/structure/bodybgleft.png); border-right: 1px solid black;}
td.bodyright {width: 12; background: url(assets/images/structure/bodybgright.png); border-left: 1px solid black;}
a.navbutton {text-decoration: none; color: white;}
img {border: none;}
a.link {color: #404040; text-decoration: none;}
a.link:hover {color: #404040; text-decoration: underline;}
</style>

<table class="nav" cellspacing="0" cellpadding="2" style="margin-bottom: 4;" id="tableCollapsed1" style="display: none;">
<tr>
<td class="navbuttonhead">
<a href="#" class="navbutton" onclick="collapse(1)"><div>Test</div></a>
</td>
</tr>
</table>

<table class="nav" cellspacing="0" cellpadding="2" style="margin-bottom: 4;" id="tableExpanded1">
<tr>
<td class="navbuttonhead">
<a href="#" class="navbutton" onclick="expand(1)"><div>Test</div></a>
</td>
</tr>
<tr>
<td class="navbuttonofftop" onmouseover="className='navbuttonontop'" onmouseout="className='navbuttonofftop'">
<a href="#" class="navbutton"><div style="padding-left: 2;">Text</div></a>
</td>
</tr>
<tr>
<td class="navbuttonoff" onmouseover="className='navbuttonon'" onmouseout="className='navbuttonoff'">
<a href="#" class="navbutton"><div style="padding-left: 2;">Text</div></a>
</td>
</tr>
<tr>
<td class="navbuttonoff" onmouseover="className='navbuttonon'" onmouseout="className='navbuttonoff'">
<a href="#" class="navbutton"><div style="padding-left: 2;">Text</div></a>
</td>
</tr>
</table>

<script type="text/javascript">
function expand(id) {
document.getElementById("tableCollapsed" + id).style.display="none";
document.getElementById("tableExpanded" + id).style.display="block";
}

function collapse(id) {
document.getElementById("tableExpanded" + id).style.display="none";
document.getElementById("tableCollapsed" + id).style.display="block";
}
</script>



Any help would be nice. Thank you in advance!

_Aerospace_Eng_
05-26-2007, 06:48 AM
What does it do and what does it not do and what is it supposed to do?

puddingsticks3
05-26-2007, 06:56 AM
It's a menu. It looks like this.
http://i169.photobucket.com/albums/u217/HaZaRdOuS101Live/navex.jpg
It starts fully expanded, then when you click the darker bar at the top (or rather, the text inside it), the bottom buttons (the lighter ones) disappear, leaving just the darker bar.

It works and looks like it's supposed to in Internet Explorer and Netscape, but in firefox and opera it looks like this:
http://i169.photobucket.com/albums/u217/HaZaRdOuS101Live/navwrong.jpg
Clicking the darker bar in opera does not collapse or expand the menu like it's supposed to. Clicking it in firefox gets this:
http://i169.photobucket.com/albums/u217/HaZaRdOuS101Live/verwrong.jpg

_Aerospace_Eng_
05-26-2007, 07:38 AM
Can you post a link to the page? In the mean time maybe this will help you. http://www.dynamicdrive.com/dynamicindex1/switchmenu2.htm

puddingsticks3
05-26-2007, 08:08 AM
Thanks for that, I'll work on putting it online.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum