Het stylen van hr
Hoe moeilijk soms een tag kan doen
Je staat er misschien nooit bij stil of hebt het nog nooit geprobeerd/gedaan, maar je moet eens proberen een hr <hr> tag (horizontal rule) te stylen via CSS.
Je zal na enkele aanpassingen merken dat deze bijna nooit in alle browsers hetzelfde wordt weergegeven.
De oplossing
De oplossing werdt mij door Stijn Herreman via e-mail doorgestuurd en hij wou dit delen met iedereen:
Hallo,
hier is iets wat ik wou delen met iedereen, kan wel handig zijn.Ik kwam op het probleem dat mijn
<hr>niet hetzelfde werd weergegeven in Firefox zoals hij dat in IE deed, nl. de kleur ervan. (gespecifieerd in de css)
Na lang zoeken kwam ik enkele oplossingen tegen.
- naast
colorook nog eenbackground-colortoevoegen. Dit werkte niet - lege div’s gebruiken en een border voorzien. dit werd echter afgeraden, en zelf vind ik het ook niet zo net. het is als een lege javascript functie
Dus zo wel
hr {
height: 0;
border: 0;
border-top: 1px solid #bae1f7;
}
Dit werkt perfect!
Gelezen: 3079 | Color, Styling, CSS, Tips
Trackback/Pingbacks
- » Newbies en hun problemen - Gigadesign, XHTML-CSS website maken
- Newbies en hun problemen | Nono
Reacties op: Het stylen van hr
-
Mooie oplossing. Ik wist niet dat het -element (niet het > ;c)) niet in iedere bowser hetzelfde weergeven werd.
Ligt het nou aan mij, of wordt deze post gewoon niet opgenomen in de RSS-feed? Mijn feed-reader (NewsFox, een extensie voor Firefox) geeft namelijk niet aan dat er nieuwe post zijn op Gigadesign. Het laatste bericht is “932 Spams op een dag”. . .
-
Bloglines geeft ook een fout aan voor de Gigadesign feed, zal een tijdelijke erreur zijn. Want als ik op de link van de feed klik komt de laatste post wel te voorschijn.
-
Nu geeft NewsFox inderdaad wel aan dat er een nieuwe post is, deze dus. Toch gek. . .
-
Ik was al vergeten dat ik deze gemaild had, was verrast dat ik toch nog een mail kreeg van GigaDesign :p
Ik hoop dat dit nuttig kan worden voor de andere bezoekers!
-
Dank je voor het delen van deze tip, het puzzelen op een goede weergave heeft mij inderdaad ook al heel wat hoofdbrekens gegeven
Serena
-
‘t Maakt de <hr> tag wel interessanter, dat je de kleur kan bepalen. Maar het wordt nog leuker als je in plaats van een lijn een eigen afbeelding kan gebruiken.
-
Wat ik me af vraag, is waarom het bij jou niet gewoon werkt als je én
color: #000000;
én
background-color: #000000;
plaatst.Zo doe ik het zelf namelijk wel en heb er eigenlijk tot nu toe nooit problemen van ondervonden.
-
omdat de
height: 0is misschien ?
Uw manier kan zeker werken, maar werkt het op alle browsers, en ik bedoel dus wel alle browsers hé.
-
Dat heb ik nooit getest. Wat ik wel weet is dat het voor mij werkt in zowel FF als in IE, terwijl in de tekst blijkt dat dat niet goed ging. Vandaar.
-
Bedankt voor de tip:)
-
als ik de height op 0px zet, dan geeft ie6 een 1 px line. Maar met height:2px; werkt het perfect, zowel ie6 als ff!
Goede tip dit, want ik al vele malen lopen k#tten om dit goed te krijgen. en het is dus zo simpel…
-
Bedankt! Werkt perfect. Kwam er even niet uit, even googlen en ik kwam hier. Top!
