943,542 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > White Space Between Table Images
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Oct 10th, 2007
0

White Space Between Table Images

Expand Post »
I am working on a fairly simple site. At this point I am wanting to assemble 25 images on the homepage which when assembled will form a whole image (where each separate image will be clickable).

I am only at the point of trying to getting the images arranged as described above. The problem is: When rendered on the screen (I am using Mozilla Firefox as my primary browser) each image is divided from the other with a section of background (in this case white) showing through.

I have tried to research this topic and have been coming up fairly empty with all suggested fixes. Can anyone offer any solutions for this issue?

Thank-you in advance (code below),
Matty

HTML and CSS Syntax (Toggle Plain Text)
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <HTML>
  4.  
  5. <HEAD>
  6. <meta http-equiv="Content-Language" content="en-us">
  7. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  8. <meta name="AUTHOR" content="stormtrooper">
  9. <meta name="DESCRIPTION" content="stormtrooper">
  10. <title><> stormtrooper <></title>
  11. </HEAD>
  12.  
  13. <BODY>
  14.  
  15. <body bgcolor="#ffffff">
  16. <BODY link="pink" alink="yellow" vlink="grey">
  17.  
  18. <img src="5p5.jpg" width="725" height="142" alt="stormtrooper" >
  19. <p>
  20.  
  21. <table border="0" align="center" width="60%">
  22.  
  23. <tr>
  24. <td><a href="http://stormtrooper.webng.com/image.html"><img src="redRobot.jpg" width="95" height="95" alt="" border=0></a></td>
  25. <td><a href="http://stormtrooper.webng.com/image.html"><img src="birdy.jpg" width="95" height="95" alt="" border=0></a></td>
  26. <td><a href="http://stormtrooper.webng.com/image.html"><img src="cosmosMan.jpg" width="95" height="95" alt="" border=0></a></td>
  27. <td><a href="http://stormtrooper.webng.com/image.html"><img src="uk.jpg" width="95" height="95" alt="" border=0></a></td>
  28. <td><a href="http://stormtrooper.webng.com/image.html"><img src="topRightCorner.jpg" width="95" height="95" alt="" border=0></a></td>
  29. </tr>
  30.  
  31. <tr>
  32. <td><a href="http://stormtrooper.webng.com/image.html"><img src="japanAd.jpg"width="95"height="95"alt=""border=0></a></td>
  33. <td><a href="http://stormtrooper.webng.com/image.html"><img src="tulip.jpg" width="95" height="95" alt="" border=0></a></td>
  34. <td><a href="http://stormtrooper.webng.com/image.html"><img src="amoeba.jpg" width="95" height="95" alt="" border=0></a></td>
  35. <td><a href="http://stormtrooper.webng.com/image.html"><img src="guilder.jpg" width="95" height="95" alt="" border=0></a></td>
  36. <td><a href="http://stormtrooper.webng.com/image.html"><img src="bus.jpg" width="95" height="95" alt="" border=0></a></td>
  37. </tr>
  38.  
  39. <tr>
  40. <td><a href="http://stormtrooper.webng.com/image.html"><img src="brain.jpg" width="95" height="95" alt="" border=0></a></td>
  41. <td><a href="http://stormtrooper.webng.com/image.html"><img src="canada.jpg" width="95" height="95" alt="" border=0></a></td>
  42. <td><a href="http://stormtrooper.webng.com/image.html"><img src="planet.jpg" width="95" height="95" alt="" border=0></a></td>
  43. <td><a href="http://stormtrooper.webng.com/image.html"><img src="vespa.jpg" width="95" height="95" alt="" border=0></a></td>
  44. <td><a href="http://stormtrooper.webng.com/image.html"><img src="cactus.jpg" width="95" height="95" alt="" border=0></a></td>
  45. </tr>
  46.  
  47. <tr>
  48. <td><a href="http://stormtrooper.webng.com/image.html"><img src="row4Side.jpg" width="95" height="95" alt="" border=0></a></td>
  49. <td><a href="http://stormtrooper.webng.com/image.html"><img src="blessedMan.jpg" width="95" height="95" alt="" border=0></a></td>
  50. <td><a href="http://stormtrooper.webng.com/image.html"><img src="sadGirl.jpg" width="95" height="95" alt="" border=0></a></td>
  51. <td><a href="http://stormtrooper.webng.com/image.html"><img src="skull.jpg" width="95" height="95" alt="" border=0></a></td>
  52. <td><a href="http://stormtrooper.webng.com/image.html"><img src="bombers.jpg" width="95" height="95" alt="" border=0></a></td>
  53. </tr>
  54.  
  55. <tr>
  56. <td><a href="http://stormtrooper.webng.com/image.html"><img src="bottomLeftCorner.jpg" width="95" height="95" alt="" border=0></a></td>
  57. <td><a href="http://stormtrooper.webng.com/image.html"><img src="kingsHead.jpg" width="95" height="95" alt="" border=0></a></td>
  58. <td><a href="http://stormtrooper.webng.com/image.html"><img src="polishRazor.jpg" width="95" height="95" alt="" border=0></a></td>
  59. <td><a href="http://stormtrooper.webng.com/image.html"><img src="knifeFlower.jpg" width="95" height="95" alt="" border=0></a></td>
  60. <td><a href="http://stormtrooper.webng.com/image.html"><img src="robotHead.jpg" width="95" height="95" alt="" border=0></a></td>
  61. </tr>
  62.  
  63.      </table>
  64.  
  65. </BODY>
