Contact form unusable in Internet Explorer

[Marc Bradshaw]

Hi guys,

Sorry I've not been around for a while, I seem to go through phases of
using alt.html regularly then not at all for a few months... hopefully
I'll stick around for a while this time...

Anyway, I was hoping someone might be able to help me with a specific
issue: I have a simple contact form, HTML I have used on many websites,
but on this one particular website it seems to not work in IE7. I have
tested on Windows Vista and Windows XP and both apparently have the same
problem.

http://www.havant-libdems.org/contact-us

The issue is that in IE the form fields are not clickable. The labels
work, and you can click on those and then tab through, but I can't see
any reason why clicking in these fields apparently does no good.

It works fine in Firefox, it just seems to be Internet Exploder having
the issue. Does anyone have a suggestion?

 

[nice.guy.nige]

While the city slept, Marc Bradshaw feverishly typed:

http://www.havant-libdems.org/contact-us

The issue is that in IE the form fields are not clickable. The labels
work, and you can click on those and then tab through, but I can't see
any reason why clicking in these fields apparently does no good.

I copied and pasted your code and ran it on localhost and it worked just
fine in IE7 (although - obviously - without your javascript / css / images).
So then I added the full URL for your javascript include, and again it ran
fine. I added the full URL to your CSS file and then it stopped working, so
it would look like there is something odd in your CSS...

Hope that helps,
Nige

 

[Jukka K. Korpela]

http://www.havant-libdems.org/contact-us

The issue is that in IE the form fields are not clickable.

So it seems. I think I once managed to focus on the Phone Number field by
clicking when testing this with IE 7 on Win XP, but I was unable to repeat
that. It is as if some nasty script handled onclick events so that you
cannot focus by clicking. The problem exists on IE 7 but not on IE 8 (well
at least IE 8 on Vista).

But what does the script file
http://www.havant-libdems.org/files/templates/havantlibdems/scripts/
contain? It seems that you have a reference to a nonexistent resource, or at
least I get 404 error when trying to address it directly, but Firefox Web
Developer Extension shows, when I do Information/View JavaScript, an _HTML_
document as having been fetched from that address!

If it isn't some confusion with scripting, then my guess is that float:
right for the fields causes the effect. Using a simple table is both more
logical and more effective, for organizing labels and input fields in a
tabular manner.

 

[nice.guy.nige]

While the city slept, nice.guy.nige feverishly typed:

While the city slept, Marc Bradshaw feverishly typed:


I copied and pasted your code and ran it on localhost and it worked
just fine in IE7 (although - obviously - without your javascript /
css / images). So then I added the full URL for your javascript
include, and again it ran fine. I added the full URL to your CSS file
and then it stopped working, so it would look like there is something
odd in your CSS...
Hope that helps,
Nige

It appears to be in here:

div#container {
width: 80%;
position: absolute;
left: 8%;
}


take out the position: absolute, and it works.

Cheers,
Nige

 

[Marc Bradshaw]

Hi Jukka,

Thanks for your reply.

So it seems. I think I once managed to focus on the Phone Number field
by clicking when testing this with IE 7 on Win XP, but I was unable to
repeat that. It is as if some nasty script handled onclick events so
that you cannot focus by clicking. The problem exists on IE 7 but not on
IE 8 (well at least IE 8 on Vista).

On closer inspection, it appears you can click on the fields, but only
at the very top of them, so perhaps this is what you did?

But what does the script file
http://www.havant-libdems.org/files/templates/havantlibdems/scripts/
contain? It seems that you have a reference to a nonexistent resource,
or at least I get 404 error when trying to address it directly, but
Firefox Web Developer Extension shows, when I do Information/View
JavaScript, an _HTML_ document as having been fetched from that address!

Yeah, there is no script there, this appears to be a coding issue in the
PHP CMS which I will fix at some point. I don't think it is causing the
problem though - the HTML document was presumably the Apache-generated
404 page?

