While its normal to go nuts with IE, I have problems in IE and Chrome. The input buttons in IE are displayed as pictures, and in Chrome have an annoying box around them. Not to mention I am getting a host of script errors in IE, but the page is loading so I don’t know if I should care…
Oh man, that sites a painful wreck of “let’s see just how much javascript we can stuff in there for NOTHING”. Prototype, Scriptalicious AND jQuery? FOR WHAT?!? Figure in the complete accessibility train wreck of the fixed width layout, fixed metric (px) fonts, and illegible color contrasts…
That said, Ralph is entirely correct in asking why are those even INPUT tags in the first place. You’re not even inside a form… INPUT is one of the HARDEST tags to get to style consistently cross-browser which is why one of my big bits of advice remains ‘don’t even BOTHER’ in most cases – it’s just going to break.
While in there, swing an axe at the endless painful javascript bloat (865k total, 690k compressed – scripting alone is four times the upper limit I allow for an entire PAGE of HTML+CSS+SCRIPTS+template images!), pointless wrapping DIV around multiple elements, mass of idiotic classes on BODY, IE7- CC for christmas only knows what, redundant and pointless title attributes, strong tags doing heading tag’s job, content cloaking, and host of other “this is not how you build a website” faux pas.
Looking at it, I’m a little shocked it only has 27 validation errors… and that’s before I even go into the CSS which is being sent to “all” (which is bad), whitespace compressed/stuffed onto single lines making it painful to debug and explaining all the redundant declarations – and hiding that it seems much of the layout seems to be built using absolute positioning instead of flow (also bad)… that such a simple page is using 104k of stylesheets in 4 files is a definite indicator that the entire site layout has been massively over-thought and over-engineered… to the point we come to the advice I give a lot of people.
Throw it out and start over, there’s little if anything worth saving from this. I would have to throw it out for all new markup and CSS to even TRY an fix this… doing anything else is duct tape, bubblegum and bailing wire.
1.1 megabytes in 64 files – “Not viable for web deployment”.
Death, while sorting through the sarcasm you did bring up a few things that concern me.
First, is the bloated scripting, but that is all from Magento. I added only the one script to this page and am also concerned about this. As for the CSS that is because as of now I just cut/pasted the new themes and have yet to trim it - so that I am aware of and plan to correct.
As for the fixed format, that was put in to display correctly in IE. Obviously this is a mistake, but I am not sure where to start fixing it. This was done fix over fix over fix… While trying to work around the fixed placements of Magento. Help here would be greatly appreciated.
So what I did was change the <input id=“button4” class=“buttons” type=“image” value=“Stress” /> to <a id=“button4” href=“#” class=“buttons” value=“Stress” />Test</a> - This works in IE (with the script functioning as normal), but not FF or Chrome.
There has to be a better way to manage the picture elements that are coming up - as the script works fine in all browsers, just doesn’t display right…
How did you know the site is 1.1 MB as well as the number of files and the other stuff you specified (number and size of stylesheets, and number of validation errors, etc.)? YSlow? Firebug? Fiddler?
Web developer toolbar in FF, under tools -> document size
But be warned, that part of the toolbar, one of the few parts I use, stopped working as of FF 3.6, so you need to have 3.5.x or earlier to have it work; and sometimes it still drops the ball missing a few files nowadays. In newer versions of FF, it often fails to report about half the scripts and all of the CSS images… which is why the toolbar is pretty much useless in ‘modern’ browsers. (The ports to other browsers don’t even TRY)
When I’m back at my workstation I’ll post up a screencap.
