Border-Bottom im Menü bleibt bei Schriftvergrößerung stehen

Das ist einfach, denke ich. *g* Die Listenpunkte des Menüs sind gefloatet. Damit sind sie aus dem normalen Fluß der Seite rausgenommen. Irgendwo weiter unten passiert ein clear, aber das clear würde vor das schließende div des #nav-Blockes gehören. Der weiß sonst nicht, wo die gefloateten Listenpunkte zu Ende sind. Porbier es mal so:

<div id="nav">
  <ul> class="nav">
    ...
  </ul>
  <br style="clear: all;" />
</div>

Zitat von edenhuizen

Hab da ein kleines Problem, versuche meine (hoffentlich bald fertige) Website koffje.org so Barrierefrei wie möglich zu machen, jedoch bleibt bei einer manuellen Schriftvergrößerung (z.B. Firefox: Strg+) der Border-Bottom im obigen Menü stehen, obwohl die Daten in der CSS des Menüs unten gleich sind.

Hier meine style.css

kann nicht funktionieren, weil du die höhe per px fixiert hast

der Browser macht was Du ihm angeschafft hast er hält die Höhe

ul.nav {
height : 22px;
line-height : 22px;
float : left;
list-style : none;
font-size : 11px;
margin : 0;
padding : 3px 0 0;
}

außerdem ist die Schriftgröße ebenfalls auf px fixiert--
damit ist deine website nicht barrierefrei

arbeite mit reletiven Schriftgrößen und relativen Höhen und line-heights.

suche nach

.em Schriftgröße

font-size .em

dann bist du auf dem richtigen Weg

lg

Ok, weil ich an solchen Problemen gerne tüftele habe ich mir Deine Seite mal gespeichert und es ausprobiert. Mach mal folgendes:

- ersetze "clear: all;" mit dem korrekten "clear: both;"
- lösche aus #nav und ul.nav jeweils die height-Angabe

Dann funktioniert es bei mir. Die height-Angabe hat ja auch keinen wirklichen Sinn, sobald man die Schrift vergrößert, jedenfalls nicht in px.

Edit: Wow, da war Monika mal wieder schneller. Hab ich wohl zu lange beim Rumbasteln gebraucht... ;-)