Pest control

10 December 2003


A Blue Perspective: Pest control

After all the useful feedback I received from people regarding the rendering of this site in various browsers, I entered bug-fix overdrive during the past couple of days and am now pleased to say that this site should now render fine in all the major browsers (that I could get my hands on): IE 6, IE 5.5, IE 5.2 (Mac), Safari, Mozilla 1.5, Firebird 0.7, Netscape 7, Netscape 6, Opera 7.23.

Technical breakdown

Probably the biggest display problem was IE 5.2 on the Mac. This occurred where I had elements using image replacement and which the browser thought were "empty", therefore it ignored the height for the element and displayed successive content on top of it. To get around this I had to touch the actual HTML and added a non-breaking space inside the element, while making the text size zero in the CSS — content which you can't see and which doesn't affect the size of the element, but which makes it non-empty.

In Mozilla/Netscape display problems occurred when using the text resize buttons. I get the feeling that it's a bug in Mozilla's code, as every other browser resized them fine (or perhaps its just a different interpretation of the standards), but to placate all the Mozilla users, I decided to fix it. The bug occurred for absolutely positioned elements: when the text size changed, Mozilla didn't re-calculate the containing element's width/height, so any text in an absolutely position element busted out of its container when it grew larger. I solved this by changing the absolutely positioned elements to floated, relative elements. These are generally "nicer" than absolute elements anyway, and I can't remember why they were absolute in the first place (although some display problems in IE 6 ring a bell). No changes to the HTML were required, it was a pure CSS fix-up. This also had the added side-effect of fixing the "cracks" at the bottom of the page in Opera!

Lastly, there were a couple of display issues in the IEs. Tiny cosmetic things i.e. out by a couple of pixels, but they irked me enough to change them. These sorts of problems are perfect for using CSS Hacks: they allow you to target CSS rules at exactly the browsers you want and leave out the rest. Generally, I don't like this way of coding, as it means your code becomes less general and harder to maintain, but given the frozen development of Internet Explorer at the moment, it seems OK to do it for those browsers. I found a wonderful page at centricle that has a complete table of all the browsers and an extensive list of hacks, so all you have to do is locate the browsers you're trying to circumvent/include, then zip across to find the appropriate hack. Then, by defining a CSS rule, then hiding its replacement from certain browsers by using a hack, you can define different rules for different browsers!

Of course, after having done all this, some people will e-mail me saying X doesn't display in Y on Z, and I'll have to give them a ticket and tell them to stand in line. But in the meantime, enjoy!


, ,


  1. 1/2

    Moose commented on 16 December 2003 @ 20:49

    The Centricle hacks page (and all others I have seen) doesn't make a distinction for MIME types.

    I have just found, to my great disappointment, that the incredibly useful html[xmlns] hack no longer works if the document is sent as application/xhtml+xml .

    It was the single most useful thing I used to specify CSS crutches for Mozilla clones and Safari if they couldn't render something for some reason. Now, I'm at a loss.

    It might be useful to test in all relevant scenarios, but who has the time, or interest? :)

    regards to the Man in BLUE,


    Best Linear Unbiased Estimator:


  2. 2/2

    Cameron commented on 16 December 2003 @ 22:32

    I've found that Safari and Mozilla seem to have pretty good standards support, and you're safest coding for those, then fixing any bugs in other browsers.

    Considering all the hacks available for IE (which is the main competition) you can then take your pick as to how you want to get around the bugs. Hacks like the slash comments, esoteric selectors, etc shouldn't be affected by MIME should they?


    Barest Level of Unenthusiastic Emotion

  3. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed