I’ve been working on the content pages at work for the last few weeks, and it makes me wonder how people can work with CSS everyday without going bald (good thing I had already lost all of my hair). The inability to create a consistent user experience across web applications has got to be one of the largest dead weight losses in productivity and efficiency in the web industry. Not finding a solution for this, and a solution which is accepted industry wide, is just going to create a workplace for mediocre middle men whose sole purpose is to make sure that IE looks like Safari (or maybe I should say WebKit to include all WebKit based browsers) looks like FireFox. These people should not be in the industry because this problem should not exist in the industry.

(On a side note, this was a problem for Javascript, and the solution has been to build frameworks so that one isn’t working directly with the browser implementations themselves. I haven’t done the work to try and understand if there are CSS frameworks which mimic this, but please let me know if there are)

My specific problem was probably a bit of an extreme case. I often wonder when doing this work if there is a best practices to all of this, and if I’m just missing it. I’ve often made my way over to QuirksMode to see, but I’ve found that it’s often non-comital at best. But, back to the case at hand!

I was working on our new Platform page, and we were adding a call to action button (the Getting Started button that you see on the right hand side of the page). I have the image above it laid out in its own <div>, and I thought that I could put the call to action button underneath it, add appropriate padding, and the two columns which make up the content section of the page would be all lined up. Result…

Now that’s a surprise! I think the first thing that I needed to change was to set the image width and height explicitly instead of in the CSS selector. This helped things in IE, but ended up changing nothing for FireFox. Safari saw no difference. The irony of it all was that there’s no such thing as a FireFox specific stylesheet in our ecosystem.

I’m sure that if we were to do browser detection and build out a full HTML+CSS site, then we could do have a FireFox specific stylesheet for these nuances.

Nothing I tried using a two column layout worked. I finally ended up taking out the two buttons from the bottom of the content section, and creating a footer <div> which aligned the two buttons as we wanted. This was the cross-browser implementation that finally worked, but either my lack of knowledge or the quirks of an imperfect system really drove me batty on this one.