This code is intended to frame images of varying sizes. It almost works in Firefox v2. It is a train wreck in IE v6. Please answer with novice in mind.
Question One: In Firefox v2, how do I rid myself of that troublesome white line at about 14 pixels down from the frame's top edge.
Question Two: In Internet Explorer 6: The frame is scattered all over. Obviously, IE needs something different; but, I have not a clue.
The Link
Shows results of both browsers
The Code:
<html>
<head>
<title>Butterfly</title>
<meta name="description" content="Butterfly">
<style type="text/css">
TD.F01
{
background-image: url(frame01.jpg);
background-repeat: no-repeat;
height: 14px;
width: 14px;
}
TD.F02
{
background-image: url(frame02.jpg);
background-repeat: no-repeat;
height: 14px;
width: 29px;
}
TD.F03
{
background-image: url(frame03.jpg);
background-repeat: repeat-x;
height: 14px;
}
TD.F04
{
background-image: url(frame04.jpg);
background-repeat: no-repeat;
height: 14px;
width: 28px;
}
TD.F05
{
background-image: url(frame05.jpg);
background-repeat: no-repeat;
height: 14px;
width: 16px;
}
TD.F10
{
background-image: url(frame10.jpg);
background-repeat: no-repeat;
height: 31px;
width: 14px;
}
TD.F11
{
background-image: url(frame11.jpg);
background-repeat: no-repeat;
height: 31px;
width: 16px;
}
TD.F20
{
background-image: url(frame20.jpg);
background-repeat: repeat-y;
width: 14px;
}
TD.F21
{
background-image: url(frame21.jpg);
background-repeat: repeat-y;
width: 16px;
}
TD.F30
{
background-image: url(frame30.jpg);
background-repeat: no-repeat;
height: 29px;
width: 14px;
}
TD.F31
{
background-image: url(frame31.jpg);
background-repeat: no-repeat;
height: 27px;
width: 16px;
}
TD.F40
{
background-image: url(frame40.jpg);
background-repeat: no-repeat;
height: 16px;
width: 14px;
}
TD.F41
{
background-image: url(frame41.jpg);
background-repeat: no-repeat;
height: 16px;
width: 29px;
}
TD.F42
{
background-image: url(frame42.jpg);
background-repeat: repeat-x;
height: 16px;
}
TD.F43
{
background-image: url(frame43.jpg);
background-repeat: no-repeat;
height: 16px;
width: 28px;
}
TD.F44
{
background-image: url(frame44.jpg);
background-repeat: no-repeat;
height: 16px;
width: 16px;
}
</style>
<div id="Main"><div id="ContentExtraWide">
<div style="margin-top: 5px; margin-bottom: 0px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="F01"> </td>
<td class="F02"> </td>
<td class="F03"> </td>
<td class="F04"> </td>
<td class="F05"> </td>
</tr>
<tr>
<td class="F10"> </td>
<td colspan="3" rowspan="3"><img src="080703_0036.jpg" alt="Butterfly Picture"</td>
<td class="F11"> </td>
</tr>
<tr>
<td class="F20"> </td>
<td class="F21"> </td>
</tr>
<tr>
<td class="F30"> </td>
<td class="F31"> </td>
</tr>
<tr>
<td class="F40"> </td>
<td class="F41"> </td>
<td class="F42"> </td>
<td class="F43"> </td>
<td class="F44"> </td>
</tr>
</tbody></table>
</div>
</div></body></html>