IE 6.0 error in <img> tag

I require help solving an error that occurs only in IE

[GigiDolar]

Hello.
I am currently developing a website and I have a page header with some buttons (images with a simple mouse over/out js). The problem is that if I use the images as a background-image in my td's style, it works. However if I use the <img> tag (have to use it because of the script, can't change it) I get a graphic error in IE 6.0. Chrome and Firefox seem to be working fine. What it does is raise the height of my entire table by 3-4 px. Note that I do not use div tags inside the table.

Here is the code:

<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td style="width: 4px; height: 49px; background-color:#CCCCCC;">
&nbsp;</td>
<td style="width: 267px; height: 49px; background-image:url(img/logo.jpg);">
&nbsp;</td>
<td style="width: 101px; height: 49px; cursor:pointer;">
<img alt="Button" src="img/bAcasa_ro.jpg" onmouseover="swap(this,'img/bAcasaOV_ro.jpg')" onmouseout="swap(this,'img/bAcasa_ro.jpg')" onclick="location.href='index.aspx?lang=ro'"/>
</td>
<td style="width: 101px; height: 49px; cursor:pointer;">
<img alt="Button" src="img/bActivitate_ro.jpg" onmouseover="swap(this,'img/bActivitateOV_ro.jpg')" onmouseout="swap(this,'img/bActivitate_ro.jpg')" onclick="location.href='index.aspx'"/>
</td>
<td style="width: 101px; height: 49px; cursor:pointer;">
<img alt="Button" src="img/bProduse_ro.jpg" onmouseover="swap(this,'img/bProduseOV_ro.jpg')" onmouseout="swap(this,'img/bProduse_ro.jpg')" onclick="location.href='index.aspx'"/>
</td>
<td style="width: 101px; height: 49px; cursor:pointer;">
<img alt="Button" src="img/bClienti_ro.jpg" onmouseover="swap(this,'img/bClientiOV_ro.jpg')" onmouseout="swap(this,'img/bClienti_ro.jpg')" onclick="location.href='index.aspx'"/>
</td>
<td style="width: 101px; height: 49px; cursor:pointer;">
<img alt="Button" src="img/bDocumente_ro.jpg" onmouseover="swap(this,'img/bDocumenteOV_ro.jpg')" onmouseout="swap(this,'img/bDocumente_ro.jpg')" onclick="location.href='index.aspx'"/>
</td>
<td style="width: 228px; height: 49px; background-image:url(img/bg_user.jpg);" align="center">
&nbsp;
</td>
<td style="width: 4px; height: 49px; background-color:#CCCCCC;">
&nbsp;</td>
</tr>
</table>

Setting height and width attributes again inside the img tag doesn't make it any better.

Anyone any thoughts?

[Gibble]

Don't use IE6...it was probably the worst version of IE ever made.

But can you post the code for the swap function

[Gibble]

Oh, try changing the img tags to include border="0"

[GigiDolar]

Tried setting borders to 0, didn't work...
Here is the code for the swap:

function swap(img, path)
{
img.src=path;
}

Is't as simple as it gets:))

I don't use IE 6 but the client does....

Thanks so far!

[tedster]

Have you tried adding this CSS rule -- img {display:block;}

[GigiDolar]

Nope, I didn't, tried it and it worked!

Thank you a lot!

I never thought it could be because of that, if you have time maybe you can tell us why IE 6.0 behaves that way and display:block is necessary. I never used this css atribute and I'm curious.

Thanks again and have a nice day!

[tedster]

By default the img element is display:inline. That means the image will be aligned to the text baseline, leaving a few pixels for the descenders of the lowercase letters, and that's your extra space. By changing to display:block the text baseline is no longer involved in drawing the screen positions and table cell sizes.

Because we didn't have your doctype to work from, my suggestion was a guess based on the symptoms you described. It's more common to have this problem when developing in quirks mode - but then IE looks good and FF has the extra space, so I wasn't sure it would be the fix you need. But it was worth a quick try - easy enough to do.

[GigiDolar]

Ok, now i get it:D

Thanks, it was most helpful.