View Full Version : Form Problem, Can't Select

Dec 30th, 2009, 03:48 PM
I have a form that works only certain times and it is hard to explain. On my computer, the form works with IE but not Firefox. On a coworkers computer, it works in neither browser. The problem with the form is that when it does not work, I can't click the buttons or even select the forms so I can type in them. Has anyone had similar problems before? It should be noted that I have background images for all parts of the form, if that matters.

Dec 30th, 2009, 03:57 PM
Has anyone had similar problems before? Can we have a link to your page? If it's not live, you may create a free account at hosts like freehostia.com

Dec 30th, 2009, 04:34 PM

The form in question is the gold log-in form.

Dec 30th, 2009, 06:36 PM
ok you site coding is a mess,


eliminate unecessary tags and try it

Dec 30th, 2009, 06:45 PM
It's Dreamweaver. That doesn't make you less correct, but it explains the spaghetti code, anyway.

Dec 30th, 2009, 07:58 PM
What do you mean by unnecessary tags?

Dec 30th, 2009, 08:00 PM
He probably means those he listed: duplicate doctypes, html, body.

You have several errors (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.vbssys.com%2Ftest%2Findex.php&charset=%28detect+automatically%29&doctype=Inline&group=0).

Dec 30th, 2009, 08:31 PM
go to you page,

and have a view source

you will know

Dec 30th, 2009, 08:48 PM
That might be because I have php requires combining the header with the rest of the page. Should I delete those on the header so that they don't appear as doubles?

Jan 6th, 2010, 05:48 PM
I tinkered around with the form and I can't seem to figure out why I can't select the text field or the buttons on Firefox but it works on IE. I removed the background image and saw the text field, and still could not click it. I'm not sure exactly what could possibly be wrong that would cause this.

Jan 6th, 2010, 06:26 PM
You still have several validation issues (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.vbssys.com%2Ftest%2Findex.php&charset=%28detect+automatically%29&doctype=Inline&group=0). You did get all of that cruft code removed, so that's a big move in the right direction.

There's some layer still stuck over the top. I poked around deleting various elements though Firebug, but didn't come up with anything quickly. Try fixing up the validation problems and see what happens from there.

Unsolicited advice: once you're finished with this project, delete Dreamweaver. Or, perhaps, learn how to write the code before going back to it so you can understand when it's taking a dump on you (as in this case). I'll bet you could have saved yourself several days of dev time with straight hand-coding.

Jan 6th, 2010, 08:29 PM
Thanks for the help. I'm having some troubles finding out what a lot of these validation errors mean, though. Am I closing tags incorrectly or what seems to be the problem?

Jan 6th, 2010, 08:51 PM
That can be part of it. The first error on the current list is exactly that. It even shows how to fix the problem.

The thing with the validator results is to start at the top, fix, and then re-validate. Often, a small error at the top causes a cascade of fake errors. I don't think that's the case with all of yours, but perhaps a few will vanish after you fix up the topmost errors.

Jan 7th, 2010, 02:55 AM

Make sure that the block of code that is in your HTML code works for both IE and Firefox. In other words, make sure that you have embedded code for it to work on these major browsers.

Best regards,
CoffeeCup.com :thumbsup:

Jan 7th, 2010, 04:12 AM
Make sure that the block of code that is in your HTML code works for both IE and Firefox. In other words, make sure that you have embedded code for it to work on these major browsers.

Isn't that what he's already said he's trying to do? Are you just link spamming or did I miss something?

EDIT: Nevermind. I just read the rest of your posts to confirm that you are a spammer.

Jan 8th, 2010, 05:44 PM
I've removed a lot of code and simplified it for the most part. I am still editing the page, and have temporarily removed the login and movie parts of the page to better handle the other errors. I am currently stuck on the remaining errors as I am not sure how to fix them or what is wrong.

Jan 8th, 2010, 06:36 PM
Excellent! Lots of errors fixed up so far!

The first error on the current validation is pointing to an incorrectly closed table. That's a result of the sloppy mixing of code styles which Dreamweaver makes all too easy.

