ugrás a tartalomhoz

html - input type="image" hiba

Dzsijszi · 2011. Ápr. 4. (H), 17.55
Sziasztok!

Csináltam a Google-el egy oldalamon belüli keresőt és ehhez készítettem egy keresőoldalt. (Kép 1)

A keresőmező mellett található gombot az input elembe ágyazott image utasítással jelenítettem meg. Azonban, amikor rákattintok a gomba 90%-ban a mező alá ugrik és majd csak ha még egyszer rákattintok akkor végzi el a neki szánt feladatot.

Abban szeretnék segítséget kérni, hogy szerintetek mi lehet a probléma?

A segítségeket előre is köszönöm!

Dzsijszi

az ide tartozó kódrészlet:

<div class="cse-branding-right" style="background-color:#FFFFFF;color:#000000">
  <div class="cse-branding-form">
    <form action="list.php" id="cse-search-box" name="cse-search-box">
      <div>
        <input type="hidden" name="cx" value="003520289205856446342:sd86lecu2ko" />
        <input type="hidden" name="cof" value="FORID:9" />
        <input type="hidden" name="ie" value="UTF-8" />
        <input type="text" name="q" id="q" size="50" />
        <input type="image" name="sa" id="sa" src="../images/search_button.png" height="37px" />
      </div>
    </form>
  </div>


#q {
	height:23px;
	font-size:15px;
	color:#5275C3;
	padding:3px;
	font-weight:bold;
	position:relative;
	float:left;
}
#sa {
	position:relative;
	float:left;
	margin-left:3px;
}
A helyes megjelenés:


A rossz megjelenés:
‹ Multiple select firefoxban és chrome-ban focus ›
 ■
1

Valami hiányzik

Poetro · 2011. Ápr. 4. (H), 18.21
Az én oldalam HTML-je így néz ki:
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <script src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>
  <style type="text/css">
    #q {
      height:23px;
      font-size:15px;
      color:#5275C3;
      padding:3px;
      font-weight:bold;
      position:relative;
      float:left;
    }
    #sa {
      position:relative;
      float:left;
      margin-left:3px;
      background: #5275c3 url(../images/search_button.png) 0 0 no-repeat;
      color: white;
      height: 37px;
      width: 37px;
      border-style: none;
    }
  </style>
</head>
<body>
<div class="cse-branding-right" style="background-color:#FFFFFF;color:#000000">
  <div class="cse-branding-form">
    <form action="list.php" id="cse-search-box" name="cse-search-box">
      <div>
        <input type="hidden" name="cx" value="003520289205856446342:sd86lecu2ko" />
        <input type="hidden" name="cof" value="FORID:9" />
        <input type="hidden" name="ie" value="UTF-8" />
        <input type="text" name="q" id="q" size="50" />
        <input type="submit" name="sa" id="sa" value="OK" />
      </div>
    </form>
  </div>
</div>
</body>
</html>
És így jelenik meg:

Szerintem valahol máshol lesz a probléma nálad. Jó lenne látni az oldalt egészében, vagy legalább annyi HTML-t, amivel reprodukálható a probléma.
2

width

bb0072 · 2011. Ápr. 5. (K), 10.21
Ennyiből tényleg nehéz megmondani, mi a gond. Valószínűleg kattintás közben valamelyik elemnek megváltozik a width tulajdonsága (1-2 px-el megnő), a float-olás miatt pedig új sorba törik, ha így már nem fér ki.

Tegyél a css-be fix width értékeket. A size nem igazán jó méretezése az input-nak, mert az függ a betűmérettől, fontkészlettől, böngészőtől.
3

link

Dzsijszi · 2011. Ápr. 5. (K), 14.15
Kipróbáltam fix értékkel, de azzal sem működöt valamiért. Ezért feltöltöttem ide:

http://aginoh.ag.funpic.de/search/

css dokumentum
4

Méretek

Poetro · 2011. Ápr. 5. (K), 15.11
Nálam a következőképpen alakulnak a szélességek:
.cse-branding-form  : 612px + 4px margin = 616px
#cse-branding-all   : 75px + 10px margin =  85px
================================================
                                           701px
Rendelkezésre álló terület:
.cse-branding-right :                      700px
Ajánlom használj valamilyen fejlesztői eszközt, amivel meg tudod nézni a böngészőben az elemek méreteit. Firefox alatt Firebug, Opera alatt Dragonfly, Chrome alatt Developer Tools, Internet Explorer alatt F12 Developer Tools, Safari alatt Web Inspector.
Valamint hatásos lenne, ha mind a .cse-branding-form-nak, mind a #q-nak adnál valami fix vagy relatív szélességet.
5

értem

Dzsijszi · 2011. Ápr. 5. (K), 16.28
Jó, köszönöm a segítségeteket! Azonnal átalakítom egy kicsit a dolgokat, illetve letöltöm az ajánlott Firefox kiegészítőt is.