Similar Threads
Featured Poster
Reputation Points: 105
Solved Threads: 1
Posting Maven
mattyd is offline Offline
2,582 posts
since Oct 2006
Permalink
Oct 10th, 2007
0

Re: White Space Between Table Images

Add cellpaddingand cellspacingproperty and set them to 0 in your table.
html Syntax (Toggle Plain Text)
  1. <table border="0" align="center" width="60%" cellpadding="0" cellspacing="0">
.

And yes, there is no need to use three body tags. Only one is allowed, so make it like this
html Syntax (Toggle Plain Text)
  1. <body bgcolor="#ffffff" link="pink" alink="yellow" vlink="grey">
Reputation Points: 85
Solved Threads: 42
Nearly a Posting Virtuoso
vishesh is offline Offline
1,362 posts
since Oct 2006
Permalink
Oct 10th, 2007
0

Re: White Space Between Table Images

Vishesh:

Thank-you for your advice. I've implemented both suggested changes. But, in regards to the table, the problem still exists. I am not sure why. Please see the homepage if you have the time.

Thanks again,
Matty
Featured Poster
Reputation Points: 105
Solved Threads: 1
Posting Maven
mattyd is offline Offline
2,582 posts
since Oct 2006
Permalink
Oct 11th, 2007
1

Re: White Space Between Table Images

Hi Matty,
If we remove width="60%" from the table tag. It would work.

It was happening because you have 5, 95x95px images. So, when you give 60% width to the page, it's not necessary that 60% of the page is 95px*5=475px, so to make table width 60% of the page, it would leave spaces.

You could perhaps see it yourself while resizing your browser window width.

So, you could add width="475" attribute to table tag.

Now your whole code will look like this:

