Ja, en ik weet hoe het komt!
Als je naar de code kijkt, staat er:
HTML:
...
<input style="margin-bottom: 5px" id="q" type="text" name="q" size="23"
maxlength="255" value="Zoeken..." onclick="vensterLegen()" />
<input style="margin-top: 5px" type="submit" name="btnG" value="Go!" />
...
Ik had de knop 2 keer 5px lager gezet!
Waarom? Ik had even niet in de gaten dat deze button er in IE naast kwam te staan. Ik bekeek de pagina met Firefox, en daarin kwam de knop er onder, d.w.z. vlak tegen het randje van het invulvakje aan. Daarom deze 5px afstand erin gezet:
Als je de 5px'en er weer uit haalt, ben je van het probleem met IE af.
Maar dan gaat het weer fout in alle andere browsers (Firefox, Chrome, Opera, Safari).
Hoe kan dat zo? Het opmaken van <form>'s hoort tot de lastigste dingen in css-land, omdat er geen hele strakke standaarden/voorschriften voor zijn, en de browsers het nogal verschillend doen.
Ik heb nog niet geprobeerd.
Je boft, ik wel.
Om er uit te komen, heb kan je je toevlucht nemen tot een <table> en die nog redelijk heavy stylen met css. *)
Zoals:
HTML:
<form
method="get" action="http://www.google.com/search" target="_blank"
style="width: 200px; margin: 0; padding: 0;">
<table style="width: 100%; border-collapse: collapse; border: 0;">
<tr style="width: 100%;">
<td style="padding-right: 3px;">
<input type="text" id="q" name="q" maxlength="255"
style="width: 140px; padding: 2px; border: 1px solid #6595C1; margin: 0;
-moz-border-radius: 5px; border-radius: 5px; vertical-align: middle; color: #808080;"
value="Vul uw trefwoord in..." onclick="vensterLegen()" />
</td>
<td style="width: 100%; text-align: right;">
<button type="submit" name="btnG"
style="padding: 0; vertical-align: middle;"
value="Zoek!">Zoek!</button>
<input type="hidden" name="ie" value="UTF-8" />
<input type="hidden" name="oe" value="UTF-8" />
<input type="hidden" name="sitesearch" value="http://www.zee-online.be" />
<input type="hidden" name="domains" value="http://www.zee-online.be" />
<script type="text/javascript">
var alIngevuld = "nee"; // bij pagina openen
function vensterLegen(){
if (alIngevuld == "nee"){
var zoekvenster = document.getElementById('q');
zoekvenster.value = "";
zoekvenster.style.color = "black";
alIngevuld = "ja";
}
}
</script>
</td>
</tr>
</table>
<hr style="margin-top: 15px;" />
</form>
Hierin is de
<input type="submit" ... enz. vervangen door een
<button type="submit" ... enz., omdat een knop met <button> zich makkelijker laat stylen dat een knop met <input>.
Nog erbij gedaan: het regeltje "Vul uw trefwoord in..." heb ik in het grijs gezet > de tekst in het invulvakje wordt via het javascript vanzelf zwart als je iets gaat intikken.
En ook: ronde hoekjes voor het invulvakje (voor die browsers, die al de css3 hiervoor ondersteunen).
- Test: zoekvenstertje-3.htm
- Voor zover ik het kan bekijken, is dit bestand tegen de tegenstrijdigheden van alle browsers, ook als de bezoeker een andere lettergrootte heeft ingesteld dan standaard.
O ja, ik zou ofwel nemen als tekst "Vul uw
trefwoord in..." en dan als zoekknop "
Zoek", ofwel als tekst: "Vul uw
zoekwoord in..." en als knop "
Go!" - dan is voor iedereen duidelijk dat het daar om zoeken gaat.
Met vriendelijke groet,
CSShunter
____________
*) De site is toch al in table-opmaak i.p.v. met pure css, en een tafeltje meer of minder maakt dan ook niet uit.
Het kan ook met css alleen zonder <table>, dan kan je het helemaal exact hetzelfde krijgen in alle browsers. Maar dan kom je er waarschijnlijk op uit dat je de button (en de hover-status van de button) moet namaken in een tekenprogramma.
