Another bit of CSS I've not quite got to grips with. I've used a div as a sort of 'title bar' for each box on a page and another div below it as the box. I've got a span floated to the right in the title bar that contains a little image. Because of this I've set the height of the title bar div to 25px so that the image remains within the div. As soon as I set this though IE5.5/win narrows the title bar div by about 3 pixels. Works fine in Opera and Moz. Not setting the height aligns everything fine.

The bit I'm talking about are the smaller boxes on the right of the page: http://www.scottishclimbs.com/dev/index_n.php

Here's the css:

Code:
div.right-box-top {
		margin: 0px 5px 0px 3px;
		background-color: #6088c4;
		border-right: 1px solid #000;
		border-left: 1px solid #000;
		border-top: 1px solid #000;
		height: 25px; /* why does this mess up in IE 5.5? */
		}

span.box-icon {
		float: right;
		width: 30px;
  		text-align: right;
		padding: 3px;
		}
and here's a box:

Code:
<div class="right-box-top"><span class="box-icon"><img src="threads_icon.gif" alt="Guide Icon" title="Guide Icon" /></span><h1>Last 5 Routes</h1></div>
<div class="right-box">
	<ol>
		<li><a href="a.htm">Brain Drain</a> <span class="date">(Font 7B)</span></li>
		<li><a href="">Nick Tait</a> <span class="date">(E1)</span></li>
		<li><a href="">Happy Birthday Mr President</a> <span class="date">(Font 7C)</span></li>
		<li><a href="b.htm">Lookin Down a Barrel</a> <span class="date">(Font 6C)</span></li>
		<li><a href="poo.htm">Brains, Shoulders, Knees and Toes</a> <span class="date">(Font 6A)</span></li>
	</ol>
</div>
Any clues why the height should affect this? Hope this is clear.