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!

Ho scoperto un simpatico bloggher che scrive di ufologia. Addirittura fa una descrizione dettagliata degli ET. Effettivamente, per quanto interessante e dettagliata, non me la sento di andarmene in giro a propagandare queste teorie

Cmq complimenti per l’impegno!