•
•
•
•
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 456,533 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 2,906 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: 6983 | Replies: 18
 |
| |
•
•
Join Date: Oct 2006
Location: New York City
Posts: 2,553
Reputation: 
Rep Power: 8
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: 5
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: 8
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: Jul 2006
Location: Deptford, London
Posts: 971
Reputation:
Rep Power: 5
Solved Threads: 48
Posting Shark
Try this, aswel as the code recommended by MidiMagic to ensure that the relevant cells have no inner padding.
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.
img{
display:block;
margin:0;
} Plato forgot the nullahedron..
•
•
Join Date: Jan 2007
Posts: 2,604
Reputation:
Rep Power: 7
Solved Threads: 119
•
•
•
•
Originally Posted by MattEvans 
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.
Daylight-saving time uses more gasoline
•
•
Join Date: Oct 2006
Location: India
Posts: 1,289
Reputation:
Rep Power: 5
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 4:17 am.
•
•
Join Date: Oct 2006
Location: New York City
Posts: 2,553
Reputation:
Rep Power: 8
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: Jul 2006
Location: Deptford, London
Posts: 971
Reputation:
Rep Power: 5
Solved Threads: 48
Posting Shark
Have you got code for a page that I can look at?
Plato forgot the nullahedron..
•
•
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: 5
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 7:06 am.
|
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Hybrid 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
