<hr /> - css-styling af vandrette linjer

Hop længere ned på siden, til:

Siden er opdateret 23. 1. 2009

Styling af <hr />

<hr /> kan - som andre elementer - styles med css. Dette kan ske med inline-css, ved at tildele generel definition for <hr /> i et stylesheet eller ved at tildele en id eller class, som så defineres i stylesheet.


Bredde og placering af <hr />

1: hr standard (fuld bredde).

<hr />

Mozilla, FireFox, Opera og IE laver denne linje ens 2px høj.
Netscape laver linjen 3px høj med hvid midte.

- - o - -

2: hr med bredde på 50%.

<hr style="width:50%" />

Mozilla, FireFox, Opera og IE laver denne linje ens centreret, 50% bred og 2px høj.
Netscape laver linjen centreret, 50% bred og 3px høj med hvid midte.

- - o - -

3: hr 50% bred, 50% højre-margen.

<hr style="width:50%;margin-right:50%" />

Mozilla, FireFox og Opera laver denne linje venstrestillet, 50% bred og 2px høj.
IE laver først en 50%bred højre margen og laver derefter en linje, der er 50% af den resterende bredde, 2px høj og centreret i venstre halvdel.
Netscape laver denne linje venstrestillet, 50% bred og 3px høj med hvid midte.

- - o - -

4: hr 50% bred; venstrejusteret.

<hr style="width:50%;text-align:left" />

Mozilla og FireFox laver denne linje centreret, 50% bred og 2px høj.
Opera og IE laver linjen venstrestillet, 50% bred og 2px høj.
Netscape laver denne linje centreret, 50% bred og 3px høj med hvid midte.

- - o - -

5: hr 50% højre-margen.

<hr style="margin-right:50%" />

Mozilla, FireFox og Opera laver denne linje 50% bred og venstrestillet.
IE laver linjen 34% bred og venstrestillet.
Netscape laver denne linje i fuld bredde og 3px høj med hvid midte.

- - o - -

6: hr i en div med 50% højre-margen.

<div style="margin-right:50%"><hr /></div>

Mozilla, FireFox, Netscape og Opera laver denne linje 50% bred og venstrestillet.
IE laver linjen 34% bred og venstrestillet.

- - - o - - -

Konklusion: Man kan ikke lave en hr, der ikke er centreret og som vises ens i alle browsere.

^ Tilbage til sidens top


Højde og border på <hr />

1: hr - ingen højde eller border defineret.

<hr />

Mozilla, FireFox, Opera og IE laver denne linje ens 2px høj.
Netscape laver linjen 3px høj med hvid midte.

- - o - -

2: hr med højde 5px

<hr style="height: 5px;" />

Mozilla, FireFox, Netscape og IE viser denne linje ens 5px inklusive border, Opera laver den 5px plus border.

- - o - -

3: hr med farvet border, for- og baggrundsfarve, højde 10px

<hr style="background-color: blue; color: lime; height: 10px; border: 2px solid red;" />

Mozilla, Firefox og Netscape laver denne linje med 2px rød border og 6px blå linje - i alt 10 px. IE laver linjen med 2px rød border og 6px grøn linje - i alt 10px. Opera laver linjen med 2px rød border og 10px blå linje - i alt 14px.

- - o - -

4: hr med border:none;, for- og baggrundsfarve sat til samme værdi (blue) og højde 10px.

<hr style="background-color: blue; color: blue; height: 10px; border: none;" />

Mozilla, Firefox, Netscape, Opera og IE laver denne linje ens - 10px blå.

- - - o - - -

Konklusion: Skal en farvet hr med højde vises ens i alle browsere, skal den defineres som det fjerde eksempel.

^ Tilbage til sidens top


Farve på <hr />

1: hr med defineret farve

<hr style="color: red;" />

IE laver en rød linje 2px høj.
Mozilla, FireFox og Opera laver en standard grå linje 2px høj.
Netscape laver en (Netscape-standard) linje 3px høj med hvid midte.

- - o - -

2: hr med defineret farve og baggrund

<hr style="color: red; background-color: red;" />

Mozilla, FireFox og IE laver en rød linje 2px høj.
Opera laver en standard grå linje 2px høj.
Netscape laver en rød linje 3px høj.

- - o - -

3: hr med defineret farve, baggrund og border

<hr style="color: red; background-color: red; border-color: red;" />

Mozilla, FireFox, Opera og IE laver en rød linje 2px høj.
Netscape laver en rød linje 3px høj.

- - o - -

4: hr med defineret baggrund og border

<hr style="background-color: red; border-color: red;" />

Mozilla, FireFox og Opera laver en rød linje 2px høj.
IE laver en standard grå linje 2px høj.
Netscape laver en rød linje 3px høj.

- - o - -

5: hr med defineret border

<hr style="border-color: red;" />

Opera laver en rød linje 2px høj.
Mozilla, FireFox og IE laver en standard grå linje.
Netscape laver en (Netscape-standard) linje 3px høj med hvid midte.

- - - o - - -

Konklusion: Skal man lave en farvet linje uden defineret højde, skal den defineres som det tredje eksempel, for at virke tilnærmelsesvis ens i alle browsere.

^ Tilbage til sidens top


Baggrundsbillede på <hr />

hr med defineret baggrundsbillede

<hr style="height:10px;background:url(hrbg.gif);border:none" />

Mozilla, FireFox, Netscape og Opera laver linjen ens 10px høj og med baggrundsbilledet vist.
IE laver lijen 10px høj og med baggrundsbilledet vist, men med en ikke-defineret border, der dækker øverste og nederste række pixels i billedet.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen januar 2005
Hjemmesideskolen
Du er her: Forsiden - html - testsider - <hr />
sidens top
Brugere lige nu: 1
Home Mail