CSS and IE6


*Update*
I figured out the answer to the problem I was having during this post. The answer is IE6 was created by a Satan himself and for the low, low cost of one soul you too can guarantee that all of your CSS, Javascript, and angle-bracketed HTML hard-work will render as anticipated as it is delivered downstream to the hungry rendering engine created by Mr. Beezlebub. Simply deposit one soul into your USB port and click [send], or fill out a soul retrieval form and register for an authorized agent to pick up your soul at your local UPS store. All sales final. Tax, title, and tags are due at inception.

I don’t normally do front end weby stuff but eventually, working for a company like MapQuest, your gonna have ta’ do something that involves Internet Explorer. So today’s post is going to sound really stoopid to those of you who’ve dealt with the issues for the majority of your career, but for me… well I’m brand new so just be quiet, act like you never heard this stuff before and let me flow a minute. I’m working with CSS professionally for the first time now and I hit a snag with Internet Explorer. I’ve always heard horror stories about IE is so non-standard, Gecko, KHTML, Opera all follow the spec more closelier, yada-yada. When you do mostly rich client server Java stuff you get numb to the complainers. What whiners! Just use a layer of abstraction and interface or something and quit complaining will ya?

This past week I finally see why these babies cry so loudly. Trying to get some text to line up correctly in an already broken (well it looks broken to me but what do I know) layout has been such a chore. In recent findings I discovered the expression feature in Internet Explorer. You can, apparently, pass a Javascript expression in a stylesheet and have it evaluated as the page renders. I found this tip online and used it to address the missing support of min-width attributes in IE. It looks something like this:


p {
width:expression(document.body.clientWidth < 800? "800px": "auto" );
}

That sets a minimum width for a p tag. (Flip the alligator mouth the other way for max width.) I’m too stoopid to understand the ramifications of throwing Javascript into CSS (like what if the browser disables Javascript? Well the rest of our site kinda depends on it so I’m good there…) but experience will tell. If any of you gurus out there have styling experience give a bro. a shout, y’know? I can use a lot of help here.