ugrás a tartalomhoz

Archívum - Okt 24, 2011 - Fórum téma

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.
 ■

float div rácsúszik a másikra

pentike · 2011. Okt. 24. (H), 11.10
Sziasztok!

Játszottam egy kicsit a css float tulajdonságával és egy fura dologra lettem figyelmes. Adott az alábbi kód:
  1. <html>  
  2. <head>  
  3. <style type="text/css">  
  4. .containingbox {  
  5.     border: 1px solid #000000;  
  6.     height: 510px;  
  7.     width: 263px;  
  8. }  
  9. .boxstyle {  
  10.     background-color: #FF6633;  
  11.     border: 1px solid #FF3300;  
  12.     height: 100px;  
  13.     width: 100px;  
  14. }  
  15. </style>  
  16. </head>  
  17. <body>  
  18. <h1>Float test</h1>  
  19. <div class="containingbox">  
  20. <div style="float: left;" class="boxstyle">1</div>  
  21. <div style="float: left;" class="boxstyle">-2</div>  
  22. <div style="" class="boxstyle">--3</div>  
  23. <div style="" class="boxstyle">---4</div>  
  24. <div style="float: left;" class="boxstyle">----5</div>  
  25. <div style="" class="boxstyle">-----6</div>  
  26. <div style="" class="boxstyle">------7</div>  
  27. <div style="" class="boxstyle">-------8</div>  
  28. </div>  
  29.   
  30.   
  31. </body>  
  32. </html>  
Megnéztem FF 7.0.1-ben és Chrome 14.0.835.202 m -ben, mindkettőben ugyanaz ar eredmény: A 3-4 és a 6-7 egymásra csúszik.

Az érdekes az, hogy pl. az 1-esre egyik float beállítás esetén sem csúszik rá semmi, pedig ha jól tudom a szabvány azt mondja, hogy ha egy elem úszik, akkor a rendes kifestési sorrendben elfoglalt helyét nem tartják fönt, olyan mintha ott se lenne.

Ha ez így helyes, akkor el tudja valaki mondani, hogy valójában milyen szabályok szerint működik a float?

Köszi!
pentike
 ■

javascript IDE

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

Keresek javascript-hez olyan fejlesztőkörnyezet, amely kielégíti az alábbi igényemet:
Ha definiálok egy file-ban egy osztályt/függvényt, és a projectben egy másik file-ban példányosítom azt, akkor annak használatát segítse a kódkiegészítés a definíció szerint.

Tehát, ha az egyik file-ban szerepel ez:
  1. var Cucli = new Function() {  
  2. this.type = "Cucli";  
  3. this.cucliMethod = function() { alert( this.type );};  
  4. }  

és a projectben egy másik file-ban pedig ez:
  1. var cucli = new Cucli();  
  2. cucli.//... itt már ajánlja fel, a type tulajdonságot és a cucliMethod metódust!  
Tud valaki segíteni, vagy a nyelv sajátosságai miatt nem is létezik ilyen környezet?
 ■