ugrás a tartalomhoz

submit button ie shifting (fura eset)

Burnee · 2011. Okt. 24. (H), 12.03
Sziasztok!

Van az alábbi cucli:

<style type="text/css">
li {
	display: block;
	width: auto;
	border: 1px solid red;
	padding: 0;
	margin: 0;
	float: left;
	overflow: hidden;
}
input,
input:active:hover {
	display: block;
	background: url(cucli48x48.png)  no-repeat center center;
	width: auto;
	height: 60px;
	border: 1px solid transparent;
	outline: none;
	color: #fff;
	text-align: center;
	position: relative;
	overflow: visble;
	padding: 0 10px;
	margin: 2px;
	line-height: 48px;
}
input:active:hover {
	border: 1px solid red;
}
</style>

<form action="#">
<ul>
<li><input type="submit" value="Cucli" /></li>
</ul>
</form>
Namármost: ie8 alatt, ha a gomb szövegére klikkelek, elcsúsztatja a képet és a szöveget is (egyébként ezt szeretném megszüntetni), de ha bárhova máshova kattintok, akkor már jól működik és nem shiftel. ie9-ben csa ka szöveg csúszik, de ugyanúgy.

A konkrét (eredeti) probléma, hogy mosuedown-ra ie8 shifteli a háttérképet és a value-t. Ezt nem szeretném.
De:
- a gombnak <li>-ben kell lennie
- a gombnak saját, pozícionálható (pl sprite) háttérkép kell
- a gomb szélessége dinamikusan függ a value-tól
- a value pozícióját állítani kell tudni (nem pont középen kell lennie vertikálisan

A fenti kód csak egy próbálgatás eredménye, ezért nincs minden összefüggésben az eredeti problémánál leírtakkal.
 
1

button input ie

Hidvégi Gábor · 2011. Okt. 24. (H), 15.59
button input ie AAAAAAAAARGHHHH
Ez szerinted egy szakmai fórumhoz méltó cím?
2

elnézést

Burnee · 2011. Okt. 24. (H), 16.11
Ez körülbelül jelzi, mennyire megfejthetetlen probléma.
Egyébiránt igazad van, leszedem.