[CSS] <hr /> element in verschillende browsers

[Joppiesaus2]

Hallo,

In mijn website maak ik veel gebruik van <hr />, een element wat in IE een mooie licht grijze lijn geeft.

In andere browsers (vooral opera) verandert de lijn van kleur en dikte (lijkt het) wat een heel lelijk effect geft.

Is er een manier om aan te geven dat deze lijn er in alle browsers zo uit moet zien als in IE?

Groet.

[MoietyMe]

Zoiets:

Cascading Stylesheet:

hr {
    height:0;
    border:0; /* anders werkt het niet */
    border-top:1px solid #ccc;
}

[ Voor 22% gewijzigd door MoietyMe op 26-08-2009 10:57 ]

[posttoast]

Ik zet mijn <hr>'s altijd in een <div class="ruler">. De <hr> zet ik dan op display: none; en de <div> maak ik 1px hoog met een achtergrondkleurtje. Misschien semantisch niet de meest elegante oplossing, maar het werkt perfect.

[Herko_ter_Horst]

Wat heb je al geprobeerd? Googlen op "css hr" levert behoorlijk wat resultaten op...

[MoietyMe]

posttoast schreef op woensdag 26 augustus 2009 @ 10:41:
Ik zet mijn <hr>'s altijd in een <div class="ruler">. De <hr> zet ik dan op display: none; en de <div> maak ik 1px hoog met een achtergrondkleurtje. Misschien semantisch niet de meest elegante oplossing, maar het werkt perfect.

Dan kun je beter doen wat ik hier boven typte.

[posttoast]

Werkt dat in alle browser precies hetzelfde?

Het voordeel van mijn oplossing is dat je wat vrijer bent qua stylen. Je kunt in plaats van een 1px hoge <div> ook een hogere <div> met bijvoorbeeld een achtergrondplaatje maken.

[RaZ]

Ja, je hoeft een <hr> niet persee in een div te hangen. De content zal sowieso al in een div hangen, een extra class voor een hr te stylen is dan natuurlijk onnodig.

Het enige waar dat handig voor is, is al je verschillende stylen <hr>'s wil maken. Anders is het dus niets meer dan overhead.

[MoietyMe]

posttoast schreef op woensdag 26 augustus 2009 @ 10:47:
Werkt dat in alle browser precies hetzelfde?

Het voordeel van mijn oplossing is dat je wat vrijer bent qua stylen. Je kunt in plaats van een 1px hoge <div> ook een hogere <div> met bijvoorbeeld een achtergrondplaatje maken.

Dat werkt in alle browsers. Je kunt alleen geen plaatje er aan mee geven (er van uitgaand dat je geen CSS3 gebruikt). Je kunt natuurlijk wel gewoon de border dikker maken voor een dikkere lijn

Proof of Concept.

Getest in:

FF 2+ (Mac/Win)
Safari 3+ (Mac/Win)
IE 6+
Opera 9+ (Mac/Win)
Chrome 3+

[ Voor 11% gewijzigd door MoietyMe op 26-08-2009 11:03 ]

[Joppiesaus2]

Thanks good fella, dat werkt prima. Jammer dat de kleur en vorm toch neeeettt iets anders zijn volgens mij, maar het ziet er nu wel in alle browsers goed uit.

[MoietyMe]

Joppiesaus2 schreef op woensdag 26 augustus 2009 @ 11:28:
Thanks good fella, dat werkt prima. Jammer dat de kleur en vorm toch neeeettt iets anders zijn volgens mij, maar het ziet er nu wel in alle browsers goed uit.

Geen probleem De kleur kun je natuurlijk nog zelf aanpassen. De vorm zou eventueel kunnen door iets van border:1px inset #999; , maar ik gok zo dat dat er niet overal het zelfde uit ziet.

[RaZ]

Good Fella schreef op woensdag 26 augustus 2009 @ 10:51:
[...]

Dat werkt in alle browsers. Je kunt alleen geen plaatje er aan mee geven (er van uitgaand dat je geen CSS3 gebruikt). Je kunt natuurlijk wel gewoon de border dikker maken voor een dikkere lijn

Proof of Concept.

Getest in:

FF 2+ (Mac/Win)
Safari 3+ (Mac/Win)
IE 6+
Opera 9+ (Mac/Win)
Chrome 3+

Dat kan wel.

HTML:

<style>
.divver {
  height: 10px;
  background-image: url(plaatjes);
}
.divver hr {
  display: none;
}
</style>

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

