Separates .css File funktioniert nicht ?

  • Hallo,

    wenn ihr mal auf http://ahnenforschung.scharnberg.de geht und bei jeder Seite unten schaut, wo "Site Map" und "Impressum" stehen, dann sind die Einträge nicht zentriert.
    Die zugehörige Format Anweisung (sie steht in in der Datei Format.CSS, die auf der gleichen Ebene wie die .htm Files liegt) lautet:

    div.memo { margin-left:170px; align:center; text-align:center; font-size:8pt; }

    Mit dem IE 6.0 steht der Eintrag zentriert. Wer macht hier was falsch ?

    Seltsamerweise ruckelt das ganze Bild auch etwas nach rechts, wenn man auf den Menu Eintrag "Alte Zeiten" geht. Nun hab ich eine etwas komplizierte Navigation (steht im Ordner /menu/ ) - aber dennoch, beim IE passiert das nicht. Das Ruckeln passiert allerdings nur beim 1. Mal, es sei denn, man geht noch mal auf "Homepage" - dann ruckelt er wieder nach links.

    Weiß jemand Rat ?
    :roll:

  • 1. "align:center" ist nicht Bestandteil von CSS.

    2. "text-align:center" kann nur Texte zentrieren. "Site Map" und "Impressum" stehen aber noch in einer Tabelle.

    3. Weder der div-tag noch die Tagelle haben ein attribut "width".

    Ich würde mal den code im CSS so verändern:

    Code
    .memo { margin-left:170px; width:100%; text-align:center; font-size:8pt; }

    und die Tabelle entfernen.

  • Zitat von Bruno Scharnberg

    Mit dem IE 6.0 steht der Eintrag zentriert. Wer macht hier was falsch ?

    IE - und du. :wink:

    IE zentriert im sog. Quirkmodus (der hier wg. fehlender DTD am Dokumentenanfang zum Tragen kommt) "widerrechtlich" auch Blockelemente (ok, eine Tabelle ist kein "echtes" Blockelement wie bspw. DIV oder P, aber eben auch kein Inlineelement wie reiner Text oder A und SPAN).
    Darauf hat Gertrud ja schon hingewiesen.

    Ich würde auch sagen, raus mit der Tabelle. Das hier tut's auch (und besser):

    Code
    <div class="memo">
    <a href="sitemap.html" class="kl">Site Map</a> &nbsp;&nbsp; <a href="impres.htm" class="kl">Impressum</a>
    </div>

    Aber lass die "width:100%" weg, sonst gibt's 'nen horizontalen Scrollbalken (170px + 100%!)! Blockelemente wie DIV dehnen sich automatisch über die gesamte zur Verfügung stehende (Rest-)Breite.

    Das Problem mit dem Bildruckeln kann ich bei mir nachvollziehen... :?:

  • Hallo Gertrud und ReinekeFux,

    zuerst einmal herzlichen Dank für Eure Hilfe. Ich werd es jetzt ohne Tabelle machen. Das mit dem Ruckeln werd ich noch mal bei den Kollegen nachfragen, die die Menu-Software gemacht haben.

    Aber ... warum steht die erste Tabelle (die mit dem Wappen drin) beim IE schön zentriert und bei Firefox nicht ? Liegt das auch an dem seltsamen Quirkmodus ? Und warum ist die h1 Überschrift beim IE unterstrichen, wie ich es ja auch haben will, und beim Firefox nicht ?

    Könnt Ihr bitte noch mal einen guten Tipp loslassen :lol: ?

  • Hallo Bruno,

    Zitat von Bruno Scharnberg

    Hallo Gertrud und ReinekeFux,

    Aber ... warum steht die erste Tabelle (die mit dem Wappen drin) beim IE schön zentriert und bei Firefox nicht ? Liegt das auch an dem seltsamen Quirkmodus ?

    Gut erkannt, genau so so isses! :lol:
    Kurz zum Hintergrund: Um ein Blockelement (mit definierter Weite) in CSS gemäß den Standards zu zentrieren, muss man dem linken und rechten margin den Wert "auto" geben.
    Wenn du also der Tabelle nun die Eigenschaft "style=margin: auto" zuweist, wird sie auch in standardkonformen Browsern zentriert. Da du die Angabe aber eh direkt in den Quellcode schreiben musst, tät's auch ein klassiches "align="center" für die Tabelle... :wink:

    Zitat

    Und warum ist die h1 Überschrift beim IE unterstrichen, wie ich es ja auch haben will, und beim Firefox nicht ?

    Zahlenwerte in CSS benötigen immer eine Einheit (px, %, em etc.), richtig muss es also heißen:

    Code
    style="border-bottom: 2px ridge #808080; padding-bottom: 5px"

    Gruß
    RF

  • Zitat

    werte in CSS benötigen immer eine Einheit (px, %, em etc.), richtig muss es also heißen:

    Code
    style="border-bottom: 2px ridge #808080; padding-bottom: 5px"

    Naja, Zahlenwerte ungleich brauchen ne Einheit 0 ;)
    Wenn schon pingelig, dann richtig ;)


    ..and some might argue that the earth is flat
    ..and some might argue that smoking is not harmful
    ..and some might argue that even Windows XP has become stable

  • *Grummel* Hast ja Recht. Doofe Grammatik ;)


    ..and some might argue that the earth is flat
    ..and some might argue that smoking is not harmful
    ..and some might argue that even Windows XP has become stable

  • Hallo Jungs - oder Mädels -

    nun regt Euch man nicht auf über Grammatik und weitere Pingeligkeiten, nur weil ich ein bischen lasches HTML bzw. CSS geschrieben habe.
    Ich hab meine Fehler inzwischen selbst erkannt und korrigiert. Es gab übrigens noch mehr Fehler und wenn man dazu dann noch mal die HTML Doku genau studiert, erkennt man erst, wie unsauber man eigentlich war.
    Ich find es immer wieder erstaunlich, dass die Browser trotzdem häufig noch was sinnvolles daraus machen.
    Auf jeden Fall bin ich schon mal begeistert über die tolle Hilfsbereitschaft in diesem Forum und werde jetzt auch alle meine Homepages (immerhin schon 6 Stück) mal auf korrektes HTML überprüfen. :P:D