[HTML/CSS] border-image problem mit -moz

[Mrblista]

Ich habe für die beiden Bannerfelder oben auf der Seite www.kuba-entdecken.de eine Bilddatei als Rahmenfarbe definiert.

in der CSS Datei steht:

1:
2:
3:
4:
5:
border-width: 11px;
    -moz-border-image: url(images/choco-frame.png) 18 18 18 18 repeat repeat;
    -webkit-border-image: url(images/choco-frame.png) 18 18 18 18 repeat;
    -o-border-image: url(images/choco-frame.png) 18 18 18 18 repeat;
    border-image: url(images/choco-frame.png) 18 18 18 18 repeat;

Mit Chrome, sieht es so aus wie es gewünscht ist. Das im IE gar nichts erscheint, überrascht ja wenig.

Meine Fragen wären nun:

1. Warum klappt es beim FF nicht. Die img Datei wird nicht wie mit "repeat" eigentlich gewünscht wiederholt, sondern nur in den Ecken dargestellt.

2. Und gibt es eine möglichkeit für den IE einen anderen Rahmen zu definieren, das es nicht so dahingeschmissen aussieht, ohne die anderen Browser zu verplanen?

Danke schonmal für evtl. Antworten und Tipps

[LasMiranda]

/images/choco-frame.png => 404?!
Mein Fehler

[Kralle93]

1:
2:
3:
4:
5:
border-width: 18px; 
-moz-border-image: url(asd.jpg) 18 repeat; 
-webkit-border-image: url(asd.jpg) 18 repeat; 
-o-border-image: url(asd.jpg) 18 repeat; 
border-image: url(asd.jpg) 18 stretch repeat;

Versuch den Code mal.

[Mrblista]

Hat leider nichts verändert.

[Kralle93]

Der FireFox sollte eigentlich alles richtig intepretieren, aus irgendeinem Grund ignoriert er es jedoch. Im FireBug wird der Code als erkannt angezeigt.

Aus Browserfreundlichkeit würde ich jedoch allgemein derzeit auf CSS3 verzichten, und über das übliche CSS2 border alles regeln.

Einfach über das herkömmliche "border: 18px #CFCFCF solid;" (Passenden Farbcode wählen) machen.

Vorher kannst du natürlich noch probieren, den FireFox zu unterstützen. Im IE wird es jedoch definitiv nicht funktionieren.

[Mrblista]

gibt es denn die Möglichkeit, für den IE und FF eine Border Color zu definieren, für Chrome aber das border-image aber bestehen zu lassen ?

[Maniac99]

1:
2:
3:
4:
5:
    border-width: 11px;
    -moz-border-image: url(images/choco-frame.png) 18 18 18 18 repeat repeat;
    -webkit-border-image: url(images/choco-frame.png) 18 18 18 18 repeat;
    -o-border-image: url(images/choco-frame.png) 18 18 18 18 repeat;
    border-image: url(images/choco-frame.png) 18 18 18 18 repeat;

Das Präfix -moz- sorgt dafür, dass das nur der FF interpretiert. Nur überschreibst du das mit der letzten Zeile wieder. Auch die CSS hat eine Hirachie: von oben nach unten. Wenn ein Element mehrfach definiert ist, wird immer das letzte genommen. Versuch mal die Reihenfolge:

1:
2:
3:
4:
5:
    border-image: url(images/choco-frame.png) 18 18 18 18 repeat;
    border-width: 11px;
    -moz-border-image: url(images/choco-frame.png) 18 18 18 18 repeat repeat;
    -webkit-border-image: url(images/choco-frame.png) 18 18 18 18 repeat;
    -o-border-image: url(images/choco-frame.png) 18 18 18 18 repeat;

[Mrblista]

Danke für die Idee, aber leider hat auch das nichts verändert.

[tobomator]

einen div mit hintergrundfarbe setzen, darin die beiden bilder mittig mit abstand setzen. Sollte das nicht in allen funktionieren ohne CSS3 ?
CSS3 wird meist in allen Browsern in einer Minimalversion benutzt.
Der volle Funktionsumfang wird wohl erst bei den meisten mit der nächsten Versionsnummer geben.

[Mrblista]

Ja, die Lösung kenne ich auch schon. Werds aber wohl eher mit ner hex farbe als normalen Rahmen machen. Danke trotzdem für den Vorschlag