I have build a table with a table border using images (trying to get a rounded table with low download time).
Anyway, it works perfect on safari, mozilla on MAC OS X.
However, IE 6 shows a 1 pixel gap.
This gap is down left and down right just above the rounded corners at the bottom.
No doubt i have made a mistake in my code.
Please help,
<TABLE border=”0″ rules=”none” cellspacing=”0″ cellpadding=”0″ width=”600″ class=”tablebackground”>
<form style=”margin-bottom:0;margin-top:0;”>
<tr>
<td width=”10″ height=”10″ style=”background-image:url(topleft.gif); background-repeat:no-repeat;”></td>
<td height=”10″ colspan=”4″ style=”background-image:url(topspacer.gif); background-repeat:repeat-x;” ></td>
<td width=”10″ height=”10″ style=”background-image:url(topright.gif); background-repeat:no-repeat;”></td>
</tr>
<TR>
<td rowspan=”10″ valign=”top” style=”background-image:url(leftspacer.gif); background-repeat:repeat-y;” ></td>
<TD Align=”left” Height=”20″ Width=”90″ class=”tableelement”>
Tijd
</TD>
<TD Align=”left” Height=”20″ Width=”230″ class=”tableelement”>
[FMP-CurrentTime]
</TD>
<TD Align=”left” Height=”20″ Width=”130″ class=”tableelement”>
Datum :
</TD>
<TD Align=”left” Height=”20″ Width=”130″ class=”tableelement”>
[FMP-CurrentDate]
</TD>
<td rowspan=”10″ valign=”top” style=”background-image:url(rightspacer.gif); background-repeat:repeat-y;” ></td>
</TR>
<TR>
<TD Align=”left” Height=”20″ Width=”90″ class=”tableelement”>
Welkom
</TD>
<TD Align=”left” Height=”20″ Width=”230″ class=”tableelement”>
[FMP-Field:Naam]
</TD>
<TD Align=”left” Height=”20″ Width=”130″ class=”tableelement”>
Business Unit :
</TD>
<TD Align=”left” Height=”20″ Width=”130″ class=”tableelement”>
[FMP-Field:BusinessUnits::Naam]
</TD>
</TR>
<TR>
<TD Align=”left” Height=”20″ colspan=4 Width=”580″ class=”tableelement”>
Dit zijn uw bevoegdheden
</TD>
</TR>
<TR>
<TD Align=”left” Height=”20″ colspan=4 Width=”580″>
<input type=”text” name=”v1″ class=”formelementreadonly” size=”30″ readOnly>
</TD>
</TR>
<TR>
<TD Align=”left” Height=”20″ colspan=4 Width=”580″>
<input type=”text” name=”v2″ class=”formelementreadonly” size=”30″ readOnly>
</TD>
</TR>
<TR>
<TD Align=”left” Height=”20″ colspan=4 Width=”580″>
<input type=”text” name=”v3″ class=”formelementreadonly” size=”30″ readOnly>
</TD>
</TR>
<TR>
<TD Align=”left” Height=”20″ colspan=4 Width=”580″>
<input type=”text” name=”v4″ class=”formelementreadonly” size=”30″ readOnly>
</TD>
</TR>
<TR>
<TD Align=”left” Height=”20″ colspan=4 Width=”580″>
<input type=”text” name=”v5″ class=”formelementreadonly” size=”30″ readOnly>
</TD>
</TR>
<TR>
<TD Align=”left” Height=”20″ colspan=4 Width=”580″>
<input type=”text” name=”v6″ class=”formelementreadonly” size=”30″ readOnly>
</TD>
</TR>
</form>
<TR>
<TD Align=”left” Height=”30″ colspan=4 Width=”580″><input type=”button” value=”Continue” class=”bluebutton” onclick=”gaverder()”></TD>
<TR>
<tr>
<td width=”10″ height=”10″ style=”background-image:url(bottomleft.gif); background-repeat:no-repeat;”></td>
<td height=”10″ colspan=”4″ style=”background-image:url(bottomspacer.gif); background-repeat:repeat-x;”></td>
<td width=”10″ height=”10″ style=”background-image:url(bottomright.gif); background-repeat:no-repeat;”></td>
</tr>
</Table>