html Syntax (Toggle Plain Text)
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3.  
  4. <html>
  5. <head>
  6.   <meta http-equiv="Content-Language" content="en-us">
  7.   <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
  8.   <meta name="AUTHOR" content="stormtrooper">
  9.   <meta name="DESCRIPTION" content="stormtrooper">
  10.  
  11.   <title>&lt;&gt; stormtrooper &lt;&gt;</title>
  12. </head>
  13.  
  14. <body bgcolor="#FFFFFF" link="pink" alink="yellow" vlink="grey">
  15.   <img src="5p5.jpg" width="725" height="142" alt="stormtrooper">
  16.  
  17.   <table border="0" align="center" width="475" cellpadding="0" cellspacing="0">
  18.     <tr>
  19.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="redRobot.jpg" width="95" height="95" alt="" border="0"></a></td>
  20.  
  21.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="birdy.jpg" width="95" height="95" alt="" border="0"></a></td>
  22.  
  23.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="cosmosMan.jpg" width="95" height="95" alt="" border="0"></a></td>
  24.  
  25.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="uk.jpg" width="95" height="95" alt="" border="0"></a></td>
  26.  
  27.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="topRightCorner.jpg" width="95" height="95" alt="" border="0"></a></td>
  28.     </tr>
  29.  
  30.     <tr>
  31.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="japanAd.jpg" width="95" height="95" alt="" border="0"></a></td>
  32.  
  33.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="tulip.jpg" width="95" height="95" alt="" border="0"></a></td>
  34.  
  35.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="amoeba.jpg" width="95" height="95" alt="" border="0"></a></td>
  36.  
  37.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="guilder.jpg" width="95" height="95" alt="" border="0"></a></td>
  38.  
  39.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="bus.jpg" width="95" height="95" alt="" border="0"></a></td>
  40.     </tr>
  41.  
  42.     <tr>
  43.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="brain.jpg" width="95" height="95" alt="" border="0"></a></td>
  44.  
  45.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="canada.jpg" width="95" height="95" alt="" border="0"></a></td>
  46.  
  47.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="planet.jpg" width="95" height="95" alt="" border="0"></a></td>
  48.  
  49.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="vespa.jpg" width="95" height="95" alt="" border="0"></a></td>
  50.  
  51.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="cactus.jpg" width="95" height="95" alt="" border="0"></a></td>
  52.     </tr>
  53.  
  54.     <tr>
  55.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="row4Side.jpg" width="95" height="95" alt="" border="0"></a></td>
  56.  
  57.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="blessedMan.jpg" width="95" height="95" alt="" border="0"></a></td>
  58.  
  59.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="sadGirl.jpg" width="95" height="95" alt="" border="0"></a></td>
  60.  
  61.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="skull.jpg" width="95" height="95" alt="" border="0"></a></td>
  62.  
  63.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="bombers.jpg" width="95" height="95" alt="" border="0"></a></td>
  64.     </tr>
  65.  
  66.     <tr>
  67.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="bottomLeftCorner.jpg" width="95" height="95" alt="" border="0"></a></td>
  68.  
  69.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="kingsHead.jpg" width="95" height="95" alt="" border="0"></a></td>
  70.  
  71.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="polishRazor.jpg" width="95" height="95" alt="" border="0"></a></td>
  72.  
  73.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="knifeFlower.jpg" width="95" height="95" alt="" border="0"></a></td>
  74.  
  75.       <td><a href="http://stormtrooper.webng.com/image.html"><img src="robotHead.jpg" width="95" height="95" alt="" border="0"></a></td>
  76.     </tr>
  77.   </table>
  78. </body>
  79. </html>

Vishesh
Last edited by vishesh; Oct 11th, 2007 at 4:17 am.
Reputation Points: 85
Solved Threads: 42
Nearly a Posting Virtuoso
vishesh is offline Offline
1,362 posts
since Oct 2006
Permalink
Oct 11th, 2007
1

Re: White Space Between Table Images

Vishesh:

Thank-you for your reply and for the further information.

I tried your suggestion and it worked great. I understand the problem much better now.

There still seems to be a pixel-width space between each image on the homepage image(s), though; I have read of this problem and need to solve that also. I will research it today.

Thank-you so much for your help, Vishesh.

Matty
Featured Poster
Reputation Points: 105
Solved Threads: 1
Posting Maven
mattyd is offline Offline
2,582 posts
since Oct 2006
Permalink
Oct 11th, 2007
0

Re: White Space Between Table Images

I would just like to point out that using tables for layout is extremely bad practise these days. The table element should be used for tabular data only and not for aligning visuals or anything related to layout.

There are many reasons why you shouldn't. It isn't accessible for users who use such things as screenreaders (many countries have or will have legal requirements to make sites accessible to all), it isn't semantic so your search engine rankings will suffer and lastly it goes against web standards and is more likely to render incorrectly across browsers.

Much better to take the time to learn how to use HTML purely for content and CSS for layout. One of the reasons people get in such a mess with using tables in this way is precisely because they are not intended to be used in this way!

Say NO to table-driven layouts. They are evil.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
curvespace is offline Offline
5 posts
since Oct 2007
Permalink
Oct 12th, 2007
0

Re: White Space Between Table Images

Well curvespace, all depend upon situation. Table and CSS have their own importance. Don't say tables are evil. You go to any big site, most of them use tables, not saying for whole layout though. I believe that its just a hype that using table is extremely bad practice these days.

> Say NO to table-driven layouts. They are evil.
And that is why I say its a hype!!!

Good use of both will will good result. I'm not supporter of CSS DIV or table layout, I believe in using both, but intelligently and planned.

> There still seems to be a pixel-width space between each image on the homepage image(s), though;
Matty, I'll see this problem, later but soon. I reckon it's a common mozilla firefox specific problem.
Last edited by vishesh; Oct 12th, 2007 at 7:06 am.
Reputation Points: 85
Solved Threads: 42
Nearly a Posting Virtuoso
vishesh is offline Offline
1,362 posts
since Oct 2006
Permalink
Oct 12th, 2007
0

Re: White Space Between Table Images

I strongly disagree and so will any other professional web developer worth their salt. It isn't hype, it's about trying to stop bad practices that belong in the last century.

Tables for layout make your site much harder if not impossible for vision-impaired visitors, thus violating accessibilty laws where applicable. It adds bloat to your HTML making it slower to load and harder to maintain. Search engines will penalise your site for not using semantic markup. It goes against Web Standards and is likely to result in inconsistent rendering across browsers.

None of that is hype.

It isn't just about tables: it is about using ANY html for layout purposes. xHTML should be used just for content and CSS for layout. It's that simple.

http://www.hotdesign.com/seybold/everything.html
Reputation Points: 10
Solved Threads: 0
Newbie Poster
curvespace is offline Offline
5 posts
since Oct 2007
Permalink
Oct 13th, 2007
0

Re: White Space Between Table Images

Quote ...
It isn't just about tables: it is about using ANY html for layout purposes. xHTML should be used just for content and CSS for layout. It's that simple.
I of course agree with this.

I again say, I believe in using both. I'm not saying whole layout, perhaps layout with using only tables, I never said. I myself use CSS for layouts, infact its really a better practice and easy to modify and maintain in future than tables, but for layouts only, not to display tabular data. Infact in some cases you encounter tables are really helpful, but again I say not for whole.
Reputation Points: 85
Solved Threads: 42
Nearly a Posting Virtuoso
vishesh is offline Offline
1,362 posts
since Oct 2006
Permalink
Oct 13th, 2007
1

Re: White Space Between Table Images

The problem with the non-table methods is that they fall apart when the browser window size is different than the size planned for. Instead of making page image scroll (as it should), the browser lets the structure created by divs fall apart. It was a good idea theoretically, but the implementation stinks.

I choose to use tables whenever the div method can't be successfully achieved in FF and IE after half an hour's fussing around with styles and settings.

And there are several block elements that can NOT have div columns inside them. No browser works correctly when div layoutss are nested inside these other elements (e.g. list elements) without resorting to kludges to make stuff go where it belongs.

Until they can fix it so you can lock parts together sideways, the div method is a kludge (and a pretty poor one at that). And it will still be a poor method once they do come up with a fix, because older browsers won't support any possible fix they come up with.

If accessibility laws prevent fixing the layout of the page, then it's time we either removed some legislators and threw out those laws (PC is a religion anyway), or redesigned the browsers so they can be set to present tables used for layout in a different way than they present actual tables.

WE NEED COMPATIBILITY MORE THAN WE NEED PERFECT ACCESSIBILITY!

I question whether accessibility is a problem when the table contains entirely images.

I also question why you can't use just one large image. Is there a size limit on image files? If so, your ISP administrator needs a reboot.

Try this style:

HTML and CSS Syntax (Toggle Plain Text)
  1. td {margin: 0; border: none; padding: 0;}
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Message:
Previous Thread in HTML and CSS Forum Timeline: Using nodefire API
Next Thread in HTML and CSS Forum Timeline: Footer





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC