Web Standards Group - WSG

Home - WSG interviews

Ten questions for John Gallant (Big John)


Big John

In his own words, John Gallant (Big John) is "a middle-aged single guy who took up web design a few years ago as a hobby, and discovered my life's true work. One thing led to another, and now I'm supposed to be some kind of css guru."

John, along with Holly Bergevin, is responsible for the widely acclaimed Position Is Everything (PIE), which explains some obtuse CSS bugs, provides demo examples of interesting CSS behaviors, and shows how to 'make it work' without using tables. John is also active on the css-discuss mail list, helping people with their CSS related problems.

[1] Russ: You claim to be a "pool repair man" and yet you are one of the best known CSS bug hunters around. How did you get into CSS?

John: Back around 2000 or so, I was getting tired of boring tech labor, and my smarter brother insisted there were obscene profits to be made in computing. Well! I went ahead and taught myself HTML off the venerable "HTML Goodies" teaching site. Started by hand-coding tables at first. It was great fun, but something seemed vaguely "wrong".

Soon I heard about CSS, which I instantly recognized was the logical way to style HTML. My mood improved at once.

Luckily I was never forced to rely on tables, thus I lack the aversion so many others harbor toward tables. I can take 'em or leave 'em. As for font tags, I never wrote a single one. What a lucky escape!

Just lately I have finally "gone pro" on the web, so no more pushing a pole in a pool for me!

[2] Russ: What led you to become obsessed with CSS bug hunting?

John: Puzzle solving always held a unique fascination, particularly spatial puzzles. I view a CSS problem as a challenge to be dissected. In fact, some CSS bugs have provided the nastiest puzzles I ever encountered, requiring a multi-discipline approach combined with an almost insane focus on tiny details.

[3] Russ: You seem to spend a huge amount of time helping others with their css problems - especially on lists like css-discuss. Do you ever get tired of it?

John: Not really, but I've had to become more selective lately. I stayed in the "amateur" class for years, giving me more leisure to create my "legend" (ha), but alas, new goals and new commitments have taken over much free time. I still try to make the occasional css-discuss post, but only when it's a toughie that others overlook.

[4] Russ: A while ago you have outlined a four-step process for bug hunting. Do you still believe this is the best method?

John: Yes. I use it every time a problem arises that I can't immediately solve. That troubleshooting technique isn't my invention, but I did refine it specifically for CSS. Others also ended up doing the same things around the same time, but as they were mostly in great demand elsewhere, it fell to me to compose a treatise on the subject.

"Mystery Bug" was actually written in response to a group request from Eric Meyer for some "startup" content on the just beginning css-discuss Wiki. That, and a bare bones box model page were my only serious contributions. I'm sure glad to see others have continued to improve that superb CSS resource. I use it on a regular basis. Thanks guys!

[5] Russ: How do you track down bugs that are caused by a relationship between two css rules rather than a single css rule?

John: I cuss a lot. When I find out that it's just a stylesheet conflict, I cuss even more, because I ought to know better. Usually I waste considerable time trying to isolate a "real" bug when the answer is staring me in the face. I'm sure all experienced CSS coders are nodding their heads right now.

Sometimes two rules really will conspire to create havoc, and those can be real toughies to solve. But there are so many ways to go wrong in CSS, even aside from actual bugs, that no single method will ever work for all problems. That's why I wrote "Mystery Bug", to teach skills that can solve problems in general.

[6] Russ: What was the most satisfying bug you have found and documented?

John: That would be the first one. Eric Meyer had a neat "Boxpunch" method using floating and negative margining, but Explorer was not showing the critical part of the float that was negatively margined out of the container.

Nothing seemed to help, so I tried relative positioning along with a shift, instead of the margining, which worked in Explorer but failed in other browsers. Then something clicked in my head. Why not do both? Couldn't hurt to try.

Well, it didn't line up correctly, but I noticed a difference in Explorer. The missing part of the float was now visible! After frantic testing I discovered that the relative positioning was letting the negatively margined portion show while outside the container. The positioning itself had "fixed" the Explorer margin bug. I basically went nuts at that point.

I'm not a real confident guy, so it was a struggle to accept that I had actually done this. I sure wanted to, though, so I wrote a very casual post on css-discuss, mentioning that the bug seemed to be fixed. The response was so positive and gratifying that I'm afraid it imprinted the words "Bug Hunter" on my forehead permanently.

After that there was no going back. I HAD to solve every tough bug that came along, and began making demos to prove my points. They had to go somewhere, so PIE was born.

A little later, Holly Bergevin asked me to demo the "Source ordered cols" concept, so I rooked her into helping. To my surprise Holly is a really sharp bug hunter too, and at the present time she edits CSS articles I'm currently writing. She catches most all my errors and generally turns my weak stuff into a thing of beauty.

The well-known Holly hack was invented by this same Holly Bergevin. She prefers to stay out of the spotlight, so I had to insist we call it the "Holly hack", over her objections I might add. Unknown to us, Doug Bowman had also come up with the idea, but as he had not yet published it I was able to affix Holly's name to the hack. Anyway, it sounds so much better than "The IE-improper-box-enlarging-to-trigger-layout hack". Oy.

[7] Russ: Are there any major layout bugs left to document?

John: Probably not, although I have been burned thinking this before. Of course we do have the MS "Longhorn" browser on its way, no doubt with a fresh new crop of "bugs". I can hardly wait.

[8] Russ: You have done a range of css-driven page layout demo's. Which would you say is your favourite three column CSS solution?

John: I like the all-floated cols approach best, because it avoids the major Explorer misbehaviors, because it is conducive to source ordering, and because it can't overrun the footer like absolute cols can. People fear floated col layouts, but if all the cols are floats it actually gets easier, not harder. Explorer can still act up, but can also be bludgeoned back into line.

[9] Russ: If you were asked to convert an existing design (like a graphic mockup) into a full css layout, how would you go about it?

John: Since the various CSS options are very familiar to me, it's a matter of juggling page elements in "thought experiments", trying it this way and that. After thinking it over, I'll try some simple mockups to find out about any "issues" that crop up in different browsers.

Only after a workable layout has been found will I get more serious about it. Most of the problems I see with non-newbie layouts are caused by unworkable arrangements. Unfortunately, many times such "bad" design is really due to Explorer's failure to correctly obey the CSS specs.

A full understanding of what IE does wrong is just as important as learning the CSS specs, if one is to avoid getting trapped into flawed layout construction.

However, even this might not be enough, as some perfectly good layouts can develop problems when more stuff gets added. Usually IE is to blame, but not always. The hardest of these issues occur only when pages are served remotely, suggesting timing issues, a very thorny area.

Recently I used Andrew Clover's JS method for making IE support the CSS property "min-width", and a "served-only" bug popped up. I adjusted the JS's width check rate and the bug went away. Weird, and kinda hard to document too, since these timing bugs can be intermittent and choosy about the OS's they inhabit.

[10] Russ: Finally, do you use a particular browser for initial building and testing?

John: I use Opera 7, with occasional checks in Firefox and Explorer. Starting out in IE and later moving to the others is a sure way to go bonkers, but it does help to know what IE just refuses to do correctly, so you can steer away from those designs from the outset.

My favorite browser is Op7, but Firefox is looking really good these days, so it's becoming a toss-up between them, IMO. I don't own a Mac, so those browsers are unknown to me.

Russ: Thanks for the interview, John!
John: Thanks for letting me up on your soapbox, Russ. Hope I didn't bore the crowd too much.

Copyright © Web Standards Group 2012