IE7 div vertical-align problem
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!
font-family: arial, helvetica, sans-serif;
<body><div class="container"><div class="image"><img src="http://milkherder.co.uk/cvs/tree/images/home.gif" /></div><div class="label">One</div><br /><div class="image"><img src="http://milkherder.co.uk/cvs/tree/images/home.gif" /></div><div class="label">Two</div></div></body>
Any help would be much appreciated!
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.
Any other ideas?
Try setting line-height properties in your CSS to 8px;
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)