Look for <div id="menu"> in the html. You'll notice that right before that line, there's a row closing tag </tr>. The only acceptable items that can come after a closing row are another row opener (<tr>) or closing table tags (</tbody>,</table>).

I'm not sure which way will fix it the way you want, so you may need to play around. I'd suggest closing the table just after the hanging </tr> tag. You'll still have the old table close tag </table> hanging around a hundred lines or so below that point. Remove it or comment it out. Re-validate and see what happens. A few more errors will probably disappear.

Jan 8th, 2010, 07:57 PM
Fixed that and now we're only down to a few errors dealing with the tables I have because of my required structure.

Jan 8th, 2010, 08:00 PM
That next one is a table directly inside a tr. If you need a table there, it must be inside a td.

Jan 11th, 2010, 10:51 PM
I have fixed all the other errors myself, except now an error comes up for my form that I am not sure how to fix. This might be the root of my original problem with my form not being able to be accessed sometimes, especially in Firefox.

Jan 11th, 2010, 11:13 PM
Not quite sure, but I think that form needs to be outside of the paragraph tag.

Now that it's sufficiently cleaned up, it makes finding the error a lot easier. If you haven't already installed the Firebug plugin for Firefox, you should get it - makes layout debugging much easier. I believe your problem is in this section of the CSS:

#contentTable {
margin:0 auto;
Your table has negative z-index. That's placing it "behind" the body. The body is transparent, so you can still see everything, but its layer makes it impossible to click your fields. Removing that z-index seemed to fix it here.

Jan 11th, 2010, 11:53 PM
I took the <p> tag off and it fixed the errors. When I took off the z-index from the table, it fixed the form for Firefox, but now when I test it on IE it does what Firefox used to do. Not sure why it would be effected, though.

Jan 12th, 2010, 12:14 AM
I'm not in a good position right now to debug, but a quick glance suggests that there are other issues in IE, too.

Regarding the registration form, though, go through your CSS and look for other z-indexes. Remove or set to zero for testing.

Jan 14th, 2010, 04:15 PM
I've fixed everything else and uploaded the YouTube video and have some new errors. Do you know of a better way to code the video so that I don't get the errors or will they also be there with a YouTube video?

Jan 14th, 2010, 05:48 PM
Not quite sure on the video embedding. I see threads on it here all the time, but don't pay attention to them because I don't use any embedded videos. A forum search should turn up something for you, though.

I'm able to select around in the registration form now, but the layout looks a little broken here in both FF3.5 and IE8.

Jan 14th, 2010, 09:25 PM
Again, thank you for all of your help it has helped my web page out tremendously. I found better embedded code for the movie and it validates now, and I have fixed part of the layout problem. I did notice that part of the log-in section shifts to the right in my Firefox, but doesn't do so in IE. Through adjustments, I haven't been able to find out why it does so.

Jan 14th, 2010, 10:17 PM
The more correct solution for that box (well, besides tossing the tables and starting over with a good div-based layout) would probably be to use those images as backgrounds for the form. Since they're being used as foreground (content), they take up space on the page and you end up playing with positioning to get things to look right - and that results in a big mess, as you can see. If I was trying to patch the current layout, I'd switch those to background images.

Jan 15th, 2010, 05:53 PM
How would I go about switching multiple images to a background? Also, I can't seem to figure out the navigation bar and the problem with the location. It looks fine on my computer on Firefox and IE, but when I load it up on my laptop, it looks broken.

