•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 423,379 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,883 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 6165 | Replies: 18
 |
•
•
Join Date: Oct 2006
Location: New York City
Posts: 2,553
Reputation: 
Rep Power: 7
Solved Threads: 1
White Space Between Table Images 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
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>
•
•
Join Date: Oct 2006
Location: India
Posts: 1,289
Reputation:
Rep Power: 4
Solved Threads: 32
Add
.
And yes, there is no need to use three body tags. Only one is allowed, so make it like this
cellpaddingand cellspacingproperty and set them to 0 in your table. html Syntax (Toggle Plain Text)
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)
•
•
Join Date: Oct 2006
Location: New York City
Posts: 2,553
Reputation:
Rep Power: 7
Solved Threads: 1
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
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
•
•
Join Date: Oct 2006
Location: India
Posts: 1,289
Reputation:
Rep Power: 4
Solved Threads: 32
Hi Matty,
If we remove
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
Now your whole code will look like this:
Vishesh
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)
Vishesh
Last edited by vishesh : Oct 11th, 2007 at 3:17 am.
•
•
Join Date: Oct 2006
Location: New York City
Posts: 2,553
Reputation:
Rep Power: 7
Solved Threads: 1
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
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
•
•
Join Date: Oct 2007
Location: Isle of Wight, UK
Posts: 5
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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.
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.
•
•
Join Date: Oct 2006
Location: India
Posts: 1,289
Reputation:
Rep Power: 4
Solved Threads: 32
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.
> 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 6:06 am.
•
•
Join Date: Oct 2007
Location: Isle of Wight, UK
Posts: 5
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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
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
•
•
Join Date: Oct 2006
Location: India
Posts: 1,289
Reputation:
Rep Power: 4
Solved Threads: 32
•
•
•
•
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 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.
•
•
Join Date: Jan 2007
Posts: 2,556
Reputation:
Rep Power: 7
Solved Threads: 114
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:
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;} Daylight-saving time uses more gasoline
|
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
•
•
•
•
blackhole cancellation code css development div dreamweaver earth engine firefox google google checkout google checkout vat gpt guid partition table hack hacking html html api inbox it javascript jobs linux microsoft nasa news noise partition pink search space storage symantec tables universe unlimited w3c web white white hat hacker wysiwyg xml yahoo
- Open In New Window Php (PHP)
- javascript works in IE but not working in firefox (JavaScript / DHTML / AJAX)
- Photoshop: add a white photo frame to your images (Web Design Tutorials)
- Table breaking div (HTML and CSS)
- How can I create database/table images in MySQL (PHP)
- Pesky IE Hickey (HTML and CSS)
- Problem with buttons on a site (Site Layout and Usability)
- Help building Table, Images dont cleanly come together (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: DIVs are seperating
- Next Thread: Alt - for search engines
