www.webdeveloper.com
Results 1 to 4 of 4

Thread: IE7 div vertical-align problem

  1. #1
    Join Date
    Sep 2007
    Posts
    7

    IE7 div vertical-align problem

    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.

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    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.

  3. #3
    Join Date
    Sep 2007
    Posts
    7
    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.

  4. #4
    Join Date
    Jul 2005
    Location
    USA
    Posts
    912
    Try setting line-height properties in your CSS to 8px;

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles