CSS -> Wo macht FF Unterschiede?

    HiHo,

    mit ist folgendes aufgefallen:

    In einer CSS-Datei steht

    hr {color: #d8d8d8;}


    <hr width="100%" size="3" noshade>

    wird aber nicht in dieser Farbe dargestellt.
    MSIE machts aber.


    Thanx ;)

    <hr style="border:solid #ff0000 1px;height:1px;">

    <hr style="border:dashed #00ff00 1px;
    background-color:#aa0000;height:15px;">

    <hr style="border:solid #00ffff 3px;
    background-color:#0000ff;height:10px;width:400px;
    text-align:left;">

    <hr style="border:solid #ff0000 1px;
    background-color:#00ffff;height:4px;margin:30px 0px;">

    Naja, erstes beispiel ist ok, bei den anderen ist background-color
    klar warum ;)

    Habe mal

    hr {
    background-color: #FF0000;
    }

    mit

    <hr width="100%" size="10" noshade>

    probiert.


    Die Farbe sieht aber mehr nach '#99000' aus *lol*

    Ist ja auch nicht weltbewegend sondern nur aufgefallen ;)

    Also, ich style <hr>s fast immer über den border/Rahmen und hatte mit kaum einem Browser bisher Probleme damit. Zum Beispiel:
    hr {height:0;border:inset #123456;border-width:1px 0;}

    Das mit der dunklen Farbe liegt anscheinend daran, dass der Firefox das size=3 irgendwie 'fehlinterpretiert' und dem Rahmen hinzufügt, der Standardmäßig in einer abgedunkelten Hintergrundfarbe dargestellt wird. Sehr merkwürdig das ganze... Aber wenn man noch im CSS height:9px definiert, sieht man sofort, was der Firefox macht.

    Meine Empfehlung wäre, das <hr> entweder komplett über css, oder komplett über HTML-Attribute zu 'Stylen'.

    Zitat von JonHa

    Das mit der dunklen Farbe liegt anscheinend daran, dass der Firefox das size=3 irgendwie 'fehlinterpretiert' und dem Rahmen hinzufügt, der Standardmäßig in einer abgedunkelten Hintergrundfarbe dargestellt wird. Sehr merkwürdig das ganze... .


    Überhaupt nicht merkwürdig. ;)
    Firefox zeichnet eine <hr> genauso wie jeder andere moderne (=standarkonforme) Browser auch, also Opera, Konqueror (und somit auch Safari), nämlich über das border-Attribut. Vom Prinzip her ist es somit nix anderes als ein umrandeter <div> ohne Höhe, aber im Gegensatz dazu mit semantischer Funktion.

    Einfacher Test:
    Eine <hr> in eine Seite setzen und im CSS mit der Definition

    Code
    hr {height:20px}

    versehen.
    Das Ergebnis sieht soweit noch in allen Browsern gleich aus.
    Nun einfach die Definition erweitern:

    Code
    hr {height:20px, border:none;}

    Dann sehen Sie, dass Sie nichts sehen - solange der Browser nicht IE heißt. ;)

    Gemäß den Standards ist "color" nun mal ganz klar die Definition für die Textfarbe (=Inline-Element), wohingegen eine <hr> als Block-Level-Element definitv nichts mit Text zu tun hat.

    Das Experiment ließe sich noch mit so einer Definition fortführen:

    Code
    hr {height:20px; border:1px dashed green}

    In jedem "normalen" Browser habe ich nun eine Rechteck mit gestrichelter grüner Linie. Und im IE? Man fragt sich unweigerlich, aus was er jetzt eigentlich seine Linie zeichnet und wo die Farbinformation herkommt, da die ja für links + oben sowie recht + unten unterschiedlich ist.
    Noch doller wird's hiermit:

    Code
    hr {height:20px; border:1px dashed green;background-color:yellow}

    Bekommen wir im IE nun wenigstens eine gelbe Linie? Natürlich nicht, denn jetzt hat die <hr> auf einmal einen gelben Hintergrund (aber der Rand ist weg???).

    Bleibt eigentlich nur zu sagen, dass das im wahrsten Sinne des Wortes jeder (CSS-)Beschreibung spottet. :(

    Zitat von JonHa

    Meine Empfehlung wäre, das <hr> entweder komplett über css, oder komplett über HTML-Attribute zu 'Stylen'.


    Hier würde ich nur dem ersten Teil zustimmen (über CSS stylen), weil sich nur dann das Ergebnis wirklich einheitlich steuern lässt.
    Allerdings sind border-style-Angaben wie inset/outset bzw. groove/rigde ungeeignet, um browserübergrgeifend ein einheitliches Ergebnis (hinsichllich Form und Farbe) zu erzielen.
    Da muss man dann vor oben genanntem Hintergrund schon spezifischer werden:
    Bsp. <hr> als grüne gestrichelte Linie:

    Code
    hr {height:0px; border-width:1px 0 0 0; border-top-color:green; border-top-style:dashed;}


    Bsp. <hr> als zweifarbige Linie (zur Veranschaulichung rot-blau):

    Code
    hr {border-width:1px 0; border-top-color:red; border-bottom-color:blue; border-style:solid none;}

    Hinweis: In diesem Falle "height:0" weglassen, da IE sonst nur die untere Linie darstellt. Warum? Weiß der Kuckuck - evtl. liegt's am verqueren Box-Model. Aber das steht auf einem anderen Blatt.
    Eh der nackte Wahnsinn, was man zu dem vergleichsweise banalen Thema <hr> schon wieder schreiben kann, nur weil der "unrechtmäßige" Marktführer selbst dabei sein unlogisches Süppchen kocht. :x