PDA

Click to See Complete Forum and Search --> : Help wanted with images in tables

Neetu
07-29-2003, 08:54 PM
Hi,
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.
I have set cellpadding and cellspacing to 0.
Could someone tell me where I am going wrong ?
I've attached the images as a zip file.
Thanks.

This is the code :


<table width="100%" border="0">
<tr>
<td width="50%">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>s
<td width="9%" ><img src="Images/leftboxcorner_top.gif" width="10" height="8" align="right"></td>
<td width="81%"><img src="Images/topline_grey.gif" width="100%" height="8"></td>
<td width="10%"><img src="Images/rightboxcorner_top.gif" width="10" height="8"></td>
</tr>
<tr>
<td width="9%" height="18"><img src="Images/leftline_grey.gif" width="10" height="18" align="right"></td>
<td width="81%">&nbsp;</td>
<td width="10%" height="18"><img src="Images/rightline_grey.gif" width="10" height="18"></td>
</tr>
<tr>
<td width="9%" height="18"><img src="Images/leftline_grey.gif" width="10" height="18" align="right"></td>
<td width="81%">&nbsp;</td>
<td width="10%" height="18"><img src="Images/rightline_grey.gif" width="10" height="18"></td>
</tr>
<tr>
<td width="9%" height="18"><img src="Images/leftline_grey.gif" width="10" height="18" align="right"></td>
<td width="81%">&nbsp;</td>
<td width="10%" height="18"><img src="Images/rightline_grey.gif" width="10" height="18"></td>
</tr>
<tr>
<td width="9%"><img src="Images/leftboxcorner_bottom.gif" width="10" height="8" align="right"></td>
<td width="81%"><img src="Images/bottomline_grey.gif" width="100%" height="8"></td>
<td width="10%"><img src="Images/rightboxcorner_bottom.gif" width="10" height="8"></td>
</tr>
</table>
</td>
<td width="50%">&nbsp;</td>
</tr>
</table>
PeOfEo
07-30-2003, 12:40 AM
look at what I did at this site http://knights.europe.webmatrixhosting.net/temp/index.html I made that a while ago, look at how I did my edges
demo
08-01-2003, 12:46 PM
Yo dude thats simple just add this:


<table border="0" cellpadding="0" cellspacing="0">

and it will be solved.
Rick_Garrison
08-01-2003, 01:13 PM
Originally posted by demo
Yo dude thats simple just add this:


<table border="0" cellpadding="0" cellspacing="0">

and it will be solved.

Oh, brother...
Neetu
08-02-2003, 12:06 PM
Thanks for the help. PeOfEo, I checked your site. It's neat . But I couldn't solve my problem.

Demo : I have used the cellpadding and cellspacing like u mention, already, but no use.

Please suggest some way of getting this right.

Thanks
PeOfEo
08-02-2003, 12:43 PM
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.
Fang
08-02-2003, 03:20 PM
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 (http://www.opera.com/docs/specs/doctype/) .
In quirks mode your problem should disappear (deleting the DOCTYPE enters quirks mode - not recomended for a permanent solution).
Other solutions and more information can be found here (http://devedge.netscape.com/viewsource/2002/img-table/).
CrazyGaz
08-02-2003, 05:05 PM
I do it by making the images the background image.

<td background="image1.bmp"></td>

it works everytime for me.

Gaz.