[CSS] HR-element niet goed in Opera

[Spinal]

Sinds kort gebruik ik Opera, daarvoor altijd Internet Exploder.
Wat me opviel, is dat het CSS element HR niet goed wordt weergegeven in Opera.
Het gaat om dit stukje CSS:

HR {
color : #000080;
height : 2px;
}

In IE krijg je dan een blauwe streep te zien als je de <hr> code gebruikt, in Opera lijkt het meer op een soort kader.
Is hier iets aan te doen? Misschien een alternatieve CSS code die wél werkt in Opera?

[drm]

Het alternatief is eigenlijk gewoon geen hr's gebruiken, maar border-bottom en/of border-top style properties van bijvoorbeeld div- of p-elementen

De andere oplossing is dat je ook dezelfde kleur als background-color opneemt. Opera kijkt naar de background-color, ipv color.

[Spinal]

Dat eerste is het proberen waard...
Dat tweede werkt redelijk, er blijft echter een soort 'kader' om de hr heen zitten

[Johnny]

MSIE: color
Opera: border-color
Gecko: alleen onder Linux??? (zie reacties hier)

[drm]

ZanderZ:
Dat eerste is het proberen waard...
Dat tweede werkt redelijk, er blijft echter een soort 'kader' om de hr heen zitten

Oh, ja ik was vergeten te melden dat ik de border in mijn testje ook op 0 gezet had

[Justice]

code:

hr {
display:block;
height:2px;
color:#008;
background:#008;
border:0;
}

Korter kan niet
Dan werkt het op alle browsers hetzelfde. Sommige browsers stoppen standaard nog een kader om de hr heen, andere gebruiken de achtergrond kleur etc

[ Voor 44% gewijzigd door Justice op 27-02-2004 22:00 . Reden: drm was sneller + @anne ]

[Verwijderd]

"display:block;" toevoegen wil ook nog wel is helpen als je met "height" aan de slag gaat

[Justice]

Wat werkt er beter wanneer je display:block toevoegt? Dat ie altijd op een nieuwe regel begint bedoel je?
CSS1:

Applies to: block-level and replaced elements

ahhhh ok idd

[ Voor 135% gewijzigd door Justice op 27-02-2004 22:02 . Reden: editwhore ]

[drm]

Is hr van zichzelf niet al block-level apart ...

[Verwijderd]

HR is inline, net als BR. Daarom is 'background' erop zetten ook een fout. Volgens mij heeft Mozilla dat inmiddels gefixed ook.

[Spinal]

Justice schreef op 27 februari 2004 @ 21:14:

code:

hr {
display:block;
height:2px;
color:#008;
background:#008;
border:0;
}

Korter kan niet
Dan werkt het op alle browsers hetzelfde. Sommige browsers stoppen standaard nog een kader om de hr heen, andere gebruiken de achtergrond kleur etc

Geweldig doet het inderdaad prima onder IE en Opera. Ik had Mozilla ook nog geïnstalleerd, en daar doet ie het ook prima Hartstikke bedankt!

[MarkvE]

Misschien een beetje een oud topic, maar het is precies een topic waarin mijn vraag past over de <hr />. Ik heb namelijk het advies uit dit topic opgevolgd, en ik kan de <hr /> nu stylen zoals ik 'em wil, althans in Mozilla en Opera. Want in IE krijg ik zowel boven als onder de horizontale lijn een gigantische onnodige ruimte...

Hoe krijg ik deze weg gewerkt? Niks lijkt te helpen.

[coubertin119]

Heb je de margins en de paddings op 0 gezet? Van de elementen rond de <hr /> én de <hr /> zelf.

[crisp]

Dat is een IE-onhebbelijkheidheid, met margin en padding krijg je dat niet weg. Ik gebruik nog wel eens een div van een paar pixels hoog ipv een hr

[Verwijderd]

crisp schreef op 21 maart 2004 @ 11:40:
Dat is een IE-onhebbelijkheidheid, met margin en padding krijg je dat niet weg. Ik gebruik nog wel eens een div van een paar pixels hoog ipv een hr

Inderdaad. Wat ik meestal doe, is een DIV wrappen om de HR. Het levert wat overbodige code op, maar is wel zo practisch:

Cascading Stylesheet:

<div class="hr-div"><hr /></div>

div.hr-div hr { display:none; }
div.hr-div {
    /* stylen maar */
}

[Fuzzillogic]

Het is juist IE die het niet goed rendert. (Zoals zovaak.. Het is gewoon een onding.)

[MarkvE]

Verwijderd schreef op 21 maart 2004 @ 17:46:
[...]

Cascading Stylesheet:

<div class="hr-div"><hr /></div>

div.hr-div hr { display:none; }
div.hr-div {
    /* stylen maar */
}

Deze vraag moet ik toch even stellen: Maar waarom gebruik je dan nog de <hr /> tag? Als je 'em op "display: none" stelt, kun je 'em net zo goed weglaten... (of is dit bedoeld voor de semantieke waarde van de code ?)

[ Voor 26% gewijzigd door MarkvE op 21-03-2004 20:30 ]

[crisp]

MarkvE schreef op 21 maart 2004 @ 20:29:
[...]


Deze vraag moet ik toch even stellen: Maar waarom gebruik je dan nog de

---

tag? Als je 'em op "display: none" stelt, kun je 'em net zo goed weglaten... (of is dit bedoeld voor de semantieke waarde van de code ?)

Kan ik wel beantwoorden voor Blues denk ik Dat is voor als je de pagina bekijkt zonder stylesheet