ugrás a tartalomhoz

submit button ie shifting (fura eset)

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

Van az alábbi cucli:
  1. <style type="text/css">  
  2. li {  
  3.     display: block;  
  4.     width: auto;  
  5.     border: 1px solid red;  
  6.     padding: 0;  
  7.     margin: 0;  
  8.     float: left;  
  9.     overflow: hidden;  
  10. }  
  11. input,  
  12. input:active:hover {  
  13.     display: block;  
  14.     background: url(cucli48x48.png)  no-repeat center center;  
  15.     width: auto;  
  16.     height: 60px;  
  17.     border: 1px solid transparent;  
  18.     outline: none;  
  19.     color: #fff;  
  20.     text-align: center;  
  21.     position: relative;  
  22.     overflow: visble;  
  23.     padding: 0 10px;  
  24.     margin: 2px;  
  25.     line-height: 48px;  
  26. }  
  27. input:active:hover {  
  28.     border: 1px solid red;  
  29. }  
  30. </style>  
  31.   
  32. <form action="#">  
  33. <ul>  
  34. <li><input type="submit" value="Cucli" /></li>  
  35. </ul>  
  36. </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), 16.59
button input ie AAAAAAAAARGHHHH
Ez szerinted egy szakmai fórumhoz méltó cím?
2

elnézést

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