Forgive me if I don’t do this right - my first time posting (almost anywhere!).
I am building a site (xhtml and css) with five php pages with booking/mailing forms in php (using PEAR smtp). They work very nicely in recent versions of Firefox, Chrome and Safari. They post to the same page and on clicking Submit they display/don’t display the form as appropriate, and return to the anchor point I have set, eg action=“telephone-counseling.php#cont”
They all use the same code - though there is extra code on the bookings page - and I have tried a version with most extraneous stuff stripped out (like cufon etc, www.therapyandspirituality.com/bookings2.php) and they still don’t return correctly. I have validated, tested all anchors (set by an id in an h2 tag) and searched for many, many hours and not found a solution.
Have you tried adding <a name=“cont”></a> right before the <h2 id=“cont”>? This will work better in older browsers. So it’d look like <a name=“cont”></a><h2 id=“cont”>Text here</h2>, for example.
The quoted was accurate when HTML 3 was being used. These days, there is now no valid purpose to use the name attribute for anything other than to name form elements.
Back to the problem at hand, why the page isn’t scrolling.
When I submit the form and the fragment identifier is set to #cont, the page does scroll to the correct location. You can see that happening when the screen-size of the page is around 300 pixels high.
When the screen is larger, such-as at a full-screen view, the “cont” section is low down on the page, so the page scrolls all the way to the bottom.
It is not possible for the web page to scroll down any further than the bottom of the page. Not even if you want to scroll the “cont” section to the top of the screen. You will need to either add empty blank lines to the end of the page for that to occur, or to restructure the page so that the message appears further up the page.
I have been told by someone else that this IS working ok on IE8 - I confess I had been relying on my client to tell me it wasn’t working in IE8 and he may be mistaken about his version of IE, or have it working in IE7 mode. I have attached the code for bookings2.php, which has the cufon stuff stripped out.
Any further ideas? I have spent over 10 hours googling and reading every thing I could find and nothing has helped!
[EDIT: attachment file bookings2-php.txt contained sensitive info. Please see below for edited version of the file. - Mittineague]
First find a way to experience the problem for yourself. Only when the problem can be duplicated can you take steps to fix it, and know that it’s fixed when those same steps fail to demonstrate the problem.
Thanks, Paul, for testing that. I can confirm that without the sizzle.js (which I need for cufon) and without any of the cufon, the problem continues to occur, so you are right to guess it has nothing to do with it.
I see you used the telephone counseling form. I have just used it again on both IE7 and FF3.6 and the latter behaves perfectly and IE7 behaves badly: FF brings the Contact Form heading to the top of the page on error (because there’s enough below the heading to fill to the bottom of the page) and IE7 doesn’t - and then on submit FF gives me my page right to the bottom, including the confirmation message, but IE7 only shows me the Contact Form heading and doesn’t take me low enough on the page to show the confirmation message
Yes it does, which means looking for other strange and obscure reasons, or testing the problem with different versions of the page. Is server-side cod necessary to duplicate the problem? Can the problem still be experienced without the scripting disabled, or taken out? Is the problem still there when there is no CSS, or only parts of it.
Test different variations, and remove as much as you can from the page. This way you’ll notice that then you remove Foo the problem goes away, and can then investigate more closely into Foo
Thanks, very helpful advice. Have done some of this - the problem occurs with or without cufon-scripting - that’s for sure. I will test with and without CSS and see. And try some other variants. I appreciate the time and attention you are giving this.
Well, first of all, thank you for making me go through disciplined steps! It’s been an object lesson.
I worked my way through the full list, removing things. When I finally got down to a non-css and non-php simple html file - with all java and php code stripped out - I found in IE7 that after having more than 6 input tags in my first fieldset the anchor didn’t work on post, but did if I stripped out all but 6 input tags and stripped out the other fieldset with the select with 10 options. I could leave in my third fieldset (containing 5 inputs and a textarea).
If I removed an input field from the last fieldset and put it in the first fieldset, things started not to work properly again, so it does seem to be some weird limit that IE7 can’t handle - on this form. I did have divs surrounding the input tags but removing them or adding them back doesn’t change anything about the behaviour.
However, this is a simple postback. When I apply these changes to the full php-css version I find that on clicking submit without filling in anything the form with error messsage comes up in exactly the right place at the anchor - and as soon as I add in extra input tags it doesn’t. So something identified there.
BUT when I fill in an post the form and all works well, it still doesn’t go correctly to the anchor tag.
AND, it doesn’t explain at all why the telephone-counseling.php form, with 5 input fields and one textarea doesn’t go to its correct anchor position either on error or on successful send.
If it’s any help, here’s a post which indicates that it’s speed of the page being loaded that may be responsible, with some hints that an onload event to trigger the scrolling might help.
Thank you, Paul. Yes, something to do with page loading seems to be the only way to go! I did actually find the post you showed me - and tried his method (just putting in the <body onload=“goToAnchor();”>) but it didn’t work for me.
I had started to play around with javascript - but hardly know any and don’t like using it unless I have to - but will if I have to, of course.
I haven’t used an anchor tag, I have used id=“bookfm” in my H2 tag. And I am aware of the empty anchor tag problem in IE. I tried using a (filled) anchor tag itself instead of my H2, and tried surrounding my H2 with an anchor tag too, all properly set up, but none of that worked.
It is very kind of you to persevere with this and I really appreciate it. An “elegant” solution would be lovely, but I will settle for an inelegant one! I had assumed that unless I could find anything else I would have to go with some perhaps clumsy javascript? If it works and complies, fine. I am just about to re-attach a txt file of my bookings2.php file - with more private stuff removed - but will have to wait for it to be moderated
I might have a clue. Earlier I noticed that after submitting, IE would show the page, and then it would scroll down by several lines.
I suspect that it’s due to the image loading up in the header, and IE not knowing how much room to allow for the image. When the image loads, IE reflows the page, but not the target location.
Possible solution: ensure that the images have their height set. And for the sake of completion, their width.
Good thinking - I noticed that too (IE showing the page and then scrolling down) and wondered about it. BUT, apart from background images on the bookings page, I only have the photo of Richard, and some images as spacers in the main links bar. But each image has its width and height set (something I am usually very careful about and have checked).
However, if you go to wwoofing-volunteering.php and fill in the form in the right column there you will notice that the page does NOT move and stays in place and goes correctly to the anchor point. However, if I move the very same form on that page into the main body (left col) then it starts to misbehave.
I had been racking my brains about it but couldn’t see anything in the css or setup that suggested anything…??