Skip to content

Teguh Eko Budiarto

Web Programming and Sharing Experience

Archive

Category: CSS

CSSTidy is the best tool to optimize your css code. However, due to development of CSS3 nowadays, there are already some property are not being converted properly. One of them is the gradient feature.

Timothée Carry-Caignon had a patch already for the PHP code, but I am using the executable files to generate it on the fly with django-compress extension. Therefore, I tried to give it a shot on the C++ source code.

To make it short, here you can find the csstidy1.3.patch file. Apply it against the original source code by Florian Schmitz (the original CSSTidy author) from sourceforge.

After that, you can compile it using below command:
g++ *.cpp -o csstidy

I hope you guys find it useful, cheers!

I spent couple of hours to find the solution of this bug, so I just post it here hope it can help somebody else. Btw, the IE version was 8 in windows XP environment.

The problem is introduced here http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html

and here
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

Some of the solutions proposed are here:
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
http://systembash.com/content/css-z-index-internet-explorer/

(try to open those pages in IE and FF / Chrome to compare)

What really worked for me was the combination of two solution above, set position:relative to the containing divs and give each containing div higher value of z-index of the contained one.

Case example :

1
2
3
4
5
6
7
8
9
10
<div style="z-index:5; position:relative">
    <div style="z-index:4">
        <div style="z-index:3">
        </div>
    </div>
</div>
<div style="z-index:2; position:relative">
    <div style="z-index:1">
    </div>
</div>

For the code above, we should be able to see the div with z-index 3 on top of the divs positioned after it (z-index 2 and 1).