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:
  1. <div class="cse-branding-right" style="background-color:#FFFFFF;color:#000000">  
  2.   <div class="cse-branding-form">  
  3.     <form action="list.php" id="cse-search-box" name="cse-search-box">  
  4.       <div>  
  5.         <input type="hidden" name="cx" value="003520289205856446342:sd86lecu2ko" />  
  6.         <input type="hidden" name="cof" value="FORID:9" />  
  7.         <input type="hidden" name="ie" value="UTF-8" />  
  8.         <input type="text" name="q" id="q" size="50" />  
  9.         <input type="image" name="sa" id="sa" src="../images/search_button.png" height="37px" />  
  10.       </div>  
  11.     </form>  
  12.   </div>  
  1. #q {  
  2.     height:23px;  
  3.     font-size:15px;  
  4.     color:#5275C3;  
  5.     padding:3px;  
  6.     font-weight:bold;  
  7.     position:relative;  
  8.     float:left;  
  9. }  
  10. #sa {  
  11.     position:relative;  
  12.     float:left;  
  13.     margin-left:3px;  
  14. }  
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:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <title>Page Title</title>  
  5.   <script src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>  
  6.   <style type="text/css">  
  7.     #q {  
  8.       height:23px;  
  9.       font-size:15px;  
  10.       color:#5275C3;  
  11.       padding:3px;  
  12.       font-weight:bold;  
  13.       position:relative;  
  14.       float:left;  
  15.     }  
  16.     #sa {  
  17.       position:relative;  
  18.       float:left;  
  19.       margin-left:3px;  
  20.       background: #5275c3 url(../images/search_button.png) 0 0 no-repeat;  
  21.       color: white;  
  22.       height: 37px;  
  23.       width: 37px;  
  24.       border-style: none;  
  25.     }  
  26.   </style>  
  27. </head>  
  28. <body>  
  29. <div class="cse-branding-right" style="background-color:#FFFFFF;color:#000000">  
  30.   <div class="cse-branding-form">  
  31.     <form action="list.php" id="cse-search-box" name="cse-search-box">  
  32.       <div>  
  33.         <input type="hidden" name="cx" value="003520289205856446342:sd86lecu2ko" />  
  34.         <input type="hidden" name="cof" value="FORID:9" />  
  35.         <input type="hidden" name="ie" value="UTF-8" />  
  36.         <input type="text" name="q" id="q" size="50" />  
  37.         <input type="submit" name="sa" id="sa" value="OK" />  
  38.       </div>  
  39.     </form>  
  40.   </div>  
  41. </div>  
  42. </body>  
  43. </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.