Tobias: Versch. Breite, obwohl gleich

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

  1. Hi,

    #navi {
    width: 17em;
    }

    #sidebar {
    width: 17em;
    border: 2px solid #003366;
    padding:2px;
    }

    Ich seh da 8px Unterschied.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Ich seh da 8px Unterschied.

      Die 8px habe ich gänzlich übersehen..

      Trotzdem wundere ich mich, dass die das Layout so extrem verschieben..

      Habe alle Angaben jetzt in Pixel gemacht, und natürlich die 2*4 abgezogen..

      Grüße
      Tobias

      1. Habe alle Angaben jetzt in Pixel gemacht,

        Tobias,
        Das ist bestimmt keine gute Idee. Du weist nicht, wie groß die Schrift beim Nutzer ist. Die Angabe der Breite in em war da schon besser.

        Live long and prosper,
        Gunnar

        --
        „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
        1. "Das ist bestimmt keine gute Idee. Du weist nicht, wie groß die Schrift beim Nutzer ist. Die Angabe der Breite in em war da schon besser."

          Wie kann ich dies ansonsten ausgleichen ?

          Und das Design ist auch (noch) nicht fertig, danke für die Hinweise aber bspw. UTF-8 hätte ich schon geändert ;-)

          Grüße
          Tobias

          1. Das ist bestimmt keine gute Idee. Du weist nicht, wie groß die Schrift beim Nutzer ist. Die Angabe der Breite in em war da schon besser.

            Wie kann ich dies ansonsten ausgleichen ?

            Tobias,
            Für beide Boxen identische width, border, padding:

            #navi, #sidebar {  
              width: 17em;  
              border: 2px solid;  
              padding: 2px;  
            }
            

            Die unterschiedliche Rahmenfarbe kannst du für jede einzeln angeben.

            Live long and prosper,
            Gunnar

            --
            „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
  2. Tobias,
    [FORUM-HILFE: verweise-einbinden], danke.

    <?xml version="1.0" encoding="UTF-8"?>

    Du willst IEs in den Quirks-Mode schicken?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xhtml1-strict.dtd">

    Du hast die DTD lokal auf deinem Server?

    <meta name="DC.Date" content="05.01.2006 - 20:45" />

    [DCMI-TERMS: date] sagt dazu:
    “Term Name: date
    […] Recommended best practice for encoding the date value is defined in a profile of ISO 8601 [W3CDTF] and follows the YYYY-MM-DD format.”

    Und du meinst bestimmt Date.modified? [DCMI-TERMS: modified]

    Also:
    <meta name="DC.Date.modified" content="2006-01-05T20:45+01:00" />

    Live long and prosper,
    Gunnar

    --
    „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)