Images have a border that I can't remove.

[MSBSpectator]

Hey guys,

I've got a layout where I want to show different pictures and descriptions based on what a user mouses over. It uses a table, and javascrip hides all the table rows that are not activated by mouseover. At the moment, the layout works fine in firefox but IE has a weird bug whether the image has a 4px top and 3px bottom border that I cannot get rid of. This is also causing all the pics to shift downwards as I do mouseovers that link to pics going down the rows in the table.

http://img.photobucket.com/albums/v413/MSBSpec/Untitled-3.jpg

Left = image at the top table row
middle = image from a row near the bottom
right = correct layout

How would I go about fixing this?

HTML:
<li class="officers_profile_body" id="officers_profile_body">
<table>
<tr><td class="officer_pic"><img src="Files/Officers_Empty.jpg" /></td></tr>
<tr><td class="officer_pic_name">Officer Profile</td></tr>
<tr>
<td class="officer_pic_desc">
Mouse over each officer's name to see their profile!
</td>
</tr>
<tr><td class="officer_pic" id="Officer1"><img src="Files/Officer1_Portrait.jpg" /></td></tr>
<tr><td class="officer_pic_name">Officer 1</td></tr>
<tr>
<td class="officer_pic_desc">
test </td>
</tr>
<tr><td class="officer_pic" id="Officer2"><img src="Files/Officer2_Portrait.jpg" /></td></tr>
<tr><td class="officer_pic_name">Officer 2</td></tr>
<tr>
<td class="officer_pic_desc">
test 2 </td>
</tr>
///////////etc etc etc
</table>
</li>

CSS:
#main li.officers_profile_body {
position: relative;
float: left;
left: 10px;
width: 224px;
margin: 0;
padding: 0;
background-color: #d8e3e5;
font-size: 10pt;
font-weight: bold;
color: #1b4d56;
text-align: center;
}
#main li.officers_profile_body table {
width: 224px;
margin: 0;
padding: 0;
border-collapse: collapse;
}
#main li.officers_profile_body table td.officer_pic {
width: 212px;
height: 250px;
margin: 0;
padding: 1px 6px 6px 6px;
background-color:#CC99CC;
}
#main li.officers_profile_body table td.officer_pic img {
width: 212px;
height: 243px;
margin: 0;
padding: 0;
border: 0;
background-color:#669966;
display: block;
}
#main li.officers_profile_body table td.officer_pic_name {
width: 224px;
margin: 0;
padding: 0;
border-top: #7da0a6 solid 1px;
border-bottom: #7da0a6 solid 1px;
background-color: #a9c9ce;
font-size: 12pt;
text-align: center;
overflow: hidden;
}
#main li.officers_profile_body table td.officer_pic_desc {
width: 224px;
margin: 0;
padding: 0px 6px 0px 6px;
font-size: 10pt;
text-align: justify;
text-indent: 10px;
overflow: hidden;
}
#main li.officers_profile_bottom {
position: relative;
float: left;
left: 10px;
width: 764px;
height: 6px;
margin: 0;
padding: 0;
background-image: url(Officers%20Photo%20Bottom.gif);
background-repeat: no-repeat;
}
Javascript (just in case):
function hideOfficerProfiles() {
var tdArray = document.getElementsByTagName('td');
var tdPicArray = new Array();
var tdNameArray = new Array();
var tdDescArray = new Array();
var j = 0; k = 0; l = 0;
for (i = 0; i < tdArray.length; i++) {
switch (tdArray[i].className) {
case 'officer_pic': tdPicArray[j] = tdArray[i]; j++; break;
case 'officer_pic_name': tdNameArray[k] = tdArray[i]; k++; break;
case 'officer_pic_desc': tdDescArray[l] = tdArray[i]; l++; break;
default: ;
}
}
for (i = 1; i < tdPicArray.length; i++) {
tdPicArray[i].style.height = '0px';
tdPicArray[i].style.display = 'none';
tdNameArray[i].style.height = '0px';
tdNameArray[i].style.display = 'none';
tdDescArray[i].style.height = '0px';
tdDescArray[i].style.display = 'none';
}
}
function showOfficerProfile(element) {
var tdArray = document.getElementsByTagName('td');
var tdPicArray = new Array();
var tdNameArray = new Array();
var tdDescArray = new Array();
var j = 0; k = 0; l = 0;
for (i = 0; i < tdArray.length; i++) {
switch (tdArray[i].className) {
case 'officer_pic': tdPicArray[j] = tdArray[i]; j++; break;
case 'officer_pic_name': tdNameArray[k] = tdArray[i]; k++; break;
case 'officer_pic_desc': tdDescArray[l] = tdArray[i]; l++; break;
default: ;
}
}
for (i = 0; i < tdPicArray.length; i++) {
if (tdPicArray[i].id != element.id) {
tdPicArray[i].style.height = '0px';
tdPicArray[i].style.display = 'none';
tdNameArray[i].style.height = '0px';
tdNameArray[i].style.display = 'none';
tdDescArray[i].style.height = '0px';
tdDescArray[i].style.display = 'none';
}
else {
tdPicArray[i].style.height = '250px';
tdPicArray[i].style.display = '';
tdNameArray[i].style.height = 'auto';
tdNameArray[i].style.display = '';
tdDescArray[i].style.height = 'auto';
tdDescArray[i].style.display = '';
}
}
resetHeight(); ////////resets the height of other elements unrelated to this part of the webpage
}

[WebJoel]

Your code is not complete enough to work with, and the URL is of an image. -Can we see the URL to the site, or the complete HTML & CSS?

I suspect that it's a TABLE-thing as TABLEs are being used here. But something like:table {border-collapse: collapse;border: 1px solid black;}
td {border-style: none;}
might fix this. This fixes a (beleive it or not!!) a Mozilla bug that incorrectly places a 1px thick 'border' around TD cells...

Else, try (and it is harmless even if ineffective: )

img {outline:none;}

and/or

a img {outline:none;}


But without seeing your full, complete code, -I am just guessing... :confused: