<hr> nicht css kompatibel?

[Christian G.]

Ich versuche gerade verzweifelt alle <hr> Eigenschaften wie size, color usw. aus dem .xhtml ins .css zu befördern - leider ohne Erfolg. Der Blick ins selfhtml läßt bei mir die befürchtung aufkommen, daß dies W3C seitig auch nicht vorgesehen ist. Kann mir jemand sagen ob ich damit richtig liege?

PS: ich vermute daß diese Frage bereits gestellt & beantwortet wurde, allerdings hat mir die Suchfunktion nicht weitergeholfen.

PS2: ich brauche tätsächlich eine <hr>, workarounds mit border-bottom usw. helfen in meinem fall leider nicht.

[Sven Rautenberg]

Moin!

Ich versuche gerade verzweifelt alle <hr> Eigenschaften wie size, color usw. aus dem .xhtml ins .css zu befördern - leider ohne Erfolg. Der Blick ins selfhtml läßt bei mir die befürchtung aufkommen, daß dies W3C seitig auch nicht vorgesehen ist. Kann mir jemand sagen ob ich damit richtig liege?

Doch, man kann CSS-Formatierungen auch auf <hr> anwenden. Allerdings ist, was die Farbgebung angeht, zwischen den Browsern uneinheitlich, ob der HR-Strich jetzt Hintergrundfarbe oder Vordergrundfarbe ist - weshalb beide Angaben notwendig sein dürften.

PS2: ich brauche tätsächlich eine <hr>, workarounds mit border-bottom usw. helfen in meinem fall leider nicht.

Was hälst du von Workaround mit <div></div>? Im Prinzip macht <hr> nichts anderes, als man damit auch machen kann.

- Sven Rautenberg

[Christian G.]

Danke für die prompte Antwort :), hilft mir schon mal weiter. Ich denke, daß ich's mit divs machen werden, schade eigentlich, wieder nichts mit wordaround-frei coden... :(

[Ingo Turski]

Hi,

Ich denke, daß ich's mit divs machen werden, schade eigentlich, wieder nichts mit wordaround-frei coden... :(

wieso? welche Eigenschaften sind es denn, die Du HR nicht zuweisen kannst?

freundliche Grüße
Ingo

[Christian G.]

Diese hier:

/*having fun with art deco tables*/

/*
<div id="hr201"></div>
*/

#hr201 {
width: 100%px;
height: 1px;
color: transparent;
border-top: 2px solid #036;
border-bottom: 1px solid #036;
}
/*
<div id="hr101"></div>
*/

#hr101 {
width: 100%px;
height: 1px;
color: transparent;
border-top: 1px solid #036;
border-bottom: 1px solid #036;
}

/*
<div id="hr100"></div>
*/

#hr10 {
width: 100%px;
height: 1px;
color: transparent;
border-top: 1px solid #036;
}

[Stefan Einspender]

Hallo Christian,

width: 100%px;

^^^ was ist das?

Was spricht gegen diese Variante:
hr {
width: 100%;
height: 1px;
color: transparent;
background: transparent;
border-top: 1px solid #036;
border-bottom: 1px solid #036;
}
?

Viele Grüße,
Stefan

[Christian G.]

Hallo Christian,

width: 100%px;
             ^^^ was ist das?

Upps, ein Syntaxfehler (schlamiges search & replace)

Was spricht gegen diese Variante:
hr {
width: 100%;
height: 1px;
color: transparent;
background: transparent;
border-top: 1px solid #036;
border-bottom: 1px solid #036;
}
?

Wird bei mir inkonsistent angezeigt (1 graues Pixel, wahlweise rechts, links, oder gar nicht - getestet mit Gecko/KHMTL/IE. Die <hr> ist außerdem immer mind. 1px zu dick (workarounds mit <hr noshade> zeigen keine Wirkung). Ich weiß zwar, das ich die <hr> im .html passend formatieren könnte, allerdings will ich bei diesem Privat-Projekt konsequent alle Layoutelemente im .css haben. Dieser Philosophie würde übrigens m.E. eine <hr noshade> widersprechen.

Viele Grüße,
Stefan