Form problem in Firefox

[jerrydigital]

Hi, does anyone know of a good route to take to allow users with Firefox and other browsers other than Internet Explore to use my website?

My website is working great on Internet Explorer but I just found out that in Firefox users can't enter any information in the form fields plus there are random font issues throughout the pages.

Can anyone direct me to a tutorial or idea how to be universal since most people I know are starting to use Firefox?

Thanks --Jerry

[drhowarddrfine]

IE is the worst browser on the planet, so if you used it to originally markup your site, it means you coded to a bug. Firefox, along with Safari and Opera, is the most standards compliant and modern browsers around. So, if it doesn't work in FF, it can only mean your code was misguided by IE and is now buggy itself.

There is no tutorial or guideline to fix this. To be "universal" means coding to the W3C standard, as everyone should. One start would be to validate your html and css to make sure there are no errors there. A question would be do you have a proper doctype?

As you fix your code, make sure you always use the most modern, standards compliant browser you can find to test your code. That means, use anything but IE. Firefox has excellent developer tools and is the reason many use it as their test bed. Test your page in FF as you go along, then look to see if IE screws it up.

It's better to catch IEs bugs early. There are hundreds of sites dedicated to fixing IE bugs, and most of us know the usual solutions.

One good thing would be to post a link to your site. A casual glance and we can get you started in addition to the points mentioned above.

[afrog4u2]

@jerrydigital
My recent exploits into this realm have seen exactly what you are now. A lot of the differences seem to be in the differences in how IE 7- and Firefox 3 implement their box model. I still can't make some things work, but I have been able to find a work around that works in BOTH browsers.

See QuirksMode for some good information on browser differences (primarily shows differences in css and javascript).
QuirksMode - for all your browser quirks

Issues with forms usually center around making sure that the <form></form> tag properly surrounds all of the form controls on the page - IE tries to play nice and sort of allows non form bounded controls to act like they are form bounded. Firefox may act differently depending on the version but pretty much will pretty much never give those rogue controls any respect.

I could go on, but I am knee deep in paperwork for my "real work" project.

Cheers.

[drhowarddrfine]

To the contrary...

Peter-Paul Koch has some good stuff on his site but I thought he was considered a javascript expert more than anything else. I really don't understand where he gets off on some of the things he shows. Just now I went there to see if he's changed his ways but he has not. He publishes "bug reports" and links to 3rd parties but these reports have errors in them and, if you fix the errors, the "bug" goes away.

Maybe I misread how he writes but I've been thrown for a loop several times on his page when I first started learning and I just don't trust what he has there.

[afrog4u2]

@drhowarddrfine
PPK does have some good info on Javascript, but he has done a lot of testing with different browser versions and his information on CSS and differences between browsers is extremely insightful and informative. I have not found ANY other site on the web which has as much depth.

But alas, that is not enough as I have had to research even past his site - for javascript and CSS when working to make both browsers behave.

And in the end to fix anything in the browser it nearly always comes down to something in CSS and/or how the box model is implemented. Life would be easier if all the browsers worked the same, but that would probably put some of us out of a job. (Hmmmmm... that might mean there would be a conspiracy between all the different browser vendors - or maybe their respective development teams.)

Cheers

[drhowarddrfine]

As long as you code to standards, generally the only browser you'll have issues with is IE. Here is one web site I like to use as a quick reference.

[jhardman]

@jerrydigital
Jerry, I also recommend validating your code (see validator.w3.org - just type in your url or paste the code and it checks for errors in your code). Most browser differences are caused by different browsers handling errors in the code differently.

The other thing I have found is that the strictest doctypes (don't use transitional if you can help it) have the most consistent experience. Once it took all day for me to figure out why FF and Safari showed the same "mistake" but IE was showing what I intended, even though there was no error in the validation. When I changed the doc to HTML strict an error showed up, and when that was solved the page was fixed in all browsers.

Jared

[jerrydigital]

Thank you all for your input. I will check out those websites later today.

I have been making several changes and it's going pretty good. I have two major issues that come to mind. First, I can only right click to enter information in text boxes in FireFox. This is very unnatural for my users and I need to figure out how to change this. Second, I like to use <br> in IE to go to the next line but in FireFox this causes a complete blank line.

[jhardman]

@jerrydigital
A better solution would be to use javascript to put focus on a textbox when the page loads and set the tab order of the controls so the user can tab through them

Second, I like to use <br> in IE to go to the next line but in FireFox this causes a complete blank line.

Instead, try a block style display in css and specify line spacing. These are standard HTML questions.

Jared