Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Clean space in TD Tag using CSS

Status
Not open for further replies.
OOzy

OOzy

Programmer
Jul 24, 2000
135
SA
Dears,

I am really having a problem with <td> leaving spaces around an image. I am css to style my tables. I have following very simple table.

Just to put in the picture, I did the following:

I made web layout in photoshop, the I sliced it. Next, I cleaned the html file from all none xhtml tags and used css.

My layout looks ugly now as there are big spaces between the slices. All what I need is to remove all these space so my layout look like a one nice intact layout.

I really hope that I made it clear.




<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"">
<html xmlns=" <head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Test Table Cell</title>
<link rel="stylesheet" href="/src/css/mz.css" type="text/css" />
</head>
<table id="main">
<tbody>
<tr>
<td><img src="src/images/layout_01.png" width="750" height="26" /></td>
</tr>
</tbody>
</table>

MY CSS IS:

body{
margin:0px;
font-size:medium;
font-family: verdana, arial, helvetica, sans-serif;
font: #330000;
}

table#main {
width:750px;
height:100%;
vertical-align: top;
border-collapse: collapse;
border-spacing: 0;
padding: 0%;
margin:auto;
}

div#main
{
text-align:center;
}

td.main
{
border-collapse: collapse;
border-spacing: 0;
margin:auto%;
padding:0%;
}

img
{
padding:110;
margin:auto;
border:220;
border-collapse:collapse;
}
 
Sort by date Sort by votes
This part is wrong:
Code: 
td.main
{
border-collapse: collapse;
border-spacing: 0;
margin:auto%;
padding:0%;
}
This is looking for a td with a class main, something that does not exist in your code. Also, border-spacing is not supported in most browsers. Finally, you only need border-collapse on the table. Change this part of the code to read:
Code: 
#main td
{
  border-spacing: 0;
  margin: auto;
  padding: 0;
}
 
Upvote 0 Downvote
Dear,

the layout is getting better. The spaces on the sides had disappeared. However, there are still a hair line in the top of each image and a thick line in the bottom of each image. How can I get red of them. I would like the <TD> to be exactly the same size as the image.
 
Upvote 0 Downvote
Looking at your page, I wonder why do you need tables. Just make sure all images in the header (give them a class or embed them in a div with a class or id) have display: block; and put the images one after another. That should give you the same result with much less code. You only have one cell per row, which debunks the whole idea of table.
 
Upvote 0 Downvote
Also:

1. Your Doctype was incomplete;
2. You had the xml declaration at the top which confuses IE;
3. You had numerous CSS errors;
4. Check this for lightweight option:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>{!TITLE!}</title>
    <style type="text/css">
body { 
  margin: 0;
  padding: 0;
  font-size: medium;
  font-family: verdana, arial, helvetica, sans-serif;
  color: #330000;
  background-color: #f6f6f6;
  text-align:center;
}


div#main
{
  text-align: left;
  width: 750px;
  margin: 0 auto;
  padding: 0;
}


#main img
{
  display: block;
}
    </style>
  </head>
  <body>
    <div id="main">
<img src="[URL unfurl="true"]http://hab.bjaili.com/images/test_01.png"[/URL] width="750" height="26" alt="" />
<img src="[URL unfurl="true"]http://hab.bjaili.com/images/test_02.png"[/URL] width="750" height="16" alt="" />
<img src="[URL unfurl="true"]http://hab.bjaili.com/images/test_03.png"[/URL] width="750" height="80" alt="" />
<img src="[URL unfurl="true"]http://hab.bjaili.com/images/test_04.png"[/URL] width="750" height="32" alt="" />
<img src="[URL unfurl="true"]http://hab.bjaili.com/images/test_05.png"[/URL] width="750" height="50" alt="" />
<img src="[URL unfurl="true"]http://hab.bjaili.com/images/test_06.png"[/URL] width="750" height="29" alt="" />
<img src="[URL unfurl="true"]http://hab.bjaili.com/images/test_07.png"[/URL] width="750" height="36" alt="" />
<img src="[URL unfurl="true"]http://hab.bjaili.com/images/test_08.png"[/URL] width="750" height="57"  alt="" />
<img src="[URL unfurl="true"]http://hab.bjaili.com/images/test_09.png"[/URL] width="750" height="225" alt="" />
<img src="[URL unfurl="true"]http://hab.bjaili.com/images/test_10.png"[/URL] width="750" height="48" alt="" />
    </div>
  </body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
816
pmonett
pmonett
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
818
spamjim
spamjim
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
642
PeDa
PeDa
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top