I develop XHTML/CSS primarily in Firefox, followed by testing in tweaks in other browsers. Apart from Firefox being my primary browser anyway, most of the reason for this is that there are some tools for it that have become as essential to me as my text editor (these days, that’s TopStyle). This handy trio are:

• Firebug - simply incredible
• Web Developer Toolbar - still very valuable, with some great little features
• ColorZilla - a good colour picker, plus some things that the others do, but slightly quicker to access

This is all great. However, more often than not, the times when you really need this sort of stuff is in Internet Explorer - especially pre-7 versions.

I’ve not had much luck in IE 6 with the Firebug Lite implementation. I have just come across a good bookmarklet called XRAY. Compared to the Swiss Army Knives above, it’s very basic, but it provides key information about page elements that can really speed debugging along.

A small but infuriating CSS bug in IE… No shit.

I’m creating a box with rounded corners around some content using my usual method:

• Place empty <div>s with ids above and below the content <div>
• Create background images for the top and bottom of the box <div>s, and put them in (with fixed width and height for the <div>) with CSS
• Continue the border along either side of the content <div> with CSS borders

All well and good. Only, on IE6/Win, the top <div> wouldn’t shrink to less than about 16px, leaving a gap of whitespace below the 8px high background image.

After much searching, I found a workaround buried in the life-saving Explorer Exposed pages. You can read about the ins and outs over there; here you’re just going to get a nice quick fix.

Put this in the CSS rule for the <div>:

overflow: hidden;