MindSuburbia

I’ve been writing in HTML for years and i saw the CSS upcoming as the Graal of all the web writers.

Even if most of the ppl can happily live without CSS, today it’s now a MUST. Unfortunately the browser war is coming to an endless point, where the equilibrium leads to the complete stall.
I don’t care about software wars: i’m just a web writer in need of having a decent presentation on both the browsers.

Many ppl have now been working with CCS, as they can easily get the theoretical separation data-presentation, and it seems they can live with that.

I can not. It is impossible to get a decent rendering of the page in both browsers
I’ve been browsing wordpress themes with alexking.org theme browser as i wanted a nice dark appearence for my blog (well it’s still not enough dark ). There i found some nice effects in the Stevish 2 theme. They are transparency PNG files rendering quite good (though i don’t like that theme).

A nice example of what can be done with CSS and transparency can be found at Zen Garden, where i found a really cool effect with transparency on the Infested example. If you’re looking at it: don’t you like the effect with the ants?

So i decided i had to use that transparency effect, when creating blocks in my pages.

Guess what? IE does not like those
Howtocreate.co.uk has a nice tutorial on Alpha Blending on web pages. There is explained how to fake IE5.5+ (> IE7) adding extra style commands and separating those, so that the CSS validates.

Guess what? Not working either! I had to merge Howtocreate.co.uk tutorial with the Stevish 2 theme and get everything working properly.

Well here is an example if you want to make it work properly:
suppose you want to make a div tag with a transparent background.

First, make a CSS class with the background set to an image (remember to set the width to the image width)
<style>
.mydiv {
width: 315px;
background: transparent url(/images/transparentimage.png)
left repeat-y;
}
</style>
<div class="mydiv">p;
content
</div>

Then insert an if statement with IE corrections


<!--[if IE]>
<!--[if gte IE 5.5]-->
<!--[if lt IE 7]-->
<style>
.mydiv {
position:relative; background-image: none;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( \
src='../images/ttop.png',sizingMethod='scale');
display: inline-block;
}
</style>
<!--[endif]-->
<!--[endif]-->
<!--[endif]-->


Remember:

• the background-image has to be set as none otherwise you’ll still see the non-transparent image
• use the sizingMethod=scale or the tag will probably have the wrong size

Now just add your other background(s) to the web page
And voila!