I recently completed a project where I had to create and design an html form and redesign an html page that was supposed to look like all the rest of the website–except my one page would be using a Doctype, a style sheet with no CSS errors and XHTML with no validity issues.
I had become pretty rusty with forms so this was a refresher class for me.
I have the ability to switch from Firefox 2.0.0.11 (pesky version decimals)– and IE7. I also have Opera 9.25. So I was able to check the page in 3 browsers but only one machine…and to be assured that everyone will see every single question in the html form I wanted to check with browsershots.org just to be on the safe side.
I also used Google Analytics tracking code to see what systems/browsers visitors were using and the majority of 164 visitors were using Windows IE 7 with IE 6 not far behind.Those visitors could see the entire form and the style looked correct.
Linux visitors were about 11 out of 164, using Konquerer,Galeon and *Firefox. They saw about 40% of the form. Horror. If they don’t see all the questions in the from fields how can they fill it out? *Ubuntu using FF 3.0 loaded a blank page. I can only hope that visitor knew how to turn off page styles.
The facts are:my page is 100% XHTML Transitional and has the correct Doctype and CSS with no errors.
So why can’t all the 30 browsers that browsershots.org has in it’s list of factories see what they’re supposed to see?
Is my stylesheet wrong? Is it the form tags I’m using?
All other the other pages from the site are built in tables with no doctype and no stylesheet.
I wanted to see how another page from the website with a long form
(tables layout,quirksmode,no stylesheet) would render cross-browser style.
Absolutely fine across the board.
So what’s the conclusion?
In order to have your html form render properly across a variety of browsers and operating systems do you have to skip the stylesheet,doctype and use a tables layout?
Has the WC3 led me down the garden path?
Because I was under the impression that this trifecta (doctype,valid html and error free stylesheet) would assure cross browser compatibility.
Note*
After I wrote this I spent more time on browsershots.org and borrowed my roommates macbook.
Browsershots.org isn’t infallible.Their screenshots depend on what they call a factory which is a combo of hardware,an os and a browser.So things can go wrong. Pages don’t load completely and queues get so long that screenshots expire. You used to have the option of picking when your queue’d screenshots expired but now you get a 30 minute window.If the queue is over 30 minutes long you might be stuck hovering over the extend button, which is a drag. But, ok this is a free service and one must not look a gifthorse in the mouth.
On second thought…
My worrisome page looks exactly as it’s supposed to on my roommate’s MacBook with Tiger OS and Firefox 2.0.0.1.1 (not sure where all the decimals go).But from the screenshot with that factory the form looked as though it was getting mulched.
Yet another conclusion:
The only way to be 100% certain of how your site/page looks in a variety of browsers/machines and OS’s is to physically have access to those machines.
Final conclusion:
You can satisfy most people most of the time with valid code,valid stylesheet and correct doctypes-but you can’t satisfy them all. And it is just not worth aggravating my already hyper OCD over this matter!