Der Martin: Vertikale Ausrichtung

Beitrag lesen

Hallo, liebe Leute,

ich bin gerade dabei, eine Seite für einen Relaunch zu überarbeiten. Die Seite ist seit über 4 Jahren fast unverändert online und enthält noch so ziemlich alle HTML-Jugendsünden: Überflüssige Javascripte, Manipulation der Statuszeile, Frames, Tabellenlayout, FONT-Tags, das ganze Programm eben.
Meine Eltern wollen nun ihren T-Online Account kündigen (na endlich!), und deshalb muss die Seite nun auf einen anderen Server umziehen.
Also die ideale Gelegenheit für ein Redesign. Aber weil wir im Lauf der vergangenen 4 Jahre auch viel Lob für die Seite bekommen haben, möchte ich am Erscheinungsbild nicht gar so viel ändern.

Tja, und jetzt brüte ich an einem kleinen Detailproblem. In der Navigationsleiste habe ich Links bisher mit einer Tabelle angeordnet. Jetzt habe ich stattdessen die Links selbst als Block-Elemente formatiert.

Auf das Wesentliche reduziert, ungefähr so:

CSS:
a, a:link, a:active, a:visited
 { display:         block;
   left:            0px;
   right:           0px;
   height:          48px;
   padding:         0px;
   border:          1px solid #0000FF;
   border-left:     8px solid #0000FF;
   vertical-align:  middle;
   text-align:      center;
   text-decoration: none;
   background:      #E0E0FF;
   color:           #0000FF;
   font-size:       12px;
   font-weight:     bold;
 }

a:hover
 { background:      #000080;
   color:           #FFFF00;
   text-decoration: underline;
 }

HTML:
<a class="navilink" href="index.php?lang=de">Lemmer, NL</a>
<a class="navilink" href="index.php?lang=de">Aquaronde<br>Bungalowpark</a>
<a class="navilink" href="index.php?lang=de">Aquaronde95<br>im Detail</a>
<a class="navilink" href="index.php?lang=de">Saison- und<br>Preisübersicht</a>
<a class="navilink" href="index.php?lang=de">Kontakt</a>

Was mich jetzt irritiert: Obwohl ich die Links zu Block-Elementen erklärt habe, wird vertical-align offensichtlich nicht interpretiert. Der Link-Text klebt am oberen Rand der jeweiligen Box. Und da sind sich IE5.5 und FF1.0 einig.
Warum? Wahrscheinlich habe ich ein Brett vorm Kopf und übersehe nur eine Kleinigkeit. Die Höhenangabe (height: 48px) wird aber umgesetzt.

Falls die obigen Fragmente nicht ausreichen, kann man das auch unter http://do4fun.homeip.net/aquaronde/index.php im Zusammenhang ansehen (ist nur ein Testserver, nix Endgültiges).

Any idea?
Vielen Dank schon mal & herzliche Grüße

Martin