I'm working on a PHP-generated HTML TreeView 'control' that needs to be compatible with (at least) IE7 and Firefox 2.
My TreeView isn't rendering properly on IE7, and I've simplified the problem in the example below. Basically, the vertical-align properties of the 'image' divs and 'label' divs are causing unwanted additional vertical space (about 2 pixels) between the images.
This is a screenshot from Firefox, which renders exactly as I want it (where the JPEGs are directly on top of each other with no grey gaps); and this is what IE7 gives me.
Please note: whitespace in the body screws up this design -- don't let anyone ever tell you whitespace doesn't matter!
This is much easier using semantically-correct markup - what you have there is a list. If it is marked up as such, the <li>s can be given a height and left padding, and the image can be applied as a background occupying the left padding area - total control without non-semantic images polluting the html.
Thanks for the reply, Centauri, I'll certainly give that a go.