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:

.clear {
clear: both;
}
#button {
width: 70px;
height: 20px
}
#a {
width: 10px;
height: 20px
float: left;
background: url('bal.jpg');
}

#cont {
width: 50px;
height: 20px
float: left;
background: #00f; /*ide a te szined*/
color: #fff;
}

#b {
width: 10px;
height: 20px
float: left;
background: url('bal.jpg');
}


<div id="button">
    <div id="a"> </div>
    <div id="cont">Belépés</div>
    <div id="b"> </div>
    <div class="clear"> </div>
</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:

.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; }
.ui-button:hover { text-decoration: underline; }
.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; }
.ui-button span.left { background-repeat: no-repeat; background-position: left top; width: 10px; }
.ui-button span.right { background-repeat: no-repeat; background-position: right top; width: 10px; }
HTML:

				<a href="#" class="ui-button">
					<span class="left"></span>
						<!-- ide kerül egy ikon néhány esetben -->
						<span>Szöveg</span>
					<span class="right"></span>
				</a>

				<button type="submit" class="ui-button">
					<span class="left"></span>
						<span>Szöveg</span>
					<span class="right"></span>
				</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.