I recently blogged about this, but I figured I'd share my findings with everyone The first is a .png fix. Technically, it doesn’t fix .png files, but loads a gif if the browser viewing the site is Internet Explorer. Here is the code: background:url(image.png) no-repeat !important; background:url(image.gif) no-repeat; Code (markup): The next bit of code fixes the min-height property in IE: min-height:450px; height:auto !important; height:450px; Code (markup):
This "hack" is nothing new, but you should NOT be using hacks like !important to feed IE6 different values. This is a very "ugly" way of doing things that should be left to a seperate stylesheet for IE fed by conditional comments (and it makes your stylesheet a pain to read). And what if your PNG is very graphical, and the amount of color is too much for a GIF to handle? Very colorful and transparent, you would need to use the filter or the HTC instead of feed a GIF in most cases.
hmm im not seeing anything ugly about it. It looks EXACTLY the same now in Safari 2 and up, Opera 9, IE 6 and up, Firefox 1.5 + And filters aren't good to use. They don't validate.
You should not bloat your code JUST to feed ONE browser a different value. You should code according to the specifications, say that any rules with !important (with the same selector) should override normal rules (which IE6 fvcks up on). I guess you've never done any heavily graphical sites before, because if you did then you'd know a GIF will not always be the fix, and you have to resort to fixing PNG's in IE with the filter property one way or another (whether it be via Conditional Comments and filter or the behavior property and some HTC).
Well if Microsoft decided to maybe get better programmers, we wouldn't in this situation. As they take 5-6 years to output a new out of date version, which hardly fixes anything and gives web developers like us more crap to deal with. IE is something real and has to be dealt with one way or another. Simply saying it 'looks ugly' won't solve the problem. A solution or hack needs to be implemented, otherwise your sacrificing good code for a crappy looking website. I don't know about you, but I would rather have crappy code then a crappy looking website. And what's the big deal if the filter doesn't validate? Are there validation police going around killing people using invalid code? As long as the end result, which is appearing correctly on all known browsers if fine, then what's the problem?
The solution is not to pollute your stylesheet which should go by the specs, with proprietary junk and unnecessary hacks. "Crappy Looking" depends solely on the DESIGN. If you're talking about layout/position problems then that won't happen if you're feeding an IE stylesheet with CC's. So you get both: good looking, hack+bug free code and (hopefully) a good looking (no layout problems due to not using hacks because you're overriding them in the IE stylesheet) site in IE.
I totally agree with what you said. And as far as validation I only included that because I wanted my site (that I was refering to) to be in css galleries. Some of which you need valid code to be in.