Cursor niet recht in input veld van search form

[Millennyum]

Ik heb een vreemd probleempje met een zoekformulier. In FireFox staat de cursor namelijk hoger dan het input veld:



Zodra ik tekst begin in te voeren, staat deze wel goed in het inputveld. Als ik daarna op een later moment de cursor opnieuw naar het inputveld verplaats, dan staat de cursor wel prima in het veld. Na een pagina refresh is het probleem weer terug. In IE ziet het er wel altijd goed uit.

Dit is de code:

HTML:

<div id="searchfield">
                <p><b>Search for items:</b></p>
                <form method="get" action="/cgi-bin/apf4/amazon_products_feed.cgi">
                <input type="hidden" name="Operation" value="ItemSearch">
                <input type="text" name="Keywords" size="25" />
                <select name="SearchIndex">
                
                      <option value="Blended">All Products</option>
                      <option value="Apparel">Apparel</option>
                      <option value="Baby">Baby</option>
                      <option value="Books">Books</option>
                      <option value="Classical">Classical Music</option>
                      <option value="DVD">DVD</option>
                      <option value="Electronics">Electronics</option>
                      <option value="Kitchen">Kitchen & Housewares</option>
                      <option value="Magazines">Magazines</option>
                      <option value="Music">Music</option>
                      <option value="OfficeProducts">Office Products</option>
                      <option value="OutdoorLiving">Outdoor Living</option>
                      <option value="PCHardware">PC Hardware</option>
                      <option value="HealthPersonalCare">Personal Health Care</option>
                      <option value="Photo">Photo</option>
                      <option value="Software">Software</option>
                      <option value="SportingGoods">Sporting Goods</option>
                      <option value="Tools">Tools & Hardware</option>
                      <option value="Toys">Toys</option>
                      <option value="VHS">VHS</option>
                      <option value="Video">Video (DVD & VHS)</option>
                      <option value="VideoGames">VideoGames</option>
                      <option value="WirelessAccessories">Wireless Accessories</option>
                
                </select>
                <input style="background-color:#FFCC68;color:#000068;font-weight:bold" type="submit" value="Search" />
                </form>
            </div>

Ik heb geen idee waar dit aan kan liggen, of op welke zoektermen ik moet Googlen voor een oplossing. Wie weet hoe ik dit kan oplossen?

[ Voor 59% gewijzigd door BtM909 op 11-07-2007 23:41 ]

[RobIII]

Met de code die je nu post is niets (geks) aan de hand; sterker: dan ziet het er heeeeel anders uit

Ik denk dat je nog vergeten bent wat CSS te posten Het is zowieso verstandig dan een 'uitgeklede' testcase te maken (en dus met 3 'options' is meer dan voldoende) en die eventueel online te zetten en een linkje posten.

[ Voor 30% gewijzigd door RobIII op 11-07-2007 23:26 ]

[Millennyum]

Oh ja

Het search form zit dus in een div genaamd 'searchfield', die weer onderdeel is van de div 'rightcolumn'. Volgens mij is dit alle CSS die van toepassing is:

Cascading Stylesheet:

#rightcolumn
{
    float: right;
    width: 200px;
    margin-right: 20px;
    margin-left: 20px;
    padding-top: 15px;
    background: url('layoutpics/shoprightheading.jpg') no-repeat;
}

#shoppingcart, #categories, #searchfield, #related, #country
{
    border-top: 1px solid #4D412B;
    border-right: 1px #4D412B solid;
    border-left: 1px #4D412B solid;
    padding: 5px 5px 7px 7px;
    margin: 0px;    
}

#rightcolumn p
{
    margin-top: 2px;
    margin-bottom: 2px;
}

#searchfield form
{
    margin: 0px;
}

#searchfield input
{
    margin-top: 3px;
    margin-bottom: 3px;
}

Ik zit nu op m'n werk, dus de testcase moet nog even wachten. De huidige (under construction) pagina is hier te vinden: http://www.alice-in-wonderland.net/shop/index_new.html

edit:
Correcte code tags gebruikt

[Verwijderd]

Cascading Stylesheet:

#shoppingcart, #categories, #searchfield, #related, #country 
{
border-top-width: 1px;
border-top-style: solid;
border-top-color: #4d412b;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #4d412b;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #4d412b;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 7px;
padding-left: 7px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

Dit geeft de firefox web developer toolbar als je de searchfield div bekijkt. Ik moet zeggen dat ik ook weinig vreemds zie hieraan.

[ Voor 13% gewijzigd door Verwijderd op 12-07-2007 11:24 ]

[marko77]

als je javascript uitzet gebeurt dit 'effect' niet meer. Ik zie dat je Sifr gebruikt, wellicht dat deze iets vernaggelt.

Wat gebeurt er als je de sifr code weglaat?

[Rickets]

marko77 schreef op donderdag 12 juli 2007 @ 09:29:
als je javascript uitzet gebeurt dit 'effect' niet meer. Ik zie dat je Sifr gebruikt, wellicht dat deze iets vernaggelt.

Wat gebeurt er als je de sifr code weglaat?

Het lijkt er op dat dat de oorzaak is inderdaad. Probeer de h1 eens iets van een line-height te geven, dan weet de browser hoeveel ruimte het in beslag gaat nemen en verspringt het niet meer op het moment van laden (als het goed is).

[Verwijderd]

Nog gedetailleerder: als je tijdens het laden van de pagina javascript uit hebt staan gebeurt het niet. Er gaat dus iets fout in een init/onload functie.

[marko77]

de sifr code wordt onload uitgevoerd, ik vermoed dat deze de boosdoener is.

[BtM909]

Modbreak:

En voeg vanaf nu bij al je code snippets de taal toe
zie ook: Overzicht van UBB-codes #tag_code

[Millennyum]

marko77 schreef op donderdag 12 juli 2007 @ 09:29:
als je javascript uitzet gebeurt dit 'effect' niet meer. Ik zie dat je Sifr gebruikt, wellicht dat deze iets vernaggelt.

Wat gebeurt er als je de sifr code weglaat?

Wauw, die link had ik nooit gelegd!

'Line-height' werkte niet, maar 'height' wel!

Nu is ook een ander vaag probleem opgelost, namelijk dat sommige h1-kopjes op een 1024x800 resolutie ineens veel groter werden dan bedoeld...

Thnx!

[marko77]

Als je de hoogte in pixels opgeeft zal een h1 altijd even groot zijn, heb je daar wellicht een tikfout oid gemaakt?

[Millennyum]

Ik had eerst helemaal geen hoogte opgegeven, nu wel (inderdaad in pixels). Het werkt nu WEL goed... of begrijp ik je vraag niet?

[marko77]

als het werkt, dan heb ik het verkeerd gelezen, nvm dus