If it isn't some confusion with scripting, then my guess is that float:
right for the fields causes the effect. Using a simple table is both
more logical and more effective, for organizing labels and input fields
in a tabular manner.

Hmm, surely that would be an incorrect use of a table as this isn't
data? Or is a form acceptable table use?

 

[Marc Bradshaw]

Hi Nige,

Thanks for your replies.

It appears to be in here:

div#container {
width: 80%;
position: absolute;
left: 8%;
}

take out the position: absolute, and it works.

You're right... how very strange. Any ideas why this would have that effect?

Also, is there a better way to centre the div which won't cause this issue?

 

[dorayme]

Hi Jukka,
....

Hmm, surely that would be an incorrect use of a table as this isn't
data? Or is a form acceptable table use?

Surely not surely!

Why would you not rather conclude that tables can be correctly used for
other than data (as rigidly defined in some way) or that what you have
is data?

A table is a convenient way of laying out lists and, mostly, showing the
relationships between the list items. In your potential table you would
have a list of boxes to be filled, each box relating to a particular
item of the list describing the type of data required.

 

[dorayme]

Hi Nige,

Thanks for your replies.



You're right... how very strange. Any ideas why this would have that effect?

Also, is there a better way to centre the div which won't cause this issue?

In your case here, try substituting the line that Nige says to delete
with:

position: absolute;

(btw, pleasant page and validates, rare thing these days! I would be
inclined to make the fields more snugly near the text descibing the type
of content required. A table will get you great and natural contol of
this.)

 

[dorayme]

In your case here, try substituting the line that Nige says to delete
with:

position: absolute;

(btw, pleasant page and validates, rare thing these days! I would be
inclined to make the fields more snugly near the text descibing the type
of content required. A table will get you great and natural contol of
this.)

oops

with:

margin: auto;

 

[Adrienne Boswell]

Gazing into my crystal ball I observed Marc Bradshaw

Hmm, surely that would be an incorrect use of a table as this isn't
data? Or is a form acceptable table use?

You can use a table for form data, but I prefer something like:


<label for="field">Field</label> <input id="field" name="field" ...><br>

Style:
label {display:block; float:left; width:7em; padding-right:1em; text-
align:right}
form br {clear:left;}

If you use server side scripting, you can do more with the label element.
I have an example written in ASP Classic (an example in PHP is coming,
but it can easily be converted):
[http://www.cavalcade-of-coding.info/requiredform.php]

 

[Travis Newbury]

Sorry I've not been around for a while, I seem to go through phases of
using alt.html regularly then not at all for a few months... hopefully
I'll stick around for a while this time...

Yea, we all missed you, as a matter of fact one of the longest threads
in alt.html is about where you may have gone off to. I seem to recall
that the overwhelming majority thought you became a carny, married a
22 year old quadriplegic midget with three toes.

Anyway, I was hoping someone might be able to help me with a specific
issue:

Use a non silicone based lubricant on her fingers, then AFTER
insertion have her curl her fingers into a fist. (ok, I did not read
your question and was making a few assumptions)

I have a simple contact form, HTML I have used on many websites,

This is why we should never assume...

 

[Marc Bradshaw]

Hi Travis,

Yea, we all missed you, as a matter of fact one of the longest threads
in alt.html is about where you may have gone off to. I seem to recall
that the overwhelming majority thought you became a carny, married a
22 year old quadriplegic midget with three toes.

Aww, thanks Travis, I love you too...

Use a non silicone based lubricant on her fingers, then AFTER
insertion have her curl her fingers into a fist. (ok, I did not read
your question and was making a few assumptions)

Non silicone based lubricants tend to get sticky. Vegetable oil is
always a good option. Let me know how you get on with tht.

This is why we should never assume...

There is an adage... something about an ass and you and me... but I
forget the wording.

Marc

 

[Marc Bradshaw]

Hi dorayme,

with:
margin: auto;

Thanks, this fixed the problem! Does this count as an IE bug?

Thanks for the positive feedback - I like simple designs and my view is
that strict validation means it's less likely to have problems in
environments I don't/can't test.