After trying to “hide my shame” [was it Zeldman that turned me on to CondComs with this phrase?] by using conditional comments for IE specific hacks, I’m now happier with the new and revised and reverted wisdom that throwing all your CSS code into a single style sheet is best.

I’d read Meiert’s «CondComs are bad» article ages ago but I was still a print designer by trade so the message went into a back drawer in my mind. It’s a good read on the cons and it’s updated too.

For a while I have found elegance in removing offending and non-valid CSS code to fix bug for IE, particularly as a way of dealing with proprietary MS code when incorporating PNGs with full alpha transparency into IE6. I’ve since moved away from trying to make png24 work with IE6; and then came the speed demons and calls from the gallery for fewer HTTP requests.

Avoid Extra Stylesheets

• Fewer HTTP requests = quicker site (particularly for the majority IE crowd that need the hacks)
• All code is kept together for easy reading. ‘Cos we al know that code is read more than it is written…
• And lastly; the typical, for me, extra-ordinary reason: no more 404 errors sent to me from my better 404 page indicating phantom strangeness for style-sheets linked to through conditional comments when there’s an .htaccess versioning rule.

Hide my shame.

The only reason I was still using conditional comments was because I had failed to find an IE-7-only selector hack. Thanks to Web Devout. Look there for the comprehensive list – for posterity I copy paste here:

CSS hacks in CSS Selectors

IE 6 and below
* html {}

IE 7 and below
*:first-child+html {} * html {}

IE 7 only
*:first-child+html {}

IE 7 and modern browsers only
html>body {}

Modern browsers only (not IE 7)
html>/**/body {}

Recent Opera versions 9 and below
html:first-child {}

Set width and height for the element/s containing the transparent background image [...] (also, bear in mind that the background images can no longer be tiled or positioned via ‘background-position’)

Apply  position: relative; to any contained links to ensure functionality

The first point means I’ll probably not bother trying to tile a drop-shadow background image to a variable length column again. Time to switch to progressive enhancement with Photoshop CS4/Fireworks/other tools’ ability to stuff alpha transparency into  regular PNG8 files.

The second point is probably the better answer to my last PNG problem post.

Main post about how to work with PNG24 alpha transparency and IE6 …

Here’s a bug I came across while working on the updated Solutions Overseas website. Not used position:fixed; in anger before. The “Enquire Now” button there is fixed. Except in IE7 though. Looked around and it’s apparently caused by a floated div next to a postion: fixed div (next to/child of parent etc… )

Simple fix – add another div around or between those two scrapping trouble makers.

Documented here.