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:

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

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:

<html>
<head>
<style type="text/css">
.containingbox {
    border: 1px solid #000000;
    height: 510px;
    width: 263px;
}
.boxstyle {
    background-color: #FF6633;
    border: 1px solid #FF3300;
    height: 100px;
    width: 100px;
}
</style>
</head>
<body>
<h1>Float test</h1>
<div class="containingbox">
<div style="float: left;" class="boxstyle">1</div>
<div style="float: left;" class="boxstyle">-2</div>
<div style="" class="boxstyle">--3</div>
<div style="" class="boxstyle">---4</div>
<div style="float: left;" class="boxstyle">----5</div>
<div style="" class="boxstyle">-----6</div>
<div style="" class="boxstyle">------7</div>
<div style="" class="boxstyle">-------8</div>
</div>


</body>
</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:

var Cucli = new Function() {
this.type = "Cucli";
this.cucliMethod = function() { alert( this.type );};
}

és a projectben egy másik file-ban pedig ez:

var cucli = new Cucli();
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?
 ■