Stejná velikost textového pole

Pokud při tvorbě www stránek používáte formulářová pole, určitě narazíte na zajímavý problém – textové pole totiž není stejně dlouhé v Internet Exploreru a v Netscape Navigatoru. Tento tip vám poradí, jak v obou prohlížečích udělat textové pole formuláře alespoň napohled stejné.

Klasické použití textového pole formuláře na HTML stránkách je následující:

Problémem je, že oba prohlížeče interpretují parametr size každý jinak. U Netscape se navíc velikost textového pole formuláře mění podle aktuálně definovaného písma a jeho velikosti, které je vloženo před prvkem input, což je celkem logické, protože parametr size by měl znamenat počet znaků (jiné písmo – jiná délka), nicméně nechápu, jak je možné, že se v Netscape Navigatoru dá pomocí tagu FONT ovlivnit velikost a druh písma v textovém poli. Pokud před input vložíte např. tag <font face=“arial“ size=“4″>, velikost prvku input a velikost písma v něm se nastaví podle této definice. Pokud vložíte před prvek input definici fontu s velikostí písma -2 (font size=“-2″), do textovém pole se budou vkládat znaky o této velikosti (a bude to hodně malé písmo).

Problém se dá vyřešit následujícím způsobem – protože je dobře známo, že Internet Explorer podporuje styly a Netscape příliš ne, definujeme pro textové pole dvě velikosti – jedno stylem pro Internet Explorer a druhé pomocí parametru Size pro Netscape Navigator a zcela záměrně nevložíme před tag input žádnou definici písma, třeba takhle:

Příklad výše uvedeného zdrojového kódu je zde:

Netscape Navigator 4.5:
Internet Explorer 5.0:

Aby jste dosáhli žádaného efektu, tedy mít textové pole formuláře v obou prohlížečích alespoň trochu stejné, musíte jednoduše vzájemně měnit hodnotu v definici stylu a v parametru size. Pokud není na stránce definován žádný druh písma a žádná velikost (použije se tedy standardní), v Netscape Navigatoru se do textového pole píše a nastavuje se velikost podle neproporcionálního písma. Následující příklad vám dokáže, že Netscape změní velikost textového pole podle vložené definice písma a velikosti písma – zde je definováno písmo Arial o velikosti 3:

Příklad výše uvedeného zdrojového kódu je zde:

Netscape Navigator 4.5:
Internet Explorer 5.0:

Pro přibližně stejnou velikost textového pole tedy používejte styl a parametr size + definici písma, kterou vložíte před tag input, čímž by se zdálo, že problém je vyřešen – nicméně, tento článek nebere v úvahu Operu, která zachází s velikostí textového pole trochu jinak než IE & NN. Menší problémy s velikostí můžou být dále se staršími verzemi Netscape Navigatoru (například 4.05), které nastavují velikost textového pole poněkud odlišněji než novější verze…