Menu
Hi there,
I’ve got an CSS issue that I can’t get it right….
Here’s the CSS code:
[CODE]
.navmenus td { color: #FFFFFF;
background-color: transparent;
background-image: url(images/nohighlight.png);
text-decoration: none;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: 700;
cursor: pointer;
padding-left: 5px}
.navmenus td:hover { background-image: url(images/menuhighlight.png)}
#trial{ background-color: transparent;
layer-background-color: #FFFFFF;
border-left: 6px solid #FFFFFF;
width: 225px;
top: 0px;
left: 304px;
position: absolute;
z-index: 90;
visibility: hidden;
text-align: left}
and here’s the HTML which the above code is applied to:
[CODE]
<span class=”navmenus”>
<div id=”trial”>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100%”>
<tr><td height=”30″ onClick=”window.location.href=’test.htm'” onMouseOver=”stopTime()” onMouseOut=”startTime()”>Hello!!!</td></tr>
<tr><td height=”30″ onMouseOver=”stopTime()” onMouseOut=”startTime()”>Hello!!!</td></tr>
<tr><td height=”30″ onMouseOver=”stopTime()” onMouseOut=”startTime()”>Hello!!!</td></tr>
</table>
</div>
</span>
now just a bit of introduction on what exactly it’s happening up there… I have a drop-down menu done by JavaScript, so when you move your mouse over a button, this menu drops down magically… ok, it’s just the layer’s visibilty changes from hidden to visible and vice versa.
Now the problem does not concern my JavaScript, but it’s the CSS styles I’m talking about… each item on the layer above is supposed to be “highlighted” with a background-image, but “non-highlighted” with another background-image when no mouse is over it. In both Firefox and IE7, there is a background for “non-highlighted”, but no highlighting occurs for IE7 when a mouse moves over a table cell.
As a sidenote, this page is a frame inside a frameset; when I built another version of my site that doesn’t use frames, the highlighting works in both browsers….
Any help gladly appreciated….. Thanks a lot!!!
Chimaera