How are you feeling? How was your New Years? Probably a bit lonely I expect, what with people deserting you left and right for your ritzy sibling, IE7, or some of the even more attractive kids on the block like Firefox, Safari and Opera. I know we’ve spent a lot of time together, you and I, but it’s time that I told you something that’s been on my mind for a while.

I don’t think we should see each other any more.

I’m not going to go easy and tell you “it’s not you, it’s me,” because that’s just not true. At all. It is you. It absolutely is you. And I know I’m not the only one that feels this way. Along with thousands of other developers, I’ve spent hour upon hour, day upon day catering to your DOMands and have had my efforts rendered amok. I can’t take it any more.

We developers deserve better than you. We deserve browsers that can render a document according to the standards that have been in place for years now. We deserve browsers that can handle opacity properly, via CSS and via those wonderful image files that you so happily destroy – PNGs. We deserve CSS3 support, and we deserve to not have to add hacks or additional stylesheets to cater to your every desire.

You’ve controlled our lives for far too long as it is, and it’s time we took a stand against you. This may come as a shock to you, but we don’t like you. We haven’t for a long time. The only reason we even spend time with you any more is because there are a lot of people out there who don’t know any better, who haven’t met your alternatives to see how much better their lives could be. They still see you as their window to the Internet, and so begrudgingly, we come back to you, time and again, spend another sleepless night, trying to please you with just the right combination of CSS hacks and dumbed-down layout.

Well, not me. Not anymore.

You’re on your own IE6. I’m through with you. Unless someone specifically forces me to ensure that something works for you, I will no longer waste my energy on you. They’ll have to pay me to do it as well. I hope that makes you feel dirty. God knows you’ve made me feel dirty for long enough.

Yours in disgust,

Beau Lebens

Napoleon Syndrome

Apparently Internet Explorer has a problem with its height. All too often, it needs to be told how tall a block element is just to render it remotely properly. Personally I like to tease IE with the fact, taunting it about its height issues by applying the smallest height property I can. The fix here is just to apply:

height: 1%;

to block elements that are having trouble rendering properly (or at all) and they seem to come back to life. This is generally referred to as the “Holly Hack” (look for that title). You may also choose to assign a specific pixel height or something else more indicative, but I don’t like to give IE the satisfaction of making me figure that out.

Put IE in position

You’d be surprised how many floating/positioning problems can be fixed by simply adding

position: relative;

to a CSS definition. Try it. It especially comes in handy when you’ve got overflow defined on some elements, as described by Jonathan Snook over at snook.ca (sexy site BTW).

Broken CSS Attribute Parsing is Your Friend!

The last pair of hacks come care of Internet Exploder’s broken CSS parsing, which does/doesn’t recognize certain attributes, despite their invalid definition. I specifically like the way that this brokenness can be “stacked” to achieve different results in different browsers. An example:

#crazy-div {
position: relative;
left: 0px;
_left: 100px;
*left: 200px;
}

What’s up with all the * and _ business you ask? Well it turns out that those characters are basically ignored by IE, so it will take those rules into account, even though Real Browsers won’t. So that set of rules goes something like this:

1. position: relative; everyone understands and applies this.
2. left: 0px; all browsers get this as well, so it’s applied across the board.
3. _left: 200px; This is the Underscore Hack, which IE 5+ will render properly (IE 7 managed to fix this one), so IE 5 + 6 will move #crazy-div over 100px.
4. *left: 100px; Internet Explorer 7 (only) will ignore the asterisk and render this rule, so #crazy-div will be shifted 200px.

So there you have a decent way to get a set of rules in place that will allow you to target certain (lame) browsers and fix up some of their rendering and positioning problems. I’m sorry that you’ll need to use these hacks, but the Internet is a messy place

I found a great breakdown over at quirksmode.org, but it didn’t actually work in Safari (2.0.2), so I found that out pretty quickly, because that’s what I’m working in. After a little playing around, I came up with the following modifications, which calculates the amount of chrome visible in the currrent window, and then takes that into account when resizing the entire window size.

I haven’t tested this on too much other than Safari and Firefox on a Mac, but I think it should be reasonably compatible with others.

// Viewable size you want once resized
x = 600;
y = 400;

// Now set the window size for different browser types
// all except Explorer
if (self.innerHeight) {
	// Figure out the measurements
	iX = self.innerWidth;
	iY = self.innerHeight;
	oX = self.outerWidth;
	oY = self.outerHeight;

	// And resize to match the desired target
	gX = oX - iX;
	gY = oY - iY;
	window.resizeTo(x + gX, y + gY)
}
// Explorer 6 Strict Mode
else if (document.documentElement && document.documentElement.clientHeight) {
	document.documentElement.clientWidth = x;
	document.documentElement.clientHeight = y;
}
// other Explorers
else if (document.body) {
	document.body.clientWidth = x;
	document.body.clientHeight = y;
}