nicht angemeldet
externes css --> hr-linie
Hallo,
ich hab ne Frage bezüglich einer externen css-Programmierung.
Und zwar möchte ich die hr-Linie formatieren.
Das geht auch halbwegs gut im IE, Firefox zeigt es jedoch nicht so an, wie ich möchte.
Ich will eine ganz dünne Linie (1px) gestrichelt, in dunkelrot und 95 % breit.
Meine Programmierung sieht wie folgt aus:
hr {
width: 95%;
color: #cc0000;
text-align: center;
height: 1px;
border: 1px dashed;
}
IE zeigt die Linie richtig an, im Firefox ist die Linie dicker als die 1px-Linie im IE.
Ich habe glaube ich gelesen, dass der Firefox das noshade-Attribut braucht, aber wo baue ich das ein? Oder ist es einfach nicht möglich, dass der Firefox die Linie genau gleich dünn darstellt?
Wer evtl. ein Darstellungsbeispiel braucht, kann gerne hier nachschauen, was ich meine ...
Vielen Dank für evtl Hilfe und einen schönen Wochenstart
Gruß Benny
-
Nabend Benjamin,
ich hab ne Frage bezüglich einer externen css-Programmierung.
CSS ist keine Programmiersprache, ergo programmierst du nicht. Du formatierst.
Und zwar möchte ich die hr-Linie formatieren.
schon besser :-)
Ich habe glaube ich gelesen, dass der Firefox das noshade-Attribut braucht, aber wo baue ich das ein? Oder ist es einfach nicht möglich, dass der Firefox die Linie genau gleich dünn darstellt?
es ist eher so, dass der IE es falsch darstellt. noshade ist ein Attribut des hr-Elementes, und da gehört es auch hin.
in HTML reicht <hr noshade>
in korrektem XHTML am besten <hr noshade="noshade" />zur Funktion siehe SELFHTML, dort ist es ausgiebig behandelt.
Wer evtl. ein Darstellungsbeispiel braucht, kann gerne hier nachschauen, was ich meine ...
404 - Seite nicht gefunden.
alternative Lösung zum noshade: Eine CSS-Formatierung dieser Art:
hr {
/* breite, etc noch rein */
color: white;
border-bottom: 1px solid black;
}sollte auf jeden Fall funktionieren.
Grüße,
Sven
--
ich hatte mal meterlange signs, die sind alle weg -
hr {
height: 1px;
border: 1px dashed;
}IE zeigt die Linie richtig an, im Firefox ist die Linie dicker als die 1px-Linie im IE.
Der Firefox zeigt ein <hr> (standardmäßig) als ein normales Blockelement an. Du definierst hier also ein Element was ein Pixel hoch ist und zusätzlich noch rundherum einen 1-Pixel-Gestrichelten Rahmen hat, also insgesamt 3 Pixel hoch ist.
Benutz lieber solchen Code:
hr {
height:0;
border-bottom:1px dashed #cc0000;
}(Anstatt border-bottom geht natürlich genauso gut border-top.)
-
Der Richtigkeit halber muss ich anfügen, dass ein <hr> doch kein ganz normales Block-Element für den Firefox ist. Eigentlich müsste nämlich das <hr> dank der Eigenschaft -moz-box-sizing:border-box bei der height-angabe den Rahmen mit einbeziehen und somit nur 1 Pixel hoch sein. Dass es trotzdem 2 Pixel hoch ist, kann ich mir nur so erklären, dass ein Element einfach nicht kleiner sein kann, als die Summe der Breite der Rahmen.
-
-
Vielen Dank für die Antworten. Sie haben mir sehr geholfen, wobei ich doch nochmal was von Jonathan ändern musste, jetzt sieht es aber genau so aus, wie es meinen Vorstellungen entspricht.
Und zwar sieht mein externes css nun so aus
hr {
height: 0;
border-bottom: 1px dashed #cc0000;
border-top: 0px;
}Die Zeile "border-top: 0px;" habe ich noch zusätzlich eingefügt, da ohne diesen Befehl, überhalb der gestrichelten Linie noch ganz schwach eine graue durchgezogene Linie war. Diese ist nun weg.
@ Sven
Sorry, du hast natürlich Recht, css wird nicht programmiert, war eher umgangssprachlich gemeint :-)
Und auch bei dem Link hattest du Recht, hab ich gleich gemerkt, konnte aber den Eintrag nicht editieren.
Hier also, auch wenn es nun nicht mehr nötig ist, nochmal der Link, diesmal stimmt er hoffentlich :-)Wer evtl. ein Darstellungsbeispiel braucht, kann gerne hier nachschauen, was ich meine ...
Vielen Dank nochmals für die Hilfe und einen schönen Wochenstart
Gruß Benny