Problem mit h1

Christoph R.

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

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/

julilla

Versuch mal:

Code

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

bzw. margin händisch entsprechend setzen.

Christoph R.

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

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

Jetzt mitmachen!