Testování zobrazování barevných rámečků u tabulek, obrázků a čar
(zaměřeno na podporu v IE6, IE7, IE8, Firefox 3, Opera 9 a Safari 3)
-
Barva u elementu <table> - čáry v 1. tabulce by měly být barevné. V IE, Safari a Firefoxu OK
(i když u obou prohlížečů jinak, IE a Safari zobrazí všechny 4 strany stejnou barvou, Firefox dvojbarevně), Opera
barvu čar v tabulce ale v XHTML nepodporuje vůbec (není podporován atribut "bordercolor").
Barvu rámečků je tedy nutné řešit CSS vlastností border-color (viz 2. tabulka).
Ve Firefoxu je barva v první tabulce (XHTML deklarace) jen u vnějšího rámečku, v IE a Safari i uvnitř, u druhé tabulky
(CSS deklarace) jsou kromě Safari všude barevné jen vnější rámečky. V každém prohlížeči jsou také použity jiné odstíny zvolené barvy pro horní/levý a
dolní/pravý rámeček. Pokud ale nepoužijeme deklaraci DTD (DOCTYPE ..), druhá tabulka zobrazena barevně ve Firefoxu není!
Pokud použijeme i vlastnosti border-style a border-width (viz 3. tabulka),
má pak rámeček všude stejnou barvu a u všech prohlížečů dojde k vypnutí vnitřních čar v tabulce
(je nutné tedy nastavit styl i pro buňky v tabulce, viz tabulka čtvrtá, pouze tyto dvě varianty se tedy zobrazují ve všech
prohlížečích stejně).
Pokud má tabulka (či jiný objekt) čáry s šířkou 1px a typu dotted (tečkované), jsou v IE6
zobrazeny čárkovaně (v IE7 již opraveno), silnější čáry typu dotted jsou v IE tvořeny kosočtverci
(v Opeře, Safari a Firefoxu 2 čtverečky, ve Firefoxu 3 opravdu tečkami, viz tabulka pátá).
1. <table border="10" bordercolor="red">
2. <table border="10" style="border-color:red">
3. <table style="border-style:solid; border-width:10px; border-color:red">
4. <table style="border-style:solid; border-width:10px; border-color:red">
<td style="border-style:solid; border-width:1px; border-color:red">
5. <table style="border-style:dotted; border-width:1px; border-color:red">
<td style="border-style:dotted; border-width:5px; border-color:red">
-
Pokud má jakýkoliv obrázek nastavený rámeček HTML atributem border, je jeho barva v IE vždy černá, ve Firefoxu, Safari a Opeře
má ale stejnou barvu jako text na stránce. U prvního obrázku by tedy měl být rámeček modrý.
Barevné rámečky u obrázků tedy raději řešíme CSS vlastností border-color, pak barva funguje dobře všude (druhý obrázek).
<img src="jablko.png" border="1" />
<img src="jablko.png" style="border-style:solid; border-width:1px; border-color:red" />
-
Barva u elementu <hr /> - první čára by měla být barevná, v Safari není. Opera 9.x
barvu čar již podporuje v XHTML také (ve starších verzích nefungoval atribut "color", viz 1. ukázka).
Pokud je čára <hr /> silnější,
je opět kromě Safari v ostatních prohlížečích barevná celá (ve starších verzích Opery byl barevný jen její okraj a uvnitř byla
průhledná). Konce čáry jsou v IE a Opeře rovné, ve Firefoxu oblé (2. ukázka).
Pokud nepoužijeme XHTML atribut noshade="noshade", pak je čára v Opeře silnější, viz 3. ukázka.
Pokud nahradíme HTML atribut "color" CSS vlastností border-color,
je čára uvnitř průhledná a barevný je jen její rámeček (v IE ale nikoliv), s atributem noshade="noshade"
je čára v IE a Opeře pouze šedá, v Safari šedá s barevným rámečkem, ve Firofoxu celá barevná (4. ukázka).
Pokud použijeme pouze správnou kompletní CSS deklaraci i s vlastnostmi border-style a border-width
(a vypustíme HTML atribut "size"), čára zase v IE nemá požadovanou tloušťku (a i ve Firefoxu je konec čáry rovný, viz 5. ukázka).
Pokud tedy ponecháme kompletní CSS deklaraci i HTML atribut "size" s cílem mít konečně silnější čáru ve všech prohlížečích stejnou,
v IE a Firefoxu je zobrazení shodné, v Opeře a Safari se ale nastaví oba parametry, celá čára je silnější a má i vlastní silnější rámeček (viz 6. ukázka).
Shodně zobrazenou ve všech prohlížečích lze tedy mít barevnou čáru (deklarací jen v CSS) pouze s tloušťkou 1px, čára je ale zobrazena
s tloušťkou 2px (je tvořena svým horním a dolním rámečkem, viz 7. ukázka).
Závěr testu: Čára s deklarací parametrů v CSS se skutečnou zobrazenou tloušťkou
1px zobrazená být ve všech prohlížečích shodně nemůže a je nutné použít pouze HTML deklaraci i s atributem noshade="noshade", která funguje kromě Safari (není barevná) všude (viz 1. ukázka).
1. <hr size="1" color="red" width="50%" align="left" noshade="noshade" />
2. <hr size="10" color="red" width="50%" align="left" noshade="noshade" />
3. <hr size="1" color="red" width="50%" align="left" />
4. <hr size="10" style="border-color:red" width="50%" align="left" />
<hr size="10" style="border-color:red" width="50%" align="left" noshade="noshade" />
5. <hr style="border-style:solid; border-width:5px; border-color:red" width="50%" align="left" />
6. <hr size="10" style="border-style:solid; border-width:5px; border-color:red" width="50%" align="left" />
7. <hr style="border-style:solid; border-width:1px; border-color:red" width="50%" align="left" />
pepe © 2006