ugrás a tartalomhoz

Internet Explorer 7 button hiba

LeGaS · 2009. Dec. 2. (Sze), 18.51
Üdv!

Sürgős megoldásra lenne szükségem, remélem tudtok segíteni. Pénteki határidővel kell elkészítenem egy oldalt, 98%-ban már kész is van, de most találkoztam először az IE 7 button bugjával.

Próbáltam ezt a javítást, de nem változott semmi. Minden más böngészőben jó, csak a 7-es IE nem szereti.

Egy kép a hibáról:


Ha fix vagy 100%-os szélességet adok meg, akkor persze jól jelenik meg, de az a gond, hogy egyrészt többnyelvű az oldal (tehát nyelvtől függően lehet hosszabb vagy rövidebb a gomb), másrészt minden gomb jobbra van igazítva (100%-nál pedig bal oldalra kerül ugye).

Ha kell HTML ill. CSS kód, akkor írok azt is, de remélem lesz így is ötlet.

Előre is köszi a segítséget!
‹ képnézegető-multibox alkalmazása Hogyan design-oljam a submit,reset,és a button inputokat? ›
 ■
1

Problém?

Poetro · 2009. Dec. 2. (Sze), 19.07
És mi a pontos probléma? Hogyan néz ki a jó, annak mi a CSS / HTML kódja, és leginkább mi a link, ahol meg lehet nézni?
2

Miért ilyen bonyolult?

stan · 2009. Dec. 2. (Sze), 19.44
Nem lehetne ezt egyszerűbben megoldani?
Egyetlen gomb 3 részből?
Kapjunk már magunkhoz!

Megoldás 1:
Először is ha ez egy input gomb, akkor simán lehet deklarálni a css-ben mint id, és be lehet állítani a gomb hátterét és tulajdonságait. Ez lehet az a bizonyos lekerekített sarkú kép, nem kell hozzá 3 rész.

Megoldás 2:
Ha meg egy sima link gomb, akkor meg miért nem lehet ez a grafikus elem egyetlen div háttere?

Megoldás 3:
Az egész egyetlen kép, és minden nyelvre megcsinálod az adott képet.

A fenti három valamilyikével biztosan nem esik szét a gomb.
4

lehetne 3 részből csak itt nincs értelme :)

errata · 2009. Dec. 2. (Sze), 21.15
lehetne 3 részből csak itt nincs értelme :)
pl: több gomb ugyan az a sablon, és pl színátmenetes vagy valami...
3

nincs elég hely?

errata · 2009. Dec. 2. (Sze), 21.13
tippre ha az elején mindent jól csináltál,
css -böl float-oltad vagy display: inline
akkor azért kerülnek egymás alá mert egymás mellé nem férnek el a külső burkoló div-nek a méretér jól adtad meg?

pl:
  1. .clear {  
  2. clear: both;  
  3. }  
  4. #button {  
  5. width: 70px;  
  6. height: 20px  
  7. }  
  8. #a {  
  9. width: 10px;  
  10. height: 20px  
  11. float: left;  
  12. background: url('bal.jpg');  
  13. }  
  14.   
  15. #cont {  
  16. width: 50px;  
  17. height: 20px  
  18. float: left;  
  19. background: #00f; /*ide a te szined*/  
  20. color: #fff;  
  21. }  
  22.   
  23. #b {  
  24. width: 10px;  
  25. height: 20px  
  26. float: left;  
  27. background: url('bal.jpg');  
  28. }  
  1. <div id="button">  
  2.     <div id="a"> </div>  
  3.     <div id="cont">Belépés</div>  
  4.     <div id="b"> </div>  
  5.     <div class="clear"> </div>  
  6. </div>  
ui: dtd jól be van állítva?
5

A következő a kód: .ui-button

LeGaS · 2009. Dec. 2. (Sze), 22.01
A következő a kód:
  1. .ui-button { background: transparent; border: 0; clear: both; color:#FFFFFF; cursor:pointer; display:inline-block; font-size:18px; font-weight:bold; text-align: center; text-decoration:none; padding: 0; overflow: visible; }  
  2. .ui-button:hover { text-decoration: underline; }  
  3. .ui-button span, .ui-button strong { background: url(bg.ui-buttons.png) repeat-x center top; color: #fff; display: inline-block; float: left; height: 40px; line-height: 40px; }  
  4. .ui-button span.left { background-repeat: no-repeat; background-position: left top; width: 10px; }  
  5. .ui-button span.right { background-repeat: no-repeat; background-position: right top; width: 10px; }  
HTML:
  1. <a href="#" class="ui-button">  
  2.     <span class="left"></span>  
  3.         <!-- ide kerül egy ikon néhány esetben -->  
  4.         <span>Szöveg</span>  
  5.     <span class="right"></span>  
  6. </a>  
  7.   
  8. <button type="submit" class="ui-button">  
  9.     <span class="left"></span>  
  10.         <span>Szöveg</span>  
  11.     <span class="right"></span>  
  12. </button>  
Van hogy csak linkként, van hogy button-ként kell használni, csak a button-nál van ez a gond.

A bg.ui-buttons.png egy 400px széles kép, amiben különböző magasságokban szerepel ez a zöld háttér két szélén lekerekítésekkel.

XHTML 1.0 a doctype.