Monday, September 11, 2006

Surely you mean Firefox?

Jon Tweedy has a funny pie chart on his blog today about the time allocated to various activities in the life-cycle of designing a webpage. Of course, it's a Microsoft joke, and the lion's share of the pie is taken up by "Time spent trying to get the bastard to work in Internet Explorer."

First my list of disclaimers. I'm nobody's idea of a "professional" web developer - or even anyone's idea of a "web developer," for that matter. I run my blog on pre-fab Blogger software, and although I've handcoded all of the handful of pages I've ever made otherwise, it really is only a handful. I've never had to deal with anything truly complicated, abide by corporate standards, etc. Also, I dislike Microsoft as much as the next guy. I run Fedora Core 5 on my desktop, use a G4 Powerbook laptop in class, do all my "word processing" and slide construction in LaTeX, my notetaking in Vim, webbrowsing in Camino, Opera and Firefox, etc. In fact, now that Mac doesn't really support Internet Explorer anymore, I think it's fair to say that I don't use any Microsoft products at all. Finally, since I don't (exactly) have IE, as I said, I didn't actually test the pages I designed for my class in it.

That all said, I have to say I had a lot of trouble getting the class pages to look right in Firefox. Camino and Opera worked brilliantly. It was straight-ahead Firefox - the "other" browser - that gave me all the trouble. It was because of Firefox, for example, that my Class Schedule page ended up being designed the way it was. Something about the way Firefox handles the "float" style parameter just wasn't working out, and the result is the slightly-less intuitive code I ended up with. While the original version displayed just fine in Camino and Opera, in Firefox the time and class elements wouldn't sit on the same line (not exactly) and sometimes overlapped, one obscuring the other. It didn't take too long to figure it out - but I just sort of wondered whether Firefox isn't a headache too?

Of course, Firefox is free and open source, so picking on it isn't as funny as picking on Internet Explorer. I say that with no sarcasm whatever: when someone gives you something for free, you have less motivation to complain about it than you do when someone charges you for it (though I understand there are interesting psychological experiments that show that sometimes forcing someone to pay for a thing can improve his evaluation of it). Also, since IE has by far the most marketshare, I guess there's not as much pressure to make things Firefox-compliant.

Still, I can't help wondering that, emotional baggage aside, is IE really the hardest browser to code for?


At 6:26 AM, Blogger Jon said...

Actually the pie chart was just a general joke about how much time is actually spent designing a concept (or in my case doing any serious programming behind the scenes) vs. how much is dealing with formatting, standards and variable browsers.

Anyway I've had similar problems with Firefox (indeed, the floating). CSS itself (at least CSS 2, which is as much as you can safely use... 3's on its way into the arena, but not a reliable standard) lacks a lot of important layout definitions (particularly having to do with alignment and spacing - why can't you use combos of % and px to get exact-ish positioning? why can't you vertically align in DIVs?... etc).

While Firefox properly handles margins and padding (i.e. if you pad something, it makes its content stand away from the edges, but doesn't increase the object's width), Explorer actually increases the width of the entire object. It's not noticeable in many situations, but if you have an item whose width needs to stay the same for the layout to work, it screws up in IE. You have to use an extra DIV and give it a margin inside of the element that should have been padded instead.

The problem is the Firefox handles some layout aspects like float 'wrong' (in that I feel it's not intuitive), and IE handles things like padding and margins 'wrong', so I'm at a lost with both sometimes unless I use embedded divs and semi-absolute layouts to cheat a little.

For a fun yet frustrating exercise, try designing a three-column layout using CSS and DIVs instead of tables.

(Here's a page that discusses the solution.)

Also fun: check out for proof that amazing CSS/DIV-based layouts are possible across browsers.

At 11:59 AM, Blogger Jon said...

(Oh, and btw: my link is there's no 'weblog' subdirectory on my site.)

At 2:56 PM, Blogger Joshua said...

HA! Sorry about the link to your blog. I thought I had tested that and found a "weblog" subdirectory - but as you say, the link is broken. I'll fix it immediately.

Yes, I only recently started using DIVs and CSS rather than straight-ahead tables - that's what caught my eye about your pie chart. It was because DIVs were so frustrating in Firefox. Of course, I have no way of testing things on IE- but the mismatches between IE and Firefox you describe sound like a GIANT pain.


Post a Comment

<< Home