Topic: Removing borders with html? (Page 1 of 1)

OK, I tried my best to make a site: http://oddv2.t35.com/2.html

If you click the link above, you will notice that in IE it makes a white border around the image. I have used paintshop pro to slice the image up, namely for the text fields (not yet created), and I do not know if I have somehow messed up the code to cause the white borders.

Here's the code:

<!-- Begin Table -->
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="1008" HEIGHT="618">

<TR>
<TD background="pic_1x1.jpg" ROWSPAN="1" COLSPAN="9" WIDTH="1008" HEIGHT="89"></TD>
</TR>

<TR>
<TD background="pic_2x1.jpg" ROWSPAN="1" COLSPAN="9" WIDTH="1008" HEIGHT="22"></TD>
</TR>

<TR>
<TD background="pic_3x1.jpg" ROWSPAN="1" COLSPAN="9" WIDTH="1008" HEIGHT="16"></TD>
</TR>

<TR>
<TD background="pic_4x1.jpg" ROWSPAN="1" COLSPAN="1" WIDTH="20" HEIGHT="20"></TD>
<TD background="pic_4x2.jpg" ROWSPAN="1" COLSPAN="2" WIDTH="637" HEIGHT="20"></TD>
<TD background="pic_4x3.jpg" ROWSPAN="1" COLSPAN="2" WIDTH="32" HEIGHT="20"></TD>
<TD background="pic_4x4.jpg" ROWSPAN="1" COLSPAN="1" WIDTH="298" HEIGHT="20"></TD>
<TD background="pic_4x5.jpg" ROWSPAN="1" COLSPAN="3" WIDTH="21" HEIGHT="20"></TD>
</TR>

<TR>
<TD background="pic_5x1.jpg" ROWSPAN="4" COLSPAN="1" WIDTH="20" HEIGHT="227"></TD>
<TD background="pic_5x2.jpg" ROWSPAN="4" COLSPAN="3" WIDTH="638" HEIGHT="227"></TD>
<TD background="pic_5x3.jpg" ROWSPAN="4" COLSPAN="1" WIDTH="31" HEIGHT="227"></TD>
<TD background="pic_5x4.jpg" ROWSPAN="1" COLSPAN="1" WIDTH="298" HEIGHT="98"></TD>
<TD background="pic_5x5.jpg" ROWSPAN="1" COLSPAN="3" WIDTH="21" HEIGHT="98"></TD>
</TR>

<TR>
<TD background="pic_6x1.jpg" ROWSPAN="1" COLSPAN="4" WIDTH="319" HEIGHT="14"></TD>
</TR>

<TR>
<TD background="pic_7x1.jpg" ROWSPAN="1" COLSPAN="1" WIDTH="298" HEIGHT="22"></TD>
<TD background="pic_7x2.jpg" ROWSPAN="2" COLSPAN="3" WIDTH="21" HEIGHT="115"></TD>
</TR>

<TR>
<TD background="pic_8x1.jpg" ROWSPAN="1" COLSPAN="1" WIDTH="298" HEIGHT="93"></TD>
</TR>

<TR>
<TD background="pic_9x1.jpg" ROWSPAN="1" COLSPAN="9" WIDTH="1008" HEIGHT="16"></TD>
</TR>

<TR>
<TD background="pic_10x1.jpg" ROWSPAN="1" COLSPAN="1" WIDTH="20" HEIGHT="17"></TD>
<TD background="pic_10x2.jpg" ROWSPAN="1" COLSPAN="1" WIDTH="636" HEIGHT="17"></TD>
<TD background="pic_10x3.jpg" ROWSPAN="1" COLSPAN="3" WIDTH="33" HEIGHT="17"></TD>
<TD background="pic_10x4.jpg" ROWSPAN="1" COLSPAN="3" WIDTH="300" HEIGHT="17"></TD>
<TD background="pic_10x5.jpg" ROWSPAN="1" COLSPAN="1" WIDTH="19" HEIGHT="17"></TD>
</TR>

<TR>
<TD background="pic_11x1.jpg" ROWSPAN="1" COLSPAN="1" WIDTH="20" HEIGHT="148"></TD>
<TD background="pic_11x2.jpg" ROWSPAN="1" COLSPAN="1" WIDTH="636" HEIGHT="148"></TD>
<TD background="pic_11x3.jpg" ROWSPAN="1" COLSPAN="3" WIDTH="33" HEIGHT="148"></TD>
<TD background="pic_11x4.jpg" ROWSPAN="1" COLSPAN="2" WIDTH="299" HEIGHT="148"></TD>
<TD background="pic_11x5.jpg" ROWSPAN="1" COLSPAN="2" WIDTH="20" HEIGHT="148"></TD>
</TR>

<TR>
<TD background="pic_12x1.jpg" ROWSPAN="1" COLSPAN="9" WIDTH="1008" HEIGHT="17"></TD>
</TR>

<TR>
<TD background="pic_13x1.jpg" ROWSPAN="1" COLSPAN="9" WIDTH="1008" HEIGHT="46"></TD>
</TR>

<TR>
<TD background="blank.gif" WIDTH="20" HEIGHT="1"></TD>
<TD background="blank.gif" WIDTH="636" HEIGHT="1"></TD>
<TD background="blank.gif" WIDTH="1" HEIGHT="1"></TD>
<TD background="blank.gif" WIDTH="1" HEIGHT="1"></TD>
<TD background="blank.gif" WIDTH="31" HEIGHT="1"></TD>
<TD background="blank.gif" WIDTH="298" HEIGHT="1"></TD>
<TD background="blank.gif" WIDTH="1" HEIGHT="1"></TD>
<TD background="blank.gif" WIDTH="1" HEIGHT="1"></TD>
<TD background="blank.gif" WIDTH="19" HEIGHT="1"></TD>
</TR>
</TABLE>
<!-- End Table -->

I need to remove the white border, so if anyone can help, I would be very appreciative.

You mean the margin at the left side and the top?

Remove it by inserting the following in the head

<style type="text/css">

html, body {

 margin: 0;

 padding: 0;

}

</style>

Or you could use div alignment, it seems a bit easier IMO to div things when you want more than one thing to be pin-pointed in precise places.

<div style="position:absolute;top:0px;left:0px;">

<--insert the table you want to dive here-->

</div>

So your code might look something like this:

<div style="position:absolute;top:0px;left:0px;">

<TABLE>

<TR>

<TD backround="YxZ.jpg" ROWSPAN="1" COLSPAN="1" WIDTH="20" HEIGHT="20">blah blah blah</TD>

</TR>

</TABLE>

</div>

And it isn't adding a border to it, thats the backround of your home page, so if for example you decide to use <body bg=black> than it would look like black border, see what I am saying?

{{And to get rid of that evil pop up, try putting this right beneath </HTML>}}

<noscript>

<!--#echo banner=""-->

</noscript>

[This message has been edited by InSiDeR (edited 11-16-2002).]