Dejan Cancarevic sort of whispered this to me and I’m whispering it to you in return. I guarantee personally that these hacks are really among the BEST hacks I’ve tried so far. They made my pages quite amazing and I want yours to be the same too. So, without further ado, go get mouse right on gear and copy this stuff.

1. Vertical align div

Idea is to place absolute div 50% left and top and then to move margin left and top half if it’s size.

.wrapper {width: 100px;height: 100px;position: absolute;top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;}

Problem?

This works only with defined height and when div height is less then browser height so you can’t have scroll.

Solution

<div id=”shim”/></div><div id=”wrapper”>Content</div>html, body {height: 100%;margin: 0;padding: 0;

}

* {

margin:0px auto;

padding:0;

}

div#shim {

visibility: hidden;

width: 100%;

height: 50%;

margin-top: -200px;

float: left;

}

div#wrapper {

width: 1000px;

height: 400px;

clear: both;

background:red;

position: relative;

top: -200px;

/* IE4ever Hack: Hide from IE4 **/

position: static;

/** end hack */

}

/* Hide from IE5mac \*//*/

div#shim {

display: none;

}

html, body {

height: auto;

}

/* end hack */</font>

Check it out real-time at http://stylizedweb.com/2008/02/01/vertical-align-div/.

2. Min-Height

selector {

min-height:500px;

height:auto; !important

height:500px;

}

3. PNG transparency

<!–[if lt IE 7.]>

<script defer type=”text/javascript” src=”pngfix.js”></script>

<![endif]–>

Second sample…

.someelement {

background-image: url(images/image.png);

}

* html .someelemen {

background-color: #333;

back\ground-color: transparent;

background-image: url(images/blank.gif);

filter: progid:DXImageTransform.Microsoft.

AlphaImageLoader(src=”images/image.png”, sizingMethod=”scale”);

}

See more about PNG Transparency at http://stylizedweb.com/2007/12/30/png-transparency-issues/.

Tags: CSS Hacks for You! (First Serving)