1. Dashboard
  2. Forum
    1. Unerledigte Themen
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team-Mitglieder
    4. Trophäen
    5. Mitgliedersuche
  4. Tutorial Bereich
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Seiten
  • Forum
  • Lexikon
  • Erweiterte Suche
  1. Informatik Forum
  2. Webmaster & Internet
  3. Web-/Grafikdesign

Problem mit h1

  • Christoph R.
  • 5. Juli 2008 um 19:03
  • Unerledigt
  • Christoph R.
    16
    Christoph R.
    Mitglied
    Reaktionen
    36
    Punkte
    2.626
    Beiträge
    428
    • 5. Juli 2008 um 19:03
    • #1

    Hallo!

    Ich habe auf einer Seite eine h1-Überschrift gefolgt von normalem Text. Der Abstand zwischen der Überschrift und dem Text ist leider im Firefox und Safari anders als im IE.

    Ich habe das Problem auf folgenden Code reduziert:

    HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <style>
    #page
    {
        background-color: red;
    
    
    }
    
    
    #header h1
    {
        color: White;
        font-size: 100px;
    }
        </style>
    </head>
        <body>
            <div align="center" id="page">
                <div id="header">
    
    
                    <h1>Title</h1>
    
    
            Text
    
    
                </div>
            </div>
        </body>
    </html>
    Alles anzeigen

    Ergebnis, siehe Anhang. Anscheinend verwendet der IE für den Abstand bereits die (niedrigere) Font Size des normalen Textes, während der Firefox noch die (höhere) der Überschrift verwendet.

    Ich nehme an, dass inzwischen selbst der IE den XHTML-Standard einigermaßen unterstützt und ich irgendwo einen Fehler gemacht habe.

    Kann mir ein HTML-Kundiger helfen?

  • bjelli
    3
    bjelli
    Mitglied
    Punkte
    80
    Beiträge
    15
    • 5. Juli 2008 um 22:52
    • #2

    mit firefox 3 und ie7 auf winxp kann ich das problem nicht nachvollziehen: sieht bei beiden aus wie am msie screenshot.

    Aber statt sich mit den quirks und default-formaten der verschiedenen
    browser zu ärgen würde ich ein reset-stylsheet empfehlen. das setzt
    mal einfach alles auf 0; danach kann man die abstände und größen
    bewusst so setzen wie man will.

    z.b. von eric meyer
    http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
    oder aus der yahoo interface library
    http://developer.yahoo.com/yui/reset/

    Brigitte Jellinek - http://multimediatechnology.at/web-communities/
    Ich unterrichte in einem Medieninformatik-Studium (BSc, MSc) mit Schwerpunkt Web Development
    Meine Themen: Ruby on Rails, Javascript, SCRUM, git, Test Driven Development,...

  • julilla
    6
    julilla
    Mitglied
    Reaktionen
    1
    Punkte
    276
    Beiträge
    51
    • 6. Juli 2008 um 00:01
    • #3

    Versuch mal:

    Code
    #header h1
    {
        color: White;
        font-size: 100px;
        [B]margin: 0px;[/B]
    }

    bzw. margin händisch entsprechend setzen.

  • Christoph R.
    16
    Christoph R.
    Mitglied
    Reaktionen
    36
    Punkte
    2.626
    Beiträge
    428
    • 6. Juli 2008 um 10:29
    • #4
    Zitat von bjelli

    mit firefox 3 und ie7 auf winxp kann ich das problem nicht nachvollziehen: sieht bei beiden aus wie am msie screenshot.

    Komisch, bei mir eben nicht :confused:

    Zitat von julilla

    bzw. margin händisch entsprechend setzen.

    Danke, damit hats funktioniert.

  • Pleex
    4
    Pleex
    Mitglied
    Punkte
    105
    Beiträge
    13
    • 22. Juli 2008 um 14:18
    • #5

    Du solltest bei gewissen Elementen wie Überschriften immer die Attribute, margin, padding und line-height angeben, weil diese in verschiedenen Browsern anders vordefiniert sind :)

    --Pleex

    Ps: HIER WAR EIN LINK :)

    Einmal editiert, zuletzt von enemy2k (22. Juli 2008 um 17:45) aus folgendem Grund: Link wurde entfernt. Führt zu einem online access. Spam?

  • Maximilian Rupp 27. Dezember 2024 um 00:12

    Hat das Thema aus dem Forum Grafik/Video nach Web-/Grafikdesign verschoben.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden

Benutzer online in diesem Thema

  • 1 Besucher

Rechtliches

Impressum

Datenschutzerklärung