Problem with display between FF1.5 and IE6

I'm having an issue with trying to get my background images to display right in a new site I'm building.

The site is: http://www.qh-mail.com/

As you can see, in Firefox, nothing's wrong with the layout (I hope :eek: !)

In IE6, it drops a gap between the background images of the header section and the remainder of the content below. It's about 2px.

I've been tearing my hair out trying to fix the problem. I had the problem once before and solved it, made a few changes to other areas of the site, cam back to it today (about a week later) and realised that the problem has redeveloped.

Check the page source out and the following is the relevant section of my css file:

table.info {
padding: 5px 5px 5px 5px;
background-color: White;
border-style: solid;
border-color: Black;
text-align: justify;
border-width: 1px;
vertical-align: top;
}

/* This is for the main text table, not the info */
table.main {
padding: 0px;
background-color: white;
vertical-align: top;
border: none;
}

td.logo {
background: url('../images/logo_ban.gif') no-repeat;
border: none;
padding: 0px 0px 0px 0px;
text-align: left;
height: 111px;
}

td.banner {
background: url('../images/right_ban.gif') no-repeat;
border: none;
padding: 0px 0px 0px 0px;
text-align: right;
vertical-align: bottom;
height: 111px;
}

td.spacer {
border: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
height: 29px;
width: 100%;
}

td.t_nav {
border: none;
padding: 0px 0px 0px 0px;
text-align: center;
width: 100px;
height: 28px;
}

a.t_nav:link, a.t_nav:visited {
display: block;
background: url(../images/nav_button.gif) no-repeat;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #00008B;
text-align: center;
padding-top: 7px;
height: 21px;
width: 100px;
text-decoration: none;
}

a.t_nav:hover {
background-position: 0px -28px;
text-decoration: none;
color: #191970;
}

td.top {
vertical-align: top;
}

Any suggestions? That is, apart from a big hammer? :(

Give this a shot for your img in question.td.logo img {display: block;}
Let me know if that helps.

Worked spot on? Why was that the solution? Was the image (in front of the background) causing the problem?

Thanks for your help Reinspire.

Did it work or did it just resize the image? ;)
IE has a whitespace bug. It will read whitespace as extra line breaks sometimes. The solution is to keep your opening and closing tags on the same lin.
<td class="logo" width="170px"><a href="http://www.qh-mail.com/"><img src="http://www.qh-mail.com/images/logo_ban.gif" alt="QH Mail Logo" /></a></td>
Now you shouldn't need display:block; for that image. When an element is set to display:block it will resize to fit its containing element. Also when defining widths and heights in html you don't need to put the units, the default unit is pixels so adding px is redundant. Another possible solution would be to set the font-size for that cell to 1px and setting the line-height to 0px

I don't think it resized it, but the gap was only about two pixels wide. It seems to be identical to the image below, nothing to tell that it's resized it.

I'll bear the keeping it on the same line bit in mind when I update the code.

It's a pain IE6. They say that the IE7 will be better, but we'll have to wait and see.
Also when defining widths and heights in html you don't need to put the units, the default unit is pixels so adding px is redundant.
Wasn't aware of that. I'll keep that in mind. I'll have a play with the site over the next couple of days and try those commments and see if that solves the problem.

Thanks _Aerospace_Eng_. :D

My only question is this...

Why are you using the same image for your TD background and inserting it as content inside the td ? (<td><a><img /></a></td>). It just seems kind of redundant.

I agree! :D

But to create a link back to my home page, as the CodingForums.com logo above does, I needed to have the image in the td. I can't (at least if I can I don't know how to) do it except that way. When I created that link, I'd already got the image in the background, so it seamed a good idea to leave it as it was.

You got any suggestions around that little issue?

PS I hope that made sense! :confused:

Just remove it as a background image, no need to have it twice if no one ever sees it.

I'll probably do just that.

One of the things that I want to do is make it completely tableless, but that's for another day in another thread.

Thanks for all your help guys.