Tak tohle jsou úplně normální odkazy, jenom trochu upravené globálním stylopisem. Jak vypadá ten stylopis:
a { padding: 0.3em 1em 0.3em 1em; border: outset 0.5em; font-weight:
bold; text-decoration: none }
a:link, a:visited { background: #000080; color: #fff }
a:hover { background: #00f; color: #ff0; border: inset 0.5em }
Příklad se správně vykreslí v IE 5.5. Ve verzi 5.0 to občas (nevím proč) nefunguje. Ve verzi IE 4 (asi 20% uživatelů v roce 2001, 0,5% v roce 2003) se aplikují pouze barvy (ne okraje ani velikost). V Mozille (která a:hover podporuje) se správně počítá padding, takže se odkazy rozšiřují i přes ostatní text. Je tedy dobré držet se při zemi a zadávat menší vnitřní okraje, nebo nastavit celému odstavci margin, případně výšku řádku (line-height).
Pro IE 5.0 stačí nastavit výku odkazu a {height:1 em; ....Výše uvedená deklarace je dost nešikovná, protože udělá tlačítkové všechny odkazy (jak je asi vidět). Na deklarování tlačítkových odkazů je proto dobré vytvořit si třídu odstavce (třeba "tlacitko") a tlačítkové odkazy umísťovat do tohoto odstavce. Ve stylopisu se pak používá
třída a kontextová deklarace Jen ilustračně:
p.tlacitko a {padding....
Podobný příklad:
Obrázek v tlačítku se v Mozille a v Opeře vykreslí mimo tlačítko :-(
Úprava pro Firefox: < a style="display: block;width: 131px;" href="../index.html">
Úprava pro Firefox i Operu:
<a style=" display: block;_width:131px; max-width: 131px;" href="../index.html">
Problém je potom s tím, e se za odkazem láme řádek (má nastaveno display: block;). Pokud by se mělo dát víc obrázků vedle sebe, musel by se jim přidat float.
Příklad se vztahuje k textu zdokonalení odkazů.