Testování zobrazování barevných rámečků u tabulek, obrázků a čar

• 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">
  
  

  aaaaa	bbbbb
  aaaaa	bbbbb

  
  2. <table border="10" style="border-color:red">
  
  

  aaaaa	bbbbb
  aaaaa	bbbbb

  
  3. <table style="border-style:solid; border-width:10px; border-color:red">
  
  

  aaaaa	bbbbb
  aaaaa	bbbbb

  
  4. <table style="border-style:solid; border-width:10px; border-color:red">
     <td style="border-style:solid; border-width:1px; border-color:red">
  
  

  aaaaa	bbbbb
  aaaaa	bbbbb

  
  5. <table style="border-style:dotted; border-width:1px; border-color:red">
     <td style="border-style:dotted; border-width:5px; border-color:red">
  
  

  aaaaa	bbbbb
  aaaaa	bbbbb

  
  
  
• 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     

  ---