IE7 div vertical-align problem

**reinholdmesner** · 09-21-2007 06:56 AM

Hello all

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!

HTML Code:

<html>
	<head>
		<style type="text/css">
			div.container{
				display: block;
				background-color: #c0c0c0;
			}
			div.image{
				display: inline;
			}
			div.image img{
				vertical-align: top;
			}
			div.label{
				vertical-align: bottom;
				display: inline;
				background-color: #ffffff;
				font-family: arial, helvetica, sans-serif;
				font-size: 8pt;
			}
		</style>
	</head>

	<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>

</html>

I'd like to retain the design (i.e. using a 'block' div container and 'inline' divs to wrap the images and the labels), and I can even use PHP and/or JavaScript to serve completely different pages to Firefox and IE, but my real problem is that I can't find any combination of vertical-align values to make this work in IE7!

Any help would be much appreciated!

reinholdmesner.

**Centauri** · 09-21-2007 10:08 AM

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.

**reinholdmesner** · 09-21-2007 11:14 AM

Thanks for the reply, Centauri, I'll certainly give that a go.

The trouble is, there will be a different number of images on any given row (remember this is a TreeView; some will be closed folders, open folders, plusses, minuses, lines and joins etc.), so I can't make them background images (also I'll eventually be adding JavaScript to some of the images' event handlers).

Any other ideas?

reinholdmesner.

**Webnerd** · 09-21-2007 11:17 AM

Try setting line-height properties in your CSS to 8px;

Thread: IE7 div vertical-align problem

Thread Tools

Display

IE7 div vertical-align problem

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions