I’m putting together a new look for this blog, it’s a much needed 2010 refresh, the current design is from 2006.

An element of the new design uses a semi-transparent opacity. Not a problem in Firefox, Chrome or Safari. This shouldn’t be a problem even in IE7 but Microsoft saw fit to screw IE over once again and break CSS opacity styling with IE8. I’m possibly in a worse case scenario, using absolute positioned divs, initially set with display: none.

I’ve tried all the recommended approaches without success.

position: absolute;
background-color: black; /* for IE */
background: rgba(0,0,0,0.7);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);

I’ve tried other combinations too including the method on W3 Schools, which works when I view it in IE8 (but doesn’t on my site).

opacity:0.4; /* effects other browsers */
filter: alpha(opacity=60);

I guess if I don’t resort to a transparent PNG/GIF background, my new design will have to look a little ugly in IE8.

For now I’ve ripped out all the IE specific CSS attributes, at present IE accounts for < 5% of traffic on my blog. I’m not sure it’s worth the effort, as this is due to change with IE9 (fingers crossed on CSS3 support).

Having spent this weekend tidying up the appearance of my blog it’s bought back not-so-fond memories from my web designer days of “the eternal struggle with browser compliance“. I seriously thought come 2006 CSS support would have been nailed.

I can forgive MS with IE6 being a dinosaur. However even with the CSS hacks I had to implement to get the search form (top right) to align correctly – I find IE7 & Firefox 1.5 still dispute the vertical alignment. Sigh. One of them is wrong, I don’t know which though!
Update: I managed to fix this after approaching the layout differently!

The same goes for padding on the header image, this time Opera 9, Firefox and IE7 show additional space which IE6 doesn’t. Now I’d never normally side with IE6 but I can’t work out where this extra padding/margin is coming from…
Update: After e-mailing John at positioniseverything.com turns out it’s a baseline gap