Please correct my javscript code

[Rightz]

Hi,

I've got a drop down menu box and it's changing all the attributes within the other tables on my page.

I know I have to add the following code:

document.getElementById('mytable')

and id="mytable"

but where?

Anything else I'm missing?

Take a look:

Head:

<style>
body{font-family:arial;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden"
}
</script>

Body:

<h3>Drop down menu</h3>
<table width="100%">
<tr bgcolor="#FF8080">
<td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
<a href="/default.asp">Tutorials</a><br />
<table class="menu" id="tutorials" width="120">
<tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr>
<tr><td class="menu"><a href="/xhtml/default.asp">XHTML</a></td></tr>
<tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr>
<tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr>
<tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr>
</table>
</td>
<td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
<a href="/default.asp">Scripting</a><br />
<table class="menu" id="scripting" width="120">
<tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>
<tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr>
<tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
<tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr>
<tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr>
</table>
</td>
<td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
<a href="/site/site_validate.asp">Validation</a><br />
<table class="menu" id="validation" width="120">
<tr><td class="menu"><a href="/site/site_validate.asp">Validate HTML</a></td></tr>
<tr><td class="menu"><a href="/site/site_validate.asp">Validate XHTML</a></td></tr>
<tr><td class="menu"><a href="/site/site_validate.asp">Validate CSS</a></td></tr>
<tr><td class="menu"><a href="/site/site_validate.asp">Validate XML</a></td></tr>
<tr><td class="menu"><a href="/site/site_validate.asp">Validate WML</a></td></tr>
</table>
</td>
</tr>
</table>

[Dijkgraaf]

What are you actually trying to achieve?

[Rightz]

To Have a drop down link menu.

[Dijkgraaf]

Well you seemed to have achieved that.
What is the problem you are having?

You may want to add change
<style>
to
<style type="text/css">
But it shouldn't cause any issues.

One thing I did notice is your
table{font-size:80%;background:black}
sets the background to black, but you don't change the colour of the font to another colour, so you get black text on a black background elsewhere.
By the looks of it, it isn't the JavaScript that is the problem, but rather your stylesheet.

[Rightz]

how can i get the stylesheet

table{font-size:80%;background:black}

to work only for this one table?

Thanks

[kaled]

<style>
.test1 { font-size:80%; background-color:black }
OR
table.test1 { font-size:80%; background-color:black }
</style>
<table class="test1">
.....
</table>

Kaled.

[Rightz]

Ok how about if I want all of the following just to be in the menu and not affect anywhere else:

<style>
body{font-family:arial;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>

Is it possible and how could I do it? I've tried the .test1 and it works - thanks for that. Now I just need to stop the style for the menu table unriding everything else?

I already have style tags with the following on the page which I don't want to change:

<style fprolloverstyle>A:hover {color: #FF0000; font-family: Comic Sans MS (cursive); font-weight: bold}
</style>

Can I combine the two?

Thanks