My CSS Adventures Part 1

I meant to write this little post a long time ago but wasn’t sure how to start it or what exactly I wanted to share – or better – what is worth sharing.

I put a (Part 1) into the title as I plan to write a more in depth report of my experiences with CSS3, my new adopted baby.
For now I would like to focus on some tricks and caveats of CSS and especially the buggy workarounds for Microsofts Explorer series.
Which brings me on to another subject, but I just want to plead to Microsoft:  “Please never rename this Browser as this P.O.S (Piece Of Software) assists me in exploring the depths of my patience and mind! – Thank you!”.

Now on to the main issue here at hand.
Let’s start with the differences of Browsers.

All Browsers the common user works with are pretty much equal in capabilities and performance, only Microsofts brand is a bit more equal than the rest of them, as the Internet Explorer series of Browsers always needs special attention.
Internet Explorer reminds me of that kid in school which was not dumb,  but refused to learn and go with the curriculum and instead made up it’s own.
(In other words Internet Explorer is the Software Version of my younger self).
CSS and Web Development could be so much easier and more uniform if there wasn’t that little Rebel, but then…where would be all the fun ?
Let’s start with PNG support:

PNG has been around since 1995
Internet Explorer 6 has been around since 2001
so that would lead to believe that IE would fully support the PNG format, wrong!
A myriad of workarounds exist to make a PNG work with IE but they all require Microsofts own solution and break any validation.
Also most of the time we will find conditional Stylesheets depending on the Microsoft Browser version.
Not only does it create a lot of overhead but also the source code becomes cluttered. Anyone (Developer) had been in the situation where they had to modify a Site which was not written by them and then open the normal stylesheet, the ie stylesheet, the ie6 style sheet and the ie7 stylesheet.
Depending on the complexity of the site this can easily become a task in itself to wade through lines of lines of code.
I myself am guilty of such practice and sometimes it is necessary.
However, the more websites I am working on / developing,  the more I become a CSS purist.
In other words, try to use hacks where necessary within the same stylesheet and avoid 24-bit png graphics as much as possible as there are still plenty of IE6′s out there.
Now to the hacks:
they are great when only small portions of a style need to be fitted for IE’s such as height width properties.
As an example:
IE6 does not understand the min-height; but treats the height property as a min-height.
So if one would say “ok then I just use the height property” that would be wrong as other more advanced browsers would keep the height and do not expand the element even though the content requires much more height. So one way I use a hack within the same stylesheet it:

.class or #id {
min-height: 50px;
_height: 50px}

All serious Browsers ignore the property with an underscore; only IE6 will follow the underscore, IE7 and IE8 ignore the underscore as well (in some cases).
Also the underscore hack (yeah that’s what it’s called) can be used to make some minor changes thus overwriting the previous condition for IE6 only:

We have all been there: margins!!
The beast, IE has some issues with. As IE calculates the page slightly different than any other browser and with it screwing up the nice design and coding.

.class or #id {
margin-left: 10px;
_margin-left: 15px;}

All other browsers will make a left margin of 10 pixels while IE6 will render a 15px left margin.
Pretty much all CSS properties can be ‘underscored’ and made readable for IE6 only.
I would like to stress that this practice is only then useful when only a few properties within the element need to be adjusted.
If more complex adjustments are required a separate style sheet might be appropriate, we all want to have the code as much readable as possible, right ?

Short Summary:
The underscore hack is ignored by almost all other browsers, including IE7 and IE8 in parts and therefore only a reliable solution for IE6.

Now what about IE7 you might want to ask ?
There too is a little hack, just replace the underscore with a # and voila everything applies to IE6 AND IE7 – I personally have not thoroughly tested it with IE8 but if things don’t look right in IE8 but perfect in IE7 I usually force IE8 into IE7 mode with the little meta tag

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

However: I think we all should strive to code for the latest Browsers first and then consider the older browsers and not the other way around. With IE9 standing at the Doorsteps, who knows what all will be easier but then again more complicated due to hacks that need to be newly learned and are completely incompatible with any other version of IE.

Now why did I write so much about a so ‘trivial’ issue ? Well, so that the following little solution to a recent problem can easily be understood and followed:
Here is the situation:

I have a div (height x, width y) but I had to have a piece of text vertically centered.
Now with a table that would be an easy task… valign middle as the td attribute, BUT:  it does not work with block elements even though there is a CSS property of ‘vertical-align’.
Bummer, so now I had the option to pad the element to fake a vertically centered text, but what if the text get’s larger or lesser, the whole padding has to be reset.
Another alternative would be to make the entire thing an image and then put it in.
Drawback – huge image, requires reslicing if text changes and not very SEO friendly.

So then I came up with this one after some research on the Internet:

<div style="display: table; height: 500px;  #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div style=" #position: relative; #top: -50%">
          any text
          any content, for example generated from DB
          everything is vertically centered

Well, this concludes part 1 and other parts will come as soon as I have something worthwhile to share and as time permits.
Hope it was helpful to some and informative to others.


This is Awesome! Father and Son send iPhone into space

A father and son pair fixed up a weather ballon to send an iPhone into space to capture some really amazing video. It goes to show you that anything is possible with dedication.

Watch the whole video for the full effect!



Social Media Unraveled…Here’s What to Measure

Thanks to one of may favorite resource sites: econsultancy.com


The Zombie Network: Beware ‘Free Public WiFi’ by Travis Larchuk

A very interesting news article from NPR.org - Beware ‘Free Public WiFi’

October 9, 2010
by Travis Larchuk

It’s in your airports, your coffee shops and your libraries: “Free Public WiFi.”

Despite its enticing name, the network, available in thousands of locations across the United States, does not actually provide access to the Internet. But like a virus, it has spread — and may even be lurking on your computer right now.

Read more: http://www.npr.org/templates/story/story.php?storyId=130451369

Bottom line: Don’t get on this “wireless” network; and make sure you install recommended system updates.