Hi,<br />
I am trying to display some stuff inside a table. This is enclosed by a box with rounded edges. For this box, I've images which when arranged right give me the box. The problem here is between each of the images there is a gap, thus the border looks broken. I tried setting the background of the table cell to the image, instead of inserting the images itself. But this causes the image to repeat, in each cell. <br />
I have set cellpadding and cellspacing to 0.<br />
Could someone tell me where I am going wrong ?<br />
I've attached the images as a zip file.<br />
Thanks.<br />
<br />
This is the code :<br />
<br />
<br />
<table width="100%" border="0"><br />
<tr><br />
<td width="50%"> <br />
<table width="100%" border="0" cellspacing="0" cellpadding="0"><br />
<tr>s<br />
<td width="9%" ><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/leftboxcorner_top.gif" width="10" height="8" align="right"></td><br />
<td width="81%"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/topline_grey.gif" width="100%" height="8"></td><br />
<td width="10%"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/rightboxcorner_top.gif" width="10" height="8"></td><br />
</tr><br />
<tr><br />
<td width="9%" height="18"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/leftline_grey.gif" width="10" height="18" align="right"></td><br />
<td width="81%"> </td><br />
<td width="10%" height="18"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/rightline_grey.gif" width="10" height="18"></td><br />
</tr><br />
<tr><br />
<td width="9%" height="18"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/leftline_grey.gif" width="10" height="18" align="right"></td><br />
<td width="81%"> </td><br />
<td width="10%" height="18"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/rightline_grey.gif" width="10" height="18"></td><br />
</tr><br />
<tr><br />
<td width="9%" height="18"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/leftline_grey.gif" width="10" height="18" align="right"></td><br />
<td width="81%"> </td><br />
<td width="10%" height="18"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/rightline_grey.gif" width="10" height="18"></td><br />
</tr><br />
<tr><br />
<td width="9%"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/leftboxcorner_bottom.gif" width="10" height="8" align="right"></td><br />
<td width="81%"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/bottomline_grey.gif" width="100%" height="8"></td><br />
<td width="10%"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/rightboxcorner_bottom.gif" width="10" height="8"></td><br />
</tr><br />
</table><br />
</td><br />
<td width="50%"> </td><br />
</tr><br />
</table><!--content-->look at what I did at this site <!-- m --><a class="postlink" href="http://knights.europe.webmatrixhosting.net/temp/index.html">http://knights.europe.webmatrixhosting. ... index.html</a><!-- m --> I made that a while ago, look at how I did my edges<!--content-->Yo dude thats simple just add this:<br />
<br />
<br />
<table border="0" cellpadding="0" cellspacing="0"><br />
<br />
and it will be solved.<!--content-->Originally posted by demo <br />
Yo dude thats simple just add this:<br />
<br />
<br />
<table border="0" cellpadding="0" cellspacing="0"><br />
<br />
and it will be solved. <br />
<br />
Oh, brother...<!--content-->Thanks for the help. PeOfEo, I checked your site. It's neat . But I couldn't solve my problem. <br />
<br />
Demo : I have used the cellpadding and cellspacing like u mention, already, but no use.<br />
<br />
Please suggest some way of getting this right.<br />
<br />
Thanks<!--content-->Sometimes you get unwanted spaces with tables so try to get one of the colors real close to being the same and then fill your table with a background image the same color as your rounded corners edge that is off colored. Thats what I was trying to point out to you. That way any discoloration is harder to see. Also see how the images on top are just taking up courners but the bottum ones are longer, they fill up a whole cell because of an ie bug, that how I overcame it just using an image to stretch the cell and not setting the width.<!--content-->This is the box model problem: the gaps a due to the DTD that you are using. The first line of your script is the Document Type Declaration (<!DOCTYPE html PUBLIC ...etc.), this can set your browser to quirks or standards mode (<!-- m --><a class="postlink" href="http://www.opera.com/docs/specs/doctype/">http://www.opera.com/docs/specs/doctype/</a><!-- m -->) .<br />
In quirks mode your problem should disappear (deleting the DOCTYPE enters quirks mode - not recomended for a permanent solution).<br />
Other solutions and more information can be found here (<!-- m --><a class="postlink" href="http://devedge.netscape.com/viewsource/2002/img-table/">http://devedge.netscape.com/viewsource/2002/img-table/</a><!-- m -->).<!--content-->I do it by making the images the background image.<br />
<br />
<td background="image1.bmp"></td><br />
<br />
it works everytime for me.<br />
<br />
Gaz.<!--content-->
I am trying to display some stuff inside a table. This is enclosed by a box with rounded edges. For this box, I've images which when arranged right give me the box. The problem here is between each of the images there is a gap, thus the border looks broken. I tried setting the background of the table cell to the image, instead of inserting the images itself. But this causes the image to repeat, in each cell. <br />
I have set cellpadding and cellspacing to 0.<br />
Could someone tell me where I am going wrong ?<br />
I've attached the images as a zip file.<br />
Thanks.<br />
<br />
This is the code :<br />
<br />
<br />
<table width="100%" border="0"><br />
<tr><br />
<td width="50%"> <br />
<table width="100%" border="0" cellspacing="0" cellpadding="0"><br />
<tr>s<br />
<td width="9%" ><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/leftboxcorner_top.gif" width="10" height="8" align="right"></td><br />
<td width="81%"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/topline_grey.gif" width="100%" height="8"></td><br />
<td width="10%"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/rightboxcorner_top.gif" width="10" height="8"></td><br />
</tr><br />
<tr><br />
<td width="9%" height="18"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/leftline_grey.gif" width="10" height="18" align="right"></td><br />
<td width="81%"> </td><br />
<td width="10%" height="18"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/rightline_grey.gif" width="10" height="18"></td><br />
</tr><br />
<tr><br />
<td width="9%" height="18"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/leftline_grey.gif" width="10" height="18" align="right"></td><br />
<td width="81%"> </td><br />
<td width="10%" height="18"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/rightline_grey.gif" width="10" height="18"></td><br />
</tr><br />
<tr><br />
<td width="9%" height="18"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/leftline_grey.gif" width="10" height="18" align="right"></td><br />
<td width="81%"> </td><br />
<td width="10%" height="18"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/rightline_grey.gif" width="10" height="18"></td><br />
</tr><br />
<tr><br />
<td width="9%"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/leftboxcorner_bottom.gif" width="10" height="8" align="right"></td><br />
<td width="81%"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/bottomline_grey.gif" width="100%" height="8"></td><br />
<td width="10%"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/rightboxcorner_bottom.gif" width="10" height="8"></td><br />
</tr><br />
</table><br />
</td><br />
<td width="50%"> </td><br />
</tr><br />
</table><!--content-->look at what I did at this site <!-- m --><a class="postlink" href="http://knights.europe.webmatrixhosting.net/temp/index.html">http://knights.europe.webmatrixhosting. ... index.html</a><!-- m --> I made that a while ago, look at how I did my edges<!--content-->Yo dude thats simple just add this:<br />
<br />
<br />
<table border="0" cellpadding="0" cellspacing="0"><br />
<br />
and it will be solved.<!--content-->Originally posted by demo <br />
Yo dude thats simple just add this:<br />
<br />
<br />
<table border="0" cellpadding="0" cellspacing="0"><br />
<br />
and it will be solved. <br />
<br />
Oh, brother...<!--content-->Thanks for the help. PeOfEo, I checked your site. It's neat . But I couldn't solve my problem. <br />
<br />
Demo : I have used the cellpadding and cellspacing like u mention, already, but no use.<br />
<br />
Please suggest some way of getting this right.<br />
<br />
Thanks<!--content-->Sometimes you get unwanted spaces with tables so try to get one of the colors real close to being the same and then fill your table with a background image the same color as your rounded corners edge that is off colored. Thats what I was trying to point out to you. That way any discoloration is harder to see. Also see how the images on top are just taking up courners but the bottum ones are longer, they fill up a whole cell because of an ie bug, that how I overcame it just using an image to stretch the cell and not setting the width.<!--content-->This is the box model problem: the gaps a due to the DTD that you are using. The first line of your script is the Document Type Declaration (<!DOCTYPE html PUBLIC ...etc.), this can set your browser to quirks or standards mode (<!-- m --><a class="postlink" href="http://www.opera.com/docs/specs/doctype/">http://www.opera.com/docs/specs/doctype/</a><!-- m -->) .<br />
In quirks mode your problem should disappear (deleting the DOCTYPE enters quirks mode - not recomended for a permanent solution).<br />
Other solutions and more information can be found here (<!-- m --><a class="postlink" href="http://devedge.netscape.com/viewsource/2002/img-table/">http://devedge.netscape.com/viewsource/2002/img-table/</a><!-- m -->).<!--content-->I do it by making the images the background image.<br />
<br />
<td background="image1.bmp"></td><br />
<br />
it works everytime for me.<br />
<br />
Gaz.<!--content-->