"MouseOver" über gesamtem button statt nur überm T Einstellungen

[Gast_Ace_NoOne_*]

Hallo erstmal.

Ich hab' mir ein Nav-Menü geschrieben, das dynamisch Untermenüs aufklappt, wenn man mit der Maus über den jeweiligen Menübutton fährt (=> JavaScript - "onMouseOver"; betrifft logischerweise auch den grafischen Effekt, den ich mit CSS und ":HOVER" erzeugt habe).
Das Problem ist jetzt, dass die buttons teilweise deutlich breiter sind als der Text. Dadurch wird das jeweilige Untermenü nur aktiviert, wenn man genau über den Text fährt, was natürlich etwas störend wirkt.
Natürlich könnte ich jetzt mit Leerzeichen 'auffüllen', sodass der "Text" auf den buttons immer bis zum Rand reicht - aber das wäre erstens ungenau und zweitens unsauber...

Wäre dankbar für Hilfestellungen.

[Gast_Ace_NoOne_*]

Die Seite online stellen kann ich nicht, da der Inhalt nicht für die Öffentlichkeit bestimmt ist. Aber den Quelltext kann ich in Auszügen posten:

Also, die Menüleiste, aus der heraus man die Untermenüs aufrufen kann, besteht aus einer einzeiligen Tabelle (jaja ich weiß, tables sind dafür nicht gedacht ):

QUELLTEXT

<table class="menuBar">

<tr>

 <td class="menuButton" id="menu1"><a class="noLink" href="#" onMouseOver="button_press('menu1'); show_subMenu('subMenu1');" onMouseOut="button_release('menu1')">Menü 1</a></td>

 <td class="menuButton" id="menu2"><a class="noLink" href="#" onMouseOver="button_press('menu2'); show_subMenu('subMenu2');" onMouseOut="button_release('menu2')">Menü 2</a></td>

</tr>

</table>

Die zugehörigen CSS-Definitionen sehen folgendermaßen aus:

QUELLTEXT

table.menuBar {

position: absolute;

top: 0px;

left: 0px;

table-layout: fixed;

border: 1px solid;

border-color: #F0F0F0 #BBBBBB #BBBBBB #F0F0F0;

background-color: #DDDDDD;

z-index: 10; }



td.menuButton {

width: 75px;

height: 20px;

font-family: Arial, sans-serif;

font-size: 8pt;

text-align: center;

background-color: #CCCCCC;

border: 2px outset;

border-color: #F0F0F0 #909090 #909090 #F0F0F0; }



a.noLink:link,

a.noLink:visited,

a.noLink:hover,

a.noLink:active {

color: #000000;

text-decoration: none;

background-color: transparent; }

Und die JavaScript-Funktionen:

QUELLTEXT

function button_press(element_id) {

document.getElementById(element_id).className = "menuButton_depressed"; }



function button_release(element_id) {

document.getElementById(element_id).className = "menuButton"; }



function menuItem_activate(element_id) {

document.getElementById(element_id).className = "menuItem_active"; }



function menuItem_reset(element_id) {

document.getElementById(element_id).className = "menuItem"; }



function show_subMenu(menu_id) {

show_element(menu_id); }

Ich hoffe, das hilft... !?


PS: Bei den Untermenüs gibt's auch noch zwei kleine Probleme. Erstens interpretiert der IE offenbar den CSS "min-width"-Befehl nicht; gibt's dafür eine Entsprechung, die auch der IE kennt? Und zweitens hängen in Mozilla die (absolut positionierten) Untermenüs nicht mehr genau unter den jeweiligen buttons der Menüleist, sondern fangen zu weit links an (je weiter rechts der button, desto stärker die Abweichung) - was kann ich dagegen tun?
[/list]