Setelah lama berkutat dengan transparansi, slicing design kali ini malah menghindari transparansi, yang berarti image nya harus dalam format standard: jpeg atau gif, dan tanpa css transparency sama sekali.

Saya mencoba pakai png dengan transparansi 50%, tapi tetap saya ada kendala dengan browser dengan berbagai macam standard dalam menangani png. Jadi saya memakai cara lain, yaitu dengan mengeset tinggi minimum untuk satu div supaya background image nya tidak terpotong.

Ternyata hanya dibutuhkan 3 baris css !! Dan.. bekerja di semua browser: Firefox 2, Firefox 3, IE6, IE7, IE8, Safari, Chrome, Opera. Sip !! Ini dia yang saya butuhkan.

Saya menemukan solusinya disini.

First things first. Use the “min-height” in your css like this:

.myDiver{
min-height:100px;
}

NEXT! Set the regular height to “auto” using the “!important” tag.

.myDiver{
min-height:100px;
height:auto !important;
}

LAST! Set the regular height (again) but to the minimum height.

.myDiver{
min-height:100px;
height:auto !important;
height:100px;
}

This will keep the div at 100px; and if the content inside of it extends beyond 100px, it will grow. This is true in ALL BROWSERS! Check out this example below:

sdf ffdsa fd
sdf ffdsa fd

sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd

sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd

Hebat yaaaa !! Menyelesaikan masalah saya dalam sekejap! Hanya dengan 3 baris code css !!