werkt perfect (typo's voorbehouden vanwege de losse pols )

[MoietyMe]

RaZ schreef op woensdag 26 augustus 2009 @ 11:43:
[...]


Dat kan wel.

HTML:

<style>
.divver {
  height: 10px;
  background-image: url(plaatjes);
}
.divver hr {
  display: none;
}
</style>

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

werkt perfect (typo's voorbehouden vanwege de losse pols )

Mja dan zie ik het nut van die hr niet echt. Oké het is semantisch beter dan een lege div, maar het slaat nog altijd als een tang op een varken.

[posttoast]

Eh, ja maar dat is dus de oplossing die ik aandroeg. Het gaat erom dat het zonder <div>'s eleganter is.

[Spinal]

Heb je gezocht op GoT? Ik heb hier namelijk jaren geleden ook last van gehad toen ik overstapte naar Opera
Dit is hoe ik het altijd oplos:

Cascading Stylesheet:

HR {
  color: #2BAFF7;
  background-color: #2BAFF7;
  height: 2px;
  display:block;
  border:0;
}

[RaZ]

Good Fella schreef op woensdag 26 augustus 2009 @ 11:53:
[...]

Mja dan zie ik het nut van die hr niet echt. Oké het is semantisch beter dan een lege div, maar het slaat nog altijd als een tang op een varken.

Mwah.. valt wel mee.

Wat ik heb begrepen is dat een <hr> juist een scheiding van content aangeeft.

Zo kan je dus 30 teasers op een site mikken, die je scheid dmv een <hr>

Dus ja, als je content wil scheiden, kan je prima een <hr> gebruiken. Als je dan een plaatje wil, met een golvende lijntje ofzo, is dit een perfect manier om dat te doen.

Zelfde als je je h1 op display none zet, en de div waar die inhangt voorziet van een plaatje. Dus dat het slaat op een tang als een varken.. Nee, gewoon de elementen gebruiken waarvoor ze zijn, en lekker stylen dat je een mooie scheiding hebt tussen content.

[Da Weef]

Good Fella schreef op woensdag 26 augustus 2009 @ 10:38:
Zoiets:

Cascading Stylesheet:

hr {
    height:0;
    border:0; /* anders werkt het niet */
    border-top:1px solid #ccc;
}

Dit is slechts een pleister op de wond, issues blijven in IE met posities / breedtes en als je een ruler wilt die meer dan een pixel hoog is en bijv meerdere kleuren.

Ik vind de beste oplossing nog steeds om alle hr elementen te vervangen met een div met bijbehorende borders.
Enige voordeel van een hr-element is dat deze als separator wordt herkend, verder levert het enkel problemen op met verschillende verborgen eigenschappen tussen browsers...

Cascading Stylesheet:

div.hr {
    margin: 0px;
    padding: 0px;
    height: 0px;
    background: #666;
    border-top: 1px solid #666;
    overflow: hidden;}

[MoietyMe]

ZanderZ schreef op woensdag 26 augustus 2009 @ 11:54:
Heb je gezocht op GoT? Ik heb hier namelijk jaren geleden ook last van gehad toen ik overstapte naar Opera
Dit is hoe ik het altijd oplos:

Cascading Stylesheet:

HR {
  color: #2BAFF7;
  background-color: #2BAFF7;
  height: 2px;
  display:block;
  border:0;
}

Behoud hij dan ook de zelfde stijl in verschillende browsers? Dat inset-effect zegmaar.

Dacht dat ik hier ook ooit mee bezig was en dat het niet werkte, maar dat is al weer zo lang geleden. Kan best zijn dat ik het fout deed

@RaZ: Een h1 kun je ook van een achtergrond plaatje voorzien hoor. Span er in en die op display none zetten is imo een betere manier om dat op te lossen, maar dat is een andere discussie.

Da Weef schreef op woensdag 26 augustus 2009 @ 11:59:
[...]


Dit is slechts een pleister op de wond, issues blijven in IE met posities / breedtes en als je een ruler wilt die meer dan een pixel hoog is en bijv meerdere kleuren.

Ik vind de beste oplossing nog steeds om alle hr elementen te vervangen met een div met bijbehorende borders.
Enige voordeel van een hr-element is dat deze als separator wordt herkend, verder levert het enkel problemen op met verschillende verborgen eigenschappen tussen browsers...

Cascading Stylesheet:

div.hr {
    margin: 0px;
    padding: 0px;
    height: 0px;
    background: #666;
    border-top: 1px solid #666;
    overflow: hidden;}

Welke issues krijg jij dan in IE, ik zie hier namelijk niks. Breedte kun je natuurlijk ook prima aangeven. Evenals de positie. En meerdere kleuren kan prima hoor:

Cascading Stylesheet:

hr { 
    height:0; 
    border:0; /* anders werkt het niet */ 
    border-top:1px solid #ccc;
    border-bottom:1px solid #999;
}

[ Voor 50% gewijzigd door MoietyMe op 26-08-2009 12:04 ]

[RaZ]

Good Fella schreef op woensdag 26 augustus 2009 @ 11:59:
[...]

Behoud hij dan ook de zelfde stijl in verschillende browsers? Dat inset-effect zegmaar.

Dacht dat ik hier ook ooit mee bezig was en dat het niet werkte, maar dat is al weer zo lang geleden. Kan best zijn dat ik het fout deed

@RaZ: Een h1 kun je ook van een achtergrond plaatje voorzien hoor. Span er in en die op display none zetten is imo een betere manier om dat op te lossen, maar dat is een andere discussie.

Het is algemeen bekend dat browsers hr's, h's en p's anders renderen.

Een div met de juist background, hoogte, kan je cross-browser prima eenvouding stylen. Het dan niet weergeven van een element die in elke browser anders gerenderd wordt, voorkomt je dus een hoop problemen. Je moet het jezelf natuurlijk niet moeilijker maken dan strikt noodzakelijk.

[...]

Welke issues krijg jij dan in IE, ik zie hier namelijk niks. Breedte kun je natuurlijk ook prima aangeven. Evenals de positie. En meerdere kleuren kan prima hoor:

Cascading Stylesheet:

hr { 
    height:0; 
    border:0; /* anders werkt het niet */ 
    border-top:1px solid #ccc;
    border-bottom:1px solid #999;
}

Maar daarmee hou je dus al geen rekening met de waardes van de padding en margin van de verschillende browsers. Het voorbeeld wat je quote, doet dat wel.

Dat het misschien om 2 pixels gaat, valt het niet zo op, maar de verschillen zijn er echt wel.

Het simpelweg niet weergeven van de hr an sich (omdat je de div styled waar die inhangt), heb je daar dus geen last van. Maar de werking van het element blijft dus wel effectief. En je kan dan dus ook plaatjes gebruiken.

[ Voor 65% gewijzigd door RaZ op 26-08-2009 12:22 ]

[Da Weef]

Welke issues krijg jij dan in IE, ik zie hier namelijk niks. Breedte kun je natuurlijk ook prima aangeven. Evenals de positie. En meerdere kleuren kan prima hoor:

Probeer eens een ruler te maken van 80% breedte, van 2px hoog waarbij de bovenste pixel lightgrijs is en de onderste donkergrijs...

Uiteindelijk rendert (met name) IE het ding anders en ontstaan er ergens problemen. Jouw oplossing werkt prima in bepaalde gevallen, maar niet alle gevallen.

[MoietyMe]

Ik heb er eerlijk gezegd weinig tot geen problemen mee. Kan me zo gauw in ieder geval geen project herinneren waarin ik tegen een probleem aan liep met een hr.

Om nog even je request te fillen:

Cascading Stylesheet:

hr {
    width:80%;
    height:0; 
    border:0;
    border-top:1px solid #ccc;
    border-bottom:1px solid #444;
}

Met een conditional comment voor LTE IE 7:

Cascading Stylesheet:

hr {
    height:2px;
}

En dan ziet hij er overal het zelfde uit (getest in alle browsers die ik hier voor ook genoemd heb).

Proof of Concept.

[ Voor 57% gewijzigd door MoietyMe op 26-08-2009 12:30 ]

[Joppiesaus2]

wat mij opvalt is dat de <hr /> lijn zelf net iets dunner is geworden. Dit zie ik terug omdat ik in mijn footer een image met een lijn liet overlopen in een hr lijn. Voorbeeld:



Voorheen sloot het met dikte e.d. direct op elkaar aan, nu is het net iets minder. Is het mogelijk dit aan te passen, pas liever niet de image aan omdat een dunne lijn in de image niet mooi uitkomt..

[ Voor 3% gewijzigd door Joppiesaus2 op 26-08-2009 12:28 ]

[MoietyMe]

Joppiesaus2 schreef op woensdag 26 augustus 2009 @ 12:27:
wat mij opvalt is dat de <hr /> lijn zelf net iets dunner is geworden. Dit zie ik terug omdat ik in mijn footer een image met een lijn liet overlopen in een hr lijn. Voorbeeld:

[afbeelding]

Voorheen sloot het met dikte e.d. direct op elkaar aan, nu is het net iets minder. Is het mogelijk dit aan te passen, pas liever niet de image aan omdat een dunne lijn in de image niet mooi uitkomt..

Zet de border width breder

[Joppiesaus2]

Good Fella schreef op woensdag 26 augustus 2009 @ 12:28:
[...]

Zet de border width breder

dat heeft gek genoeg geen effect. Al doe ik het zo:

hr {
height:0;
border:5; /* anders werkt het niet */
border-top:5px solid #ccc;
}

de lijn blijft even dik...

[MoietyMe]

Joppiesaus2 schreef op woensdag 26 augustus 2009 @ 12:31:
[...]


dat heeft gek genoeg geen effect. Al doe ik het zo:

hr {
height:0;
border:5; /* anders werkt het niet */
border-top:5px solid #ccc;
}

de lijn blijft even dik...

Dev jij heel toevallig in IE7? Want dat is de enige browser waar ik dat zo tegenkom. De oplossing daarvoor staat in de post hier boven deze post.

[ Voor 4% gewijzigd door MoietyMe op 26-08-2009 12:34 ]

[Da Weef]

Good Fella schreef op woensdag 26 augustus 2009 @ 12:18:
Ik heb er eerlijk gezegd weinig tot geen problemen mee. Kan me zo gauw in ieder geval geen project herinneren waarin ik tegen een probleem aan liep met een hr.

Om nog even je request te fillen:

Cascading Stylesheet:

hr {
    width:80%;
    height:0; 
    border:0;
    border-top:1px solid #ccc;
    border-bottom:1px solid #444;
}

Met een conditional comment voor LTE IE 7:

Cascading Stylesheet:

hr {
    height:2px;
}

En dan ziet hij er overal het zelfde uit (getest in alle browsers die ik hier voor ook genoemd heb).

Proof of Concept.

IE6 heeft er wel degelijk moeite mee... Bovendien zit je nu al met conditional comments te werken he

Verdere aandachtspunten: margins boven/onder met tekst.

[MoietyMe]

Da Weef schreef op woensdag 26 augustus 2009 @ 12:39:
[...]


IE6 heeft er wel degelijk moeite mee...

Ik zie niks, wat gaat er fout dan?

Bovendien zit je nu al met conditional comments te werken he

Die gebruik ik meestal toch wel, dus dat is voor mij in ieder geval geen issue.

Verdere aandachtspunten: margins boven/onder met tekst.

Zal der zo eens naar kijken. Ga nu eerst lunchen

[Spinal]

Good Fella schreef op woensdag 26 augustus 2009 @ 11:59:
[...]

Behoud hij dan ook de zelfde stijl in verschillende browsers? Dat inset-effect zegmaar.

Nee, helaas niet. Dan kun je inderdaad beter een border-top en -bottom geven.

[posttoast]

Joppiesaus2 schreef op woensdag 26 augustus 2009 @ 12:27:
wat mij opvalt is dat de <hr /> lijn zelf net iets dunner is geworden. Dit zie ik terug omdat ik in mijn footer een image met een lijn liet overlopen in een hr lijn. Voorbeeld:

[afbeelding]

Voorheen sloot het met dikte e.d. direct op elkaar aan, nu is het net iets minder. Is het mogelijk dit aan te passen, pas liever niet de image aan omdat een dunne lijn in de image niet mooi uitkomt..

Dit voorbeeld vind ik geen goed gebruik van een <hr>, de lijntjes onder de kopjes horen bij de kopjes zelf. border-bottom op de kopjes dus!

[MoietyMe]

@Da Weef: margin & padding lukt inderdaad niet in IE7- Dat zou mij er echter niet van weerhouden om het te gebruiken. Die 7px aan de boven- en onderkant maken in de meeste gevallen ook niet zoveel uit. Als het wel uitmaakt kun je inderdaad beter een div of span gebruiken.

[Da Weef]

Good Fella schreef op woensdag 26 augustus 2009 @ 12:41:
[...]
Ik zie niks, wat gaat er fout dan?

Hmmm, inderdaad niets aan de hand, behalve in mijn gare IE6 emulator...

Maargoed zoals je zelf al aangeeft zijn er nog wel issues met padding en margins. En ik geloof dat ook met verdere positionering issues kunnen ontstaan.

Het is aan een ieder om te bepalen wat voor hem/haar de beste oplossing is