IE8 line between div's

Hi all,

This is driving me bonkers - there a little line showing up between my divs and no amount of vertical-align:bottom in the CSS seems to fix it. Its perfect in all other browsers but IE. Any help would be greatly appreciated to perserve my sanity!:goof:

Cheers,
Orla

Website: http://hickson.ie/test

Relevant CSS:

#header {
	height:135px;
	width:auto;
	margin-right: 30px;
	vertical-align:bottom;
	border:none;
	vertical-align:bottom;
}

#hicksonSafetyLogo {
	height: 135px;
	width: 414px;
	background-image:url(../images/hicksonSafetyLogo.jpg);
	float: left;
	vertical-align:bottom;
}

#header #accred {
	height: 75px;
	width: 200px;
	float: right;
	padding-top: 5px;
	margin-right: -30px;
	margin-bottom:15px;
}

#header #accredText {
	font-size:.6em;
	text-align:left;
	padding-bottom:5px;
}

#header #accred a img {
	text-decoration: none;
	border-style: none;
	list-style: none;
}

#header #navBar {
	height: 40px;
	width: 445px;
	line-height: 40px;
	margin: 0;
	float:right;
	vertical-align:bottom;
}

#header #navBar a {
	text-decoration:none;
}

#header #navBar li {
	margin: 0;
	padding:0px;
	display:inline;
	float:left;
	width:87px;
	text-align:center;
}

#header #navBar li a:link, #header #navBar li a:visited{
	color:#333;
}

#header #navBar li a:hover{
	color:#F00;
}

#header #navBar li a:active{
	color:#CCC;
}


#header #navBar ul a.current{
	color:#CCC;
	background: url(../images/navBkgImg.gif) no-repeat right;
	display:block;
	cursor:default;
	vertical-align:bottom;
}

Hey there,
Very annoying indeed yes. There are various things which you are doing that are not ideal here. Personally, I would have avoided floating the elements in the header altogether and probably had one div with the safety services logo and the four accreditation logos all in one image set as that div background. You could ten have just nested the navmenu inside one header div but I am not telling you that you are wrong, everyone has to find their own way with css as that is the nature of the beast and there are many many ways!

Anyway for simplicity’s sake and to preserve your own design method, just alter the height in the below div to 134px and I think you’ll find your gap will disappear.

#header {
height:135px; ------ change to 134px
width:auto;
margin-right: 30px;
vertical-align:bottom;
border:none;
vertical-align:bottom;
}

:wink:

Thank you so much for coming back to me - that did sort it out though it caused a line where the logo was bigger than the div despite the fact that it was a background image! Reducing the size of the logo did nothing so I took it out of the stylesheet and inserted it in the actual div. After a bit of tinkering about it is finally working - Phew! Its amazing how something so small can take up so much time!

Thank you for your advice on my CSS too - I’ve a long way to go yet with it and am learning new bits every day. Delighted I found this forum to help me out with sticky bits like that!

Cheers Silver Surfer!

No problem, to be honest, I have only recently felt confident enough to start helping out other people myself. The memory of spending hours trying to move some silly box across a few pixels is all to fresh in my mind so I am pleased to be able to help. Good luck :wink: