Form fields not working

[adamalton]

Hi, I just updated one of my pages today to bring it into line with W3C standards (using their validator). And now....it doesn't work!!!

When you type in the first form field it works fine, and if you use TAB to move between the form fields it still works fine. But as soon as you try to use the mouse to move the cursor to the next form field it seems to kind of disable the form. Tried in Firefox (2.0.0.11) and Safari (3.0.4). Same in both.

Any wisdom on the problem greatly appreciated!
Here's my page (it's the login/register forms for the guestbook that don't work):
http://www.ffredjones.co.uk/main.php?page=guestbook

Thanks

[drhowarddrfine]

Hi, I just updated one of my pages today to bring it into line with W3C standards (using their validator).

You may think you did but it isn't.

[garrow]

The reason you cannot click the form fields is that they are being obscured by the following box.

Try adding a background colour to the class .box and you'll see what I mean.
It will hide the forms.

[HTML]<div class="box text">
<div class="lft"/><div class="rgt"/>
<div style="clear: both; height: 1px;"> </div><br/>

<font class="textblack"><b>15/11/07</b></font><br/>
<font class="ffredtext">ffred_jones</font><font class="textblack"> wrote:<br/></font>
<font class="text">Hi, welcome to my website. Have a listen to my music and leave me a message or drop me a line on the contact page.<br/>
ffred<br/></font><br/><br/></div>[/HTML]


I would also use labels in forms to help aid usability, and increase the number of elements people can click to focus the form fields.

If you used the following code, clicking on the EMAIL label will focus the email form field also.
[HTML]<div style="display: block;" id="login"><br/>

<form method="post" target="main" action="guestbook.php">
<div style="float: left;">
<label for="login_email">Email:</label><br/><!--ADDED-->
<input type="text" value="" id="login_email" name="login_email"/>
</div>
<div style="float: left; position: relative; padding-left: 5px;">
<label for="login_password">Password:</label><br/><!--ADDED-->
<input type="password" name="login_password"/>
<div style="clear: left; height: 20px;"/><!--to make the enclosing div big enough for the button to go in it-->
<input type="submit" style="position: absolute; bottom: 0px; right: 0px;" value="Login"/>
</div>
<input type="hidden" value="1" name="login_submitted"/>
</form>
</div>[/HTML]

Also, the FONT element is deprecated, I would suggest using the semantic HTML where possible.

It is always easier to define a LABEL for a field, (by using the for attribute) than just throwing a span in there and styling the span.
You can then add styles to the label tag in your stylesheet.

[adamalton]

Hi Garrow, thanks, that's definitely it. Now I might be being a bit stupid here, but I don't understand why the div below the forms covers up the forms. I've checked that I've got all the <div> tags nested and closed properly. So why does the div at the bottom move up to cover up the form fields above it? And it doesn't seem to cover up the words (or labels) "Email:" and "Password:". When you click the links which hide/show the forms the bottom div moves down, but only far enough to reveal the labels, not the form fields. I don't get it!!
Thanks

[astangeland]

I see that drhowarddrfine was as helpful to you as he was to me. It sounds like you have to pay him to get any real advice.

Anyway, it looks like setting the .box class to { clear: both } will solve your problems. Your form elements our being floated to create the two column look. Then I think that the form or the containing div is not expanding to fill the total height and so the box is positioned too high and laid down on top of it. It works in IE, because IE lets you click through a transparent background whereas Firefox and Safari don't. Also you may want to use a margin-top instead of a padding-top on the .box class.

You might look at this page to clear the form without using another element: http://www.positioniseverything.net/easyclearing.html. However just using the .box element will work fine in this case. But if you ever want a background for the form you will want to use the method described in the link.

[adamalton]

Yeah, that's fixed it. Thank you!

I'll have a little gander at that page, and another gander at my code to make sure that I really understand what's going on.
Cheers