Jan 15th, 2010, 08:06 PM
For the background images, see background-image (http://www.w3schools.com/css/css_background.asp) in CSS.

I'll hold off on the menu placement question. You must be working on it right now as the whole page is shifted in IE here.

Jan 15th, 2010, 08:45 PM
I'm done tampering with the navigation, I can't seem to solve the problem.

Jan 15th, 2010, 09:12 PM
IE8 fixes it for you, but IE6 (and maybe 7) are broken. If you're seeing the same thing I am (the nav shifted down slightly), it's a casualty of failing to reset the CSS. You can work around that with a little extra CSS:

table#navBar form {margin:0;}
Your search form has margin by default. That's spacing everything else down.

Also, both the Products and the Services hover navs also don't work on IE6.

Jan 18th, 2010, 09:13 PM
I've run into some other problems and have decided to save the old setup I have in a separate place and try out your idea of using divisions instead. Does this look like the setup you have in mind?

Jan 18th, 2010, 10:31 PM
That's pretty good. Much cleaner. Completely valid (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.vbssys.com%2Ftest%2Findex.php&charset=%28detect+automatically%29&doctype=Inline&group=0) code to this point.

If you're interested, you can even convert that last table (for the menu) to an unordered list.

Great start, though. The menu is a little broken in IE (7?), the page doesn't make it to the footer in Firefox (3.5), and the left dead area ("news bar area") doesn't go to the bottom in either. The first two should be relatively easy to track down. For the last, you might need to search for "faux columns".

Additionally, something else that may be worth at least a glance would be pre-made layouts. These are freely available and only require that you customize the style to fit your needs. Yours would probably be a 2-column fixed with header (http://www.google.com/search?q=2-column+css+fixed+layout+with+header). Even though you've already done the conversion work for the current design, I'd recommend looking at some of those (http://www.dynamicdrive.com/style/layouts/category/C9/). They eliminate most of the problems that come from building a common layout from scratch (a.k.a. re-inventing the wheel).

Jan 18th, 2010, 10:57 PM
I was tampering with the menus before and restored them to how they were so they should work. I'm trying to use the faux columns but they don't seem to be working at this point, I'll keep tampering with them though. The copyright should also be fixed.

Jan 19th, 2010, 04:27 PM
I've been trying to use the faux columns and they should work, but I'm trying to apply the left side's background image to the div "contentTable" but it doesn't seem to want to change the background to it at all and I am not sure why.

Jan 19th, 2010, 05:23 PM
It's related to the floats of the inner divs. The parent div (#contentTable) collapsed because both children (#contentLeft and #contentRight) are floated. So, you just need to clear the floats to force #contentTable to expand and wrap. The easy way is to add an empty div:

<div id="contentTable">
<div id="contentLeft">other stuff here</div>
<div id="contentRight">other stuff here</div>
<div style="clear:both;"></div> <!-- add me -->
That should work for Firefox, at least. You can also do it by applying a class and styling the class through CSS with the clear:both. Either way works.

Your background image can be simplified, too. One of the benefits of faux columns and background images is that the image can be repeated. This means that you can use just a sliver of an image and repeat it. That reduces the size of the image that needs to be transferred which increases page download speed. Granted, your image is only 21K, but it could be reduced to be just hundreds of bytes if chopped to, say, 140x10 instead of 140x1200.

Along those lines, to reproduce the faux column effect, you should use a single vertically repeating image for the entire contentTable div. The point is that it accommodates either column growing longer than the other. For what you have now, your layout may break if one of the columns goes long. The minimum patch would be to vertically repeat the current background image. But the suggested smaller image would server you better.

Also, you have some stray position:relative is a few divs. That's unnecessary in the few I looked at.

Jan 19th, 2010, 06:31 PM
Well, as far as I can tell those seemed to have fixed the last of the layout errors I've experienced. Thank you so much for your help, you've saved me a HUGE amount of hassle.

Jan 21st, 2010, 03:22 PM
For some reason, the products page's sidebar doesn't seem to want to load in Firefox. Its loads perfectly fine on IE, but it use's the index's sidebar image instead of the one it is directed at according to its stylesheet. I'm drawing a blank because I checked the code and that is the only difference between them and if it works IE that way, I don't understand why Firefox would revert to the old background.

Jan 21st, 2010, 03:58 PM
Can you provide a link? I'm not sure which product you're talking about.

Jan 21st, 2010, 04:30 PM

All of the similar products pages like that should have a grey side bar on the left as opposed to the purplish colored sidebar on the index. For some reason, my Firefox shows purple while IE shows the correct grey image.

Jan 21st, 2010, 04:52 PM
FF 3.5 here shows the grey: /test/products/images/sidebar.png

You may be having a browser caching problem. CTRL+F5 should clear that up if it's the problem.