http://www.firshman.co.uk/st-peters-church/

I am getting a gap on between the two header sections in only IE it seems.

The relevant parts:

#topleft {
	float: left;
	width: 150px;
	background-color: #0099FF;
	height: 90px;
	text-align: center;
}

#title {
	background-color: #0099FF;
	height: 90px;
	text-align: center;
	margin-left: 0px;
}

<div id="topleft">
	<img src="images/keys2.jpg" alt="" /></div>
	
<div id="title">
	<img src="images/banner6.jpg" alt="The Parish of St Peter with All Saints', Berkhamsted, England" /></div>

Any idea what is wrong?

Have you tried it without your navigation bar? It looks (if I stare very intently) as though the image in your toolbar is slightly wider than your topleftp div. Is that so? If it is, that could have an effect.

Other than that, I see now reason for the gap. The only other thing I would offer to you is that since all that content is itself in one large rectangle, so to speak, why not put it all in one div? Or as a single image?