A simple problem with tables

HTML & CSS
#1

Hey there folks,

I’ve got a small problem with the pictures I’m trying to insert into a table. I’m building a table with php which has these pictures I’m inserting in the left-most column. The horizontal alignment of the pictures in each cell is fine, but for some reason I’m getting too much space left at the bottoms of each cell holding the picture. Here is a link showing a picture, you can see that there’s extra black space left at the bottom of each cell with a picture in it:

Any idea how I can get rid of this extra black space? All the images are of the same height and width, and the cells holding the pictures should be enveloping the pictures without leaving the extra black space at the bottom. I’m assuming it’s a problem with the CSS or table properties, any ideas?

#2

have you tried removing the border of the image

#3

The images don’t have borders as far as I can tell, I tried removing the border for the cells in the table but still no luck. Not sure why I’m still getting this extra cell space at the bottom :frowning:

#4

Can we see your HTML table code?

#5

Yep here’s the html code for the table itself, I use my own php functions called ‘Construct’ to create the cells in the table.

[php]

<?php Construct($XCenter, $YCenter); ?>
[/php]

And here the construct function that populates the table:

[php]function Construct($XC, $YC) {

$graphics = array("Castle.png", "Smith.png", "Farm.png", "LumberMill.png", "StoneCutter.png", "IronMine.png", "GoldMine.png");
$building = array("Castle", "Smith", "Farm", "Lumber Mill", "Stone Cutter", "Iron Mine", "Gold Mine"); 

// Get the tileID for query
$TID = (($XC * 1000) - 1000) + $YC;

// Perform database query to find tile information
$result = mysql_query("SELECT Building FROM tiledata WHERE TileID=$TID");
if (!$result) {
	die("Database query failed: " . mysql_error());
}

$row = mysql_fetch_array($result);

$Index = $row["Building"];	

// if the tile is empty provide the user with available building options
if ($Index < 10) {			
	for ($x=0; $x<=6; $x++) {
		
		// Fill each block in row 					
		echo '<td bgcolor="000000" width="48" height="48" align="center"><img src="images/Terrain/' . $graphics[$x] . '" width="48" height="48" alt="Tile" /></td>';			
		echo '<td bgcolor="000000" width="100" height="48" >' . $building[$x] . '</td>';	
		echo '<td bgcolor="000000" width="200"></td>';									
		echo '<td bgcolor="000000" width="100"></td>';
		echo '<td bgcolor="000000" width="100"></td>';
	
		// start a new row
		echo '</tr><tr>';																				
	}			
}

}[/php]

#6

[php]

[/php] Try that ^
#7

Still the same unfortunately :frowning:

#8 
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">

try removing the border=‘1’

#9

or make the widthon the table for the pictures smaller the what it needs to be. The browser will insert the image anyways and make it a tight fit. make it like 2 px smaller then the image.

Sponsor our Newsletter | Privacy Policy | Terms of Service