[CSS] IE / Firefox und nirgends passts

[Meflin]

Aloha DP!

Ich möchte ohne Tabellen, nur unter der Zuhilfenahme von CSS eine äußerst simple Struktur darstellen:
http://www.acira.net/blog/pics/ie_ok.gif
so sieht das ganze im Internet Explorer aus, genau wie ich es haben will. Nur... wenn ich meine Maus über einen der Links bewege, sieht es so aus, und bleibt auch so:
http://www.acira.net/blog/pics/ie_hover.gif
Das ist schlecht. Noch viel schlechter ist die Ausgebe im Firefox:
http://www.acira.net/blog/pics/ff.gif

Hier der Code:

Code:

<div align="center">
<div class="menubox" style="padding: 8px">
   <div align="left" style="float: left; width: 50%" class="navbar">[img]print.gif[/img] [url="#"][b]Print[/b][/url][img]mail.gif[/img] [b][url="#"]Mail[/url][/b]</div>
   <div align="right" style="float: left; width: 50%" class="navbar">[b][url="#"]&laquo; back[/url][/b] [img]icon_story_page.gif[/img] [b]Page 3 [/b] of 14 [b][url="#"]next &raquo;[/url][/b]</div>
</div>
</div>

und die Styles die da verwendet werden:

Code:

.menubox {
   width: 700px;
   border: solid #cccccc 1px;
   position: relative;
}

.navbar {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #666666;
}
a.navbar {
    position:relative;
    z-index:24;
    color:#000;
    text-decoration:none;
}

a.navbar:hover {
   z-index:23; 
   background-color:#ffffff;
   color: #003366;
}

Kann mir da mal jemand weiterhelfen? Es kann doch nicht sein, das etwas derart simples derart ***** interpretiert wird