/    Sign up×
Community /Pin to ProfileBookmark

Help wanted with images in tables

Copy linkTweet thisAlerts:
Jul 30.2003

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>

[upl-file uuid=9c0b79e4-e0d8-4b2b-b653-4ff1d2397867 size=2kB]images.zip[/upl-file]

to post a comment
HTML

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@PeOfEoJul 30.2003 — 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
Copy linkTweet thisAlerts:
@demoAug 01.2003 — Yo dude thats simple just add this:


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

and it will be solved.
Copy linkTweet thisAlerts:
@Rick_GarrisonAug 01.2003 — [i]Originally posted by demo [/i]

[B]Yo dude thats simple just add this:





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



and it will be solved. [/B][/QUOTE]

Oh, brother...
Copy linkTweet thisAlerts:
@NeetuauthorAug 02.2003 — 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
Copy linkTweet thisAlerts:
@PeOfEoAug 02.2003 — 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.
Copy linkTweet thisAlerts:
@FangAug 02.2003 — 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 [URL=http://www.opera.com/docs/specs/doctype/]quirks or standards mode[/URL] .

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 [URL=http://devedge.netscape.com/viewsource/2002/img-table/]here[/URL].
Copy linkTweet thisAlerts:
@CrazyGazAug 02.2003 — I do it by making the images the background image.

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

it works everytime for me.

Gaz.
×

Success!

Help @Neetu spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...