White Space Between Table Images

Question

mattyd 89 Posting Maven

17 Years Ago

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>

<HEAD>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="AUTHOR" content="stormtrooper">
<meta name="DESCRIPTION" content="stormtrooper">
<title><> stormtrooper <></title>
</HEAD>

<BODY>

<body bgcolor="#ffffff">
<BODY link="pink" alink="yellow" vlink="grey">

<img src="5p5.jpg" width="725" height="142" alt="stormtrooper" >
<p>

<table border="0" align="center" width="60%">

<tr>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="redRobot.jpg" width="95" height="95" alt="" border=0></a></td>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="birdy.jpg" width="95" height="95" alt="" border=0></a></td>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="cosmosMan.jpg" width="95" height="95" alt="" border=0></a></td>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="uk.jpg" width="95" height="95" alt="" border=0></a></td>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="topRightCorner.jpg" width="95" height="95" alt="" border=0></a></td>
</tr>

<tr>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="japanAd.jpg"width="95"height="95"alt=""border=0></a></td>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="tulip.jpg" width="95" height="95" alt="" border=0></a></td>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="amoeba.jpg" width="95" height="95" alt="" border=0></a></td>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="guilder.jpg" width="95" height="95" alt="" border=0></a></td>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="bus.jpg" width="95" height="95" alt="" border=0></a></td>
</tr>

<tr>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="brain.jpg" width="95" height="95" alt="" border=0></a></td>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="canada.jpg" width="95" height="95" alt="" border=0></a></td>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="planet.jpg" width="95" height="95" alt="" border=0></a></td>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="vespa.jpg" width="95" height="95" alt="" border=0></a></td>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="cactus.jpg" width="95" height="95" alt="" border=0></a></td>
</tr>

<tr>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="row4Side.jpg" width="95" height="95" alt="" border=0></a></td>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="blessedMan.jpg" width="95" height="95" alt="" border=0></a></td>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="sadGirl.jpg" width="95" height="95" alt="" border=0></a></td>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="skull.jpg" width="95" height="95" alt="" border=0></a></td>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="bombers.jpg" width="95" height="95" alt="" border=0></a></td>
</tr>

<tr>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="bottomLeftCorner.jpg" width="95" height="95" alt="" border=0></a></td>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="kingsHead.jpg" width="95" height="95" alt="" border=0></a></td>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="polishRazor.jpg" width="95" height="95" alt="" border=0></a></td>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="knifeFlower.jpg" width="95" height="95" alt="" border=0></a></td>
<td><a href="http://stormtrooper.webng.com/image.html"><img src="robotHead.jpg" width="95" height="95" alt="" border=0></a></td>
</tr>

     </table>

</BODY>

web-design

8 Contributors
22 Replies
261 Views
4 Years Discussion Span
Latest Post 12 Years Ago Latest Post by robbiegod316

GreenDay2001

17 Years Ago

Add cellpadding and cellspacing property and set them to 0 in your table.

<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

<body bgcolor="#ffffff" link="pink" alink="yellow" vlink="grey">

GreenDay2001

17 Years Ago

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
  <meta http-equiv="Content-Language" content="en-us">
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
  <meta name="AUTHOR" content="stormtrooper">
  <meta name="DESCRIPTION" content="stormtrooper">

  <title>&lt;&gt; stormtrooper &lt;&gt;</title>
</head>

<body bgcolor="#FFFFFF" link="pink" alink="yellow" vlink="grey">
  <img src="5p5.jpg" width="725" height="142" alt="stormtrooper">

  <table border="0" align="center" width="475" cellpadding="0" cellspacing="0">
    <tr>
      <td><a href="http://stormtrooper.webng.com/image.html"><img src="redRobot.jpg" width="95" height="95" alt="" border="0"></a></td>

      <td><a href="http://stormtrooper.webng.com/image.html"><img src="birdy.jpg" width="95" height="95" alt="" border="0"></a></td>

      <td><a href="http://stormtrooper.webng.com/image.html"><img src="cosmosMan.jpg" width="95" height="95" alt="" border="0"></a></td>

      <td><a href="http://stormtrooper.webng.com/image.html"><img src="uk.jpg" width="95" height="95" alt="" border="0"></a></td>

      <td><a href="http://stormtrooper.webng.com/image.html"><img src="topRightCorner.jpg" width="95" height="95" alt="" border="0"></a></td>
    </tr>

    <tr>
      <td><a href="http://stormtrooper.webng.com/image.html"><img src="japanAd.jpg" width="95" height="95" alt="" border="0"></a></td>

      <td><a href="http://stormtrooper.webng.com/image.html"><img src="tulip.jpg" width="95" height="95" alt="" border="0"></a></td>

      <td><a href="http://stormtrooper.webng.com/image.html"><img src="amoeba.jpg" width="95" height="95" alt="" border="0"></a></td>

      <td><a href="http://stormtrooper.webng.com/image.html"><img src="guilder.jpg" width="95" height="95" alt="" border="0"></a></td>

      <td><a href="http://stormtrooper.webng.com/image.html"><img src="bus.jpg" width="95" height="95" alt="" border="0"></a></td>
    </tr>

    <tr>
      <td><a href="http://stormtrooper.webng.com/image.html"><img src="brain.jpg" width="95" height="95" alt="" border="0"></a></td>

      <td><a href="http://stormtrooper.webng.com/image.html"><img src="canada.jpg" width="95" height="95" alt="" border="0"></a></td>

      <td><a href="http://stormtrooper.webng.com/image.html"><img src="planet.jpg" width="95" height="95" alt="" border="0"></a></td>

      <td><a href="http://stormtrooper.webng.com/image.html"><img src="vespa.jpg" width="95" height="95" alt="" border="0"></a></td>

      <td><a href="http://stormtrooper.webng.com/image.html"><img src="cactus.jpg" width="95" height="95" alt="" border="0"></a></td>
    </tr>

    <tr>
      <td><a href="http://stormtrooper.webng.com/image.html"><img src="row4Side.jpg" width="95" height="95" alt="" border="0"></a></td>

      <td><a href="http://stormtrooper.webng.com/image.html"><img src="blessedMan.jpg" width="95" height="95" alt="" border="0"></a></td>

      <td><a href="http://stormtrooper.webng.com/image.html"><img src="sadGirl.jpg" width="95" height="95" alt="" border="0"></a></td>

      <td><a href="http://stormtrooper.webng.com/image.html"><img src="skull.jpg" width="95" height="95" alt="" border="0"></a></td>

      <td><a href="http://stormtrooper.webng.com/image.html"><img src="bombers.jpg" width="95" height="95" alt="" border="0"></a></td>
    </tr>

    <tr>
      <td><a href="http://stormtrooper.webng.com/image.html"><img src="bottomLeftCorner.jpg" width="95" height="95" alt="" border="0"></a></td>

      <td><a href="http://stormtrooper.webng.com/image.html"><img src="kingsHead.jpg" width="95" height="95" alt="" border="0"></a></td>

      <td><a href="http://stormtrooper.webng.com/image.html"><img src="polishRazor.jpg" width="95" height="95" alt="" border="0"></a></td>

      <td><a href="http://stormtrooper.webng.com/image.html"><img src="knifeFlower.jpg" width="95" height="95" alt="" border="0"></a></td>

      <td><a href="http://stormtrooper.webng.com/image.html"><img src="robotHead.jpg" width="95" height="95" alt="" border="0"></a></td>
    </tr>
  </table>
</body>
</html>

Vishesh

mattyd commented: Help with my HTML table. Thank-you, MattyD +6

GreenDay2001

17 Years Ago

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.

MidiMagic 579 Nearly a Senior Poster

17 Years Ago

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:

td {margin: 0; border: none; padding: 0;}

GreenDay2001 commented: exactly +4

MattEvans 473 Veteran Poster

17 Years Ago

It isn't accessible for users who use such things as screenreaders

Screenreaders work better, ( i.e. more intuitively and standardized ), with tables than they do with some div layouts that force table-like display using floating/positioning, or with div layouts that want to order markup weirdly for the purpose of upping search engine rankings. It's an old myth that screenreaders fail with tables; more modern readers are very capable of reading tables, whether they be used for layout or pure tabular data.
Order of markup and correct use of 'special tags' is more important than the block tags used in markup. Search engines and screenreaders alike care little for table/div/span... all are at best semantically meaningless. 'h1', 'h2', 'title' should be important, as is 'a' and others.

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.

Great in theory. Not so great in practice. XHTML defines a series of tags, the purpose of most of them is layout and presentation. If you really only care about 'semantics', use plain XML and style that with CSS; you might have compatibility problems for the moment since only the latest browsers support XML pages.. and you need the latest CSS standard to be well implemented for it to be useful for anything non-trivial.. but I guess, any 'web developer worth their salt' isn't as bothered about compatilibity and what they can actually DO with the tools available as they are meeting what they (incorrectly) believe to be a standard..

Aside, it's often the case, that to get enough 'style estate' to do anything reasonable on a page, you need to add meaningless structures solely for the purpose of locking CSS onto them. Out of the nearest window goes your idealistic image of a 'semantic representation' of the page. XHTML is a very capable data presentation language, but in no way is it a capable data description language. CSS isn't sufficient to replace every XHTML construct, or there'd be no point in those constructs continuing to exist.

If you use three layers of divs to make a structure conform to anything that acts in a 'tabular way', you fail to meet a time-honoured paradigm in software design - it's better to use something that does what you want already; in a correct, standardized and tested way; than hack on the surface at something that does it halfway.

GreenDay2001 commented: very well said buddy! :) +4

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

mattyd 89 Posting Maven Featured Poster · Answer 1 · 2007-10-11T01:54:46+00:00

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

mattyd 89 Posting Maven Featured Poster · Answer 2 · 2007-10-11T19:27:13+00:00

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

curvespace 0 Newbie Poster · Answer 3 · 2007-10-11T20:27:07+00:00

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.

curvespace 0 Newbie Poster · Answer 4 · 2007-10-12T16:16:48+00:00

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

GreenDay2001 · Answer 5 · 2007-10-13T12:19:16+00:00

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.

GreenDay2001 · Answer 6 · 2007-10-14T18:55:55+00:00

Very well said MidiMagic and Matt, I totally agree with you both!!!

But what about Matty's problem, small little spaces still left. I think its firefox problem. It works in IE though, so Matts signature fits the best. lo;

MattEvans 473 Veteran Poster Team Colleague Featured Poster · Answer 7 · 2007-10-14T22:05:16+00:00

Try this, aswel as the code recommended by MidiMagic to ensure that the relevant cells have no inner padding.

img{ 
display:block;
margin:0;
}

That'll make images act like blocks, so, if you're relying on the inline behaviour of images, you might be able to get away with removing the display:block;.. the important part is to make sure that images have no margin ( outer padding ).. but, browsers ( particularly Firefox ) seem to make their own rules for the initial vertical spacing/line height/baseline/etc for text, and images are as specified, inline, thus subject to 'text rules' for placement.

GreenDay2001 · Answer 8 · 2007-10-14T22:31:42+00:00

But Matt, I reckon, I also tried that thing, but didn't work on firefox.

MattEvans 473 Veteran Poster Team Colleague Featured Poster · Answer 9 · 2007-10-14T22:34:47+00:00

MattEvans 473 Veteran Poster

17 Years Ago

Have you got code for a page that I can look at?

GreenDay2001 · Answer 10 · 2007-10-14T22:40:16+00:00

I used the page posted by Matty, but modified by me posted before.

MattEvans 473 Veteran Poster Team Colleague Featured Poster · Answer 11 · 2007-10-14T22:52:39+00:00

Hm, I can't seem to reproduce the problem.. Using the code in post #4 with no modifications ( except changing the imgs' srcs to point at Matty's server )... Firefox 2 on Linux, screenshot attached.. But I can't see any gaps...

With the link Matty posted (in #5), I also see no gaps.. but the layout breaks down at widths larger than a certain threshold in Firefox and Opera, and I imagine also IE..

Can you post a screenshot of how you see the code in post #4, on your FF vishesh. Put 'http://stormtrooper.webng.com/' infront of all of the image srcs.. sorry about the hotlinking Matty =P

MidiMagic 579 Nearly a Senior Poster · Answer 12 · 2007-10-15T10:43:58+00:00

Try this, aswel as the code recommended by MidiMagic to ensure that the relevant cells have no inner padding.
img{ 
display:block;
margin:0;
}

Actually, the margins, borders, and padding are all OUTSIDE an image on both browsers.

But block objects are different on the two browsers:

- FF puts the margins, borders, and padding OUTSIDE the set size of a div or other block object.

- IE puts the margins, borders, and padding INSIDE the set size of a div or other block object.

GreenDay2001 · Answer 13 · 2007-10-15T18:36:46+00:00

Using the code in post #4 with no modifications ( except changing the imgs' srcs to point at Matty's server )

Err...I changed img src's to Matty's server cause I didn't wanted to copy each image to my computer, so I simply pointed it directly since I'm using my regular editor. Also I set cellpadding and cellspacing to 0 and removed width="60%", didn't used styles. This removed big large spaces.

But I tried to several things including the remedy above before to remove the small pixel width spaces still left, but didn't worked on FF.

Can you post a screenshot

It's too late, I suppose. He has changed several things and the that problem couldn't be seen now(just observed this now). I didn't have copies of those images.

Also I see the images changed(basically background to white). So I think those small white spaces(since the page background was white) been covered by white images. Will have to check if they still exist by changing the page background.

petree69 0 Newbie Poster · Answer 14 · 2009-03-30T03:40:53+00:00

Instead of making different images, you could make one whole image, and then use image mapping to make different sections of the image link to different links. This sounds like what you want to do. It sounds like you want to make it look like one whole image, but have different sections of the image link to different pages. This is exactly what image mapping is, except the image is actually one whole image, so you won't have to worry about spaces in between the images.

You can map the image the hard way by inserting all the coordinates into the html code OR you can do it the easy way using GIMP. GIMP is a COMPLETELY FREE image editor, and there is a feature on there that lets you select portions of the image using your mouse, and then tell it what page to link each portion to. Then, after you have told it all the links, it will generate the code for you to insert into your page.

To learn exactly how to map an image using gimp, just click HERE.

To download GIMP, click HERE. Just download the latest version of GIMP (it's only 15 Megabytes) and follow the instructions on THIS PAGE. It will tell you exactly how to map an image. It is VERY easy.

Good Luck! :]

almostbob 866 Retired: passive income ROCKS · Answer 15 · 2009-03-31T06:02:27+00:00

<table border="0" cellpadding='0' cellspacing='0' align="center" width="60%">

browsers default to different cell whitepace that may be the cause of the white around images, apologies if already mention, I havent read all the posts yet, got to write while the brain works

MidiMagic 579 Nearly a Senior Poster · Answer 16 · 2009-04-02T10:34:51+00:00

I don't understand why you wasted time cutting an image into 25 pieces and then trying to piece them back together. Just send the entire image as one object.

robbiegod316 0 Newbie Poster · Answer 17 · 2012-01-10T03:40:16+00:00

Here is how I solved this problem. Setting the margin to 0 and padding to 0 is not enough.

What you need to do is set the td element that holds the images to display:block; in your css. Then add a float:left; to the image that is in the td elements. This will rid you of the extra white space.