Probleem met image in form
Ik heb een probleem met een image in een form (captcha image maar een ander willekeurig image geeft hetzelfde probleem).
In IE werkt alles goed maar bij Firefox kan ik de submit en reset button niet aanklikken met de muis (tab en enter werkt wel). Als ik het plaatje uit het form haal (dus bijvoorbeeld eronder zet) dan werkt het wel...
Hier de code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<form method="POST" action="./index.php?mod=forms&id=1">
<table>
<tr>
<td>Uw naam: </td>
<td><input type="text" name="naam" size="50" maxlength="50"></td>
</tr>
<tr>
<td>E-mail: </td>
<td><input type="text" name="email" size="50" maxlength="50"></td>
</tr>
<tr valign="top">
<td>Opmerkingen: </td>
<td><textarea name="opmerkingen" rows="10" cols="38"></textarea></td>
</tr>
<tr>
<td> </td>
<td><img src="./forms/captcha.php"> Type code over: <input type="text" name="code" size="5" maxlength="5"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Verstuur" name="verzend"> <input type="reset" value="Maak leeg"></td>
</tr>
</table>
</form>
<table>
<tr>
<td>Uw naam: </td>
<td><input type="text" name="naam" size="50" maxlength="50"></td>
</tr>
<tr>
<td>E-mail: </td>
<td><input type="text" name="email" size="50" maxlength="50"></td>
</tr>
<tr valign="top">
<td>Opmerkingen: </td>
<td><textarea name="opmerkingen" rows="10" cols="38"></textarea></td>
</tr>
<tr>
<td> </td>
<td><img src="./forms/captcha.php"> Type code over: <input type="text" name="code" size="5" maxlength="5"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Verstuur" name="verzend"> <input type="reset" value="Maak leeg"></td>
</tr>
</table>
</form>
In mijn CSS staat volgens mij niets vreemds wat problemen voor het form kan opleveren:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
table {border:solid;
border-color : #0066FF;
border-width:0px;
}
td {font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color:#333333;
vertical-align: top;
}
border-color : #0066FF;
border-width:0px;
}
td {font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color:#333333;
vertical-align: top;
}
Er staat niets in de CSS voor IMG of FORM.
Als ik de CSS echter uitschakel dan werkt het wel en kan ik de knoppen selecteren. Het lijkt mij een uitlijn probleempje maar kan er niet achter komen wat het is. Verder ziet de pagina er in zowel IE als Firefox goed uit.
Iemand een idee! Let wel: het probleem doet zich alleen voor met Firefox.
Vast bedankt,
Frank
Bedankt voor jullie reacties. Ik heb het voorstel van Jan uitgeprobeert maar dat werkte helaas ook niet. Zelfde resultaat. Ik ga het overigens als het goed werkt wel zo opzetten. bedankt voor de tip!
Ik heb even 2 pagina's gemaakt zodat jullie de verschillen kunnen zien:
De pagina waar het niet werkt omdat het image in het form is opgenomen:
http://www.itservice4you.nl/index.php?mod=forms&id=2
En de pagina waar ik met firefox wel op de knop kan drukken omdat het image onder het form staat:
http://www.itservice4you.nl/index.php?mod=forms&id=1
SVP geen berichten sturen omdat het het formulier is van een klant van me en deze berichten daar dus dan aankomen ipv bij mij..
Vast bedankt weer,
Frank
De p.footer ligt over je buttons heen.
Je kunt dit het beste oplossen door de bottom: 50px; uit je css te halen en de #footer iets anders op te maken zodat het erweer ok uit ziet. Dus bijv 50px hoger maken en de background-image hoger maken.
ps heb je firebug geinstalleerd? Hiermee heb je het snel in de gaten wat er fout gaat. Ik zag het namelijk meteen.
Gewijzigd op 01/01/1970 01:00:00 door Niek Weevers
Bedank voor je opmerking. Ik ga het morgen proberen. Nu nl geen tijd.. Laat het resultaat weten.
Ik heb firebug geinstalleerd na je tip maarzie niet hoe ik de bug kan ontdekken. Kan jij mij zeggen hoe je het zag?
Vast bedankt,
Frank
Met de inspect knop kun je over je pagina gaan en zien hoe de elementen staan. Je kunt ook hierin de html en css aanpassen door te klikken in het venstertje op een tag. Rechts komt de css te staan.
Beetje uitvinden eerst, maar je hebt er verder wel veel profijt van
Gewijzigd op 01/01/1970 01:00:00 door Niek Weevers
Bedankt voor je hulp. Het werkt nu inderdaad goed. Ik heb de footer class gewoon smaller gemaakt zodat deze niet over de buttons valt.
Weer wat geleerd, handig om snel layouts goed te krijgen.
Groetjes,
Frank