• uvod
• blog
• work
• rest
• about

hr, css a prohlížeče

Element vodorovné čary (hr) se sice již moc nepoužívá, ale pokud přece jen někdo potřebuje vodorovnou čáru na oddělení obsahu nastylovat, menší přehled jak jsou aplikovány pravidla CSS se hodí.

Ukázka

Trochu netradičně nastylovaný hr. Ve výsledku by měl mít stejné rozměry jako kontrolní div 105 na 105 px. Ukázka v html.

hr{
	text-align: left;
	width: 45px;
	height: 45px;
	padding: 20px;
	margin: 0 auto 0 0;
	border: 10px solid #555;
	color: green;
	background: Grey;
}

Výsledek v testovaných prohlížečích (FireFox 2, IE 7, Opera 9, Safari 3).

Celkový přehled

Přehled prohlížečů a CSS vlastností jedné tabulce.

	Fire Fox	IE	Opera	Safari
Barva	background-color	color	background-color	background-color
Celková výška	vetší z height nebo padding + border-width	height	height + padding + border-width	height + padding + border-width
Padding	ano (!výpočet výšky)	ne	ano	ano
Margin	ano	ano (+7px top/bottom margin)	ano	ano
Zarovnání	střed (změna přes margin)	podle text-align	střed (změna přes text-align)	střed (změna přes margin)

Firefox (1.5.0.10, 2.0.0.12, 3b4)

Ve Firefoxu nejvíce překvapí výpočet celkové výšky - ta je rovna vyšší z součtu padding + border-width nebo height.
U ukázky je větší padding + border-width [(20 + 10)*2= 60px] než height [45px] - height se nepoužije, pokud je tomu naopak celková výška je rovna height (jako u IE).
Stejný princip funguje i pro celkovou šířku, nastavení obou rozměrů je nezávislé.

Barva se nastaví přes background-color - lze použít obrázek (vnitřek je tedy 'prázdný').
Margin, border, padding fungují (kromě výše zmíněného počítání výšky).

Hr je automaticky zarovnán na střed, pro zarovnání na levo/pravo lze použít margin (viz ukázka pro zarovnání na levo)

Opera (9)

Celková výška je dána součtem height + padding + border-width (stejně jako W3 box model). Šířka je počítána stejným způsobem.

Barva se řídí background-color (stejně jako u FF obrázek na pozadí funguje).
Padding, border fungují.

Margin nejde samostatně použít na zarovnání levo/pravo (odsazení funguje). Opera k zarovnání používá text-align - oproti IE je ale nutné vlastnost dát přímo hr (nezdědí ji od rodiče).
Zajímavé je pokud nejsou text-align a margin nastaveny na 'shodné' zarovnání (nalevo - left - margin: 0 auto 0 0; napravo - right - margin: 0 0 0 auto; střed - center - margin: 0 auto 0 auto; namísto 0 mohou být číselné hodnoty) je výsledkem zarovnání na střed, kromě případu text-align: left; margin: 0 0 0 auto; kdy se hr zarovná napravo.

Safari (3.0.4)

Barva i celková výška je stejná jako u Opery.
Padding, border a margin fungují. Zarovnání levo/pravo je pomocí vlastnosti margin (jako FF).

Internet Explorer (6, 7)

Celková výška se řídí jen podle height (width pro šířku) padding ani border-width se nezapočítávají.

Na rozdíl od FF, Opery, Safari se barva nastavuje přes color (tedy celý vnitřek je vyplněn). Z tohoto důvodu je použití obrázku na pozadí obtížné - pokud je nastaven obrázek na pozadí a color: none; je sice obrázek na pozadí vidět, ale vykreslí se vnitřní 1px ohraníčení.
Padding - nefunguje, nastavení border funguje.

Margin v IE provází velká nepříjemnost v podobě o 7px většího horního a spodního odsazení (margin-top: 0; odpovídá margin-top: 7px;), řešením je použití některého CSS hacku a nastavení požadované hodnoty o 7px nižší.
Horizontální odsazení zvětšením netrpí a chová se správně.

Zarovnává se pomocí text-align (přímo nastavené nebo zděděné). Zarovnání není ovlivněno margin.

Stejně vypadající hr

Na závěr příklad stylu který by měl zajistit stejně vypadající čáru v testovaných prohlížečích.
Ukázka a jak by to mělo vypadat (IE6 je díky xml deklaraci přepnuté do quirk modu, takže kontrolní divy budou mít špatnou výšku, hr bude zobrazena správně).

Aby se obešel problém výpočtu výšky u FF jsou width a height nastaveny na 0, a požadovanou výšku dostaneme z padding.

hr{
	text-align: left;	
	width: 0px;
	height: 0px;
	padding: 5px 145px;
	margin: 0 auto 0 0;
	border: 5px solid #555;
	color: silver;
	background: silver;
}

Pro nastavení velikosti v IE je použité podminečný komentář a další css nastavující width height a opravující margin-top margin-bottom

Část v html souboru pro náhrání css.

<!--[if IE]> <link href="ukazka2-ie.css" rel="stylesheet" type="text/css"> <![endif]-->

ukazka2_ie.css

hr{
	margin-top: -7px;
	margin-bottom: -7px;
	width: 300px;
	height: 20px;
}

Použití dalšího externího stylopisu je výhodné v omezní CSS hacků, na druhou stranu pokud chcete přestylovat existující hr musí se zasáhnout do html.

---