Remove white space between sliced images?

So, you decided to create a webpage template in Photoshop then publish in online but here it goes,

a white spaces appeared. This is because of the spacer images. 

Anyway, too much for the introduction!

Here's how to solve/do it:

1. Make the spacer image as background for you table cell.

Code given by Photoshop: (something like this)

<td><img src="images/spacer.gif" width="1" height="29" alt="" /></td>

You have to change it to:

<td width="1" height="29" background="images/spacer.gif"></td>

Remove the "img" code instead use it as "background" of your table cell then the "height" and "width" specification. Apply this to all spacer images, of course with different width and height. haha

When you publish it online , something like this:

<td width="size" height="size" background="link of the spacer image"></td>

Input the appropriate details.

2. Apply some CSS codes.

First is, define your table. I mean find the "id" or "class"

<table id="Table_01" border="0" cellpadding="0" cellspacing="0" width=800" height="1000">

The default "id" given by Photoshop is "Table_01", you can change that of course. hehe

Remove the height and width attributes.

The difference between "id" and "class" is "id" is unique meaning it can be used only once while "class" can be used as much as you want. In CSS, "#" is used for "id" and "." for "class" to define their attributes or properties. 

Here's a short code:

<style type='text/css'>
#Table_01 tr,td{vertical-align:bottom}
#Table_01 img{display:block;vertical-align:bottom}
</style>

#Table_01 should be replace depends on your table id. Place that above "</head>"

That's it. It works fine in Google Chrome and Firefox. 

You can see it live here: http://evolveyourdesigns.blogspot.com/

The webpage is created using Photoshop and some coding. :P

NOTE: although Photoshop creates a HTML file for you, it is still a graphics application better use Dreaweaver for coding or Notepad.hehe