Versch. Breite, obwohl gleich

[Tobias]

Hallo,

ich habe folgendes Problem.

Auf einer Seite gibt es eine Navigation.
Die gesamte Navigation soll ohne Tabellen erstellt werden.

Zunächst die Überschrift, auf einem blauen Hintergrund steht in weißter Schrift, fett und mittig das Wort 'Navigation'.

#navi {
line-height: 35px;
width: 17em;
color: #ffffff;
font-weight:bolder;
text-align: center;
background-color: #003366;
}

<div id="navi">Navigation</div>

Dort sind alle vorherigen Tags geschlossen und im body oder allgemein steht keine sonstige Angabe zur Breite.

Anschließende definiere ich die sidebar, der Inhat der Navigation.

#sidebar {
/* das gesammte Menue */
float: left;
width: 17em;
margin-top: 0em;
margin-left: 0em;
background-color: #eeeeee;
border: 2px solid #003366;
font-size: 0.9em;
color: #000000;
text-align:left;
padding:2px;
}

Die #navi ist aber komischerweise nicht genauso breit wie ihr Inhalt, sondern es besteht ein deutlich sichtbarer Unterschied.

Dieser wird von den Browsern zudem noch anders interpretiert.

Firefox: (1.0.7)
http://www.chip-faqs.smv-copgym.de/upload/navi-ff.png

Konqueror (3.5)
http://www.chip-faqs.smv-copgym.de/upload/navi-ko.png

Was ist der Grund dafür ?
Ich könnt es mit einer Browserweiche lösen, doch halte ich solche Vorgehensweisen nicht für sinnvoll...

Falls der Quelltext von Nöten sein sollte:
http://www.chip-faqs.smv-copgym.de/upload/source-code.txt

Valides XHTML Strikt, und auch der CSS-Code ist geprüft.
Das Design habe ich dem CMS (PyLucid) hinzugefügt (angepasst)

Grüße
Tobias