Autor Zpráva
Ploki
Profil *
Hoj, mam problem s vertikalnim zarovnani textboxu na stred, kdyz jeho rozmery stanovim css stylem.

#input1 {
  width: 300px;
  height: 50px;
}


Opera (9.6) a Chrome (2.0) zarovnavaji text defaultne na stred. U IE (5.5, 6, 7, 8) je potreba pridat styl line-height: 50px;
Problem je vsak, jak presvedcit Firefox, aby obsah textboxu zarovnal vertikalne na stred take.

Uz druhy den se tim trapim, hledam na internetu, ale asi zadavam spatna klicova slova nebo nikdo podobny problem neresil.
Zkousel jsem pridat vertical-align: middle, input obalit do divu nebo jinych tagu a zde nastavit zarovnani, ale na nic jsem neprisel (nebo neco vynechal), aby to fungovalo i pod Firefoxem

Chtel bych se vyhnout tomu, abych si pomoci najekeho kodu zjistil, zda se jedna o Firefox, a pak tam priradil padding-top
Ploki
Profil *
Jeste priklad cele html stranky


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test textboxu</title>
<style>
#input1 {
  width: 300px;
  height: 50px;
  line-height: 50px;
}
</style>
</head>

<body bgcolor="#CCCCCC">
<spam style="vertical-align:middle; height:50px; line-height:50px; width:300px">
<input id="input1" type="text" name="input1" alt="input1" value="nejaky text" onblur="if(this.value=='') this.value='nejaky text';" onfocus="if(this.value=='nejaky text') this.value='';" />
</span>


</body>
</html>
fuckin
Profil
me treba pomohlo toto - http://css.interval.cz/clanky/vertikalni-zarovnani-stranky-o-plovouci-sirce-na-stred/
Plaváček
Profil
Ploki

Neuspěješ a pokud mohu radit, vyhni se podobným konstrukcím. Jedinou schůdnou cestou je podstrčit pro IE line-height, tak jak to máš, a pro FF nastavit horní a dolní padding. Nebo sáhnout po JS řešení.

Ale obecně vzato - snažit se znásilňovat formulářové prvky může být cesta do pekel.
Ploki
Profil *
Me ne :-(
dany priklad zarovnava pouze cely textbox na stred vzhledem k nadrazenemu divu, a ne text textboxu na stred
nejspis nezbyde, nez pouzit padding-top a padding-bottom
Chamurappi
Profil
Reaguji na Plokiho:
<spam style
Zlý nevlastní bratr <span>u ti určitě nepůjde v Explorerech nastylovat.


Reaguji na fuckina:
Koukám, že ten článek má docela zavádějící titulek.
Ploki
Profil *
Chamurappi
to je jenom prebytek jednoho pokusu, pak jsem si to u sebe opravil
jinak ten spaN tam nemel byt vubec, zapomnel jsem ho umaznout

Plaváček
chtel jsem "znasilnit" pouze prihlasovaci formular s obrazkem na pozadi, nic jineho

napsal jsem to sem, ze me zaujalo, ze Firefox dela neco jinak (resp. konecne neco nezkopiroval z Opery) a jestli nekdo nezna reseni. Nakonec mi nezbylo nic jineho, nez presne dopocitat padding

Vaše odpověď

Mohlo by se hodit

Nezapomeňte na odkaz na živou ukázku problému.

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: