asked on

Unwanted spacing around images

Please look at http://www.rainrich.com/scheduling/wps_test.htm.

Note the blank space at the top (before the first image and between the two images.

I don't want that & I can't see what is causing that?

Attached are source & images.

Thanks
wps-test.htm
head2l-for-sched.jpg
head2r-for-sched.jpg
wp-top-head.jpg

SOLUTION

unrealized92

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

Images if displayed inline will have a gap which can be removed with display: block. This will sort of work for you but because you have two images in a cell this will cause the one image to display below the other will removing the gap below the header image - which is not desirable.

Another trick is to set the font-size of the element to 0 - this seems to work for you - so

<table width="100%" cellspacing="0" cellpadding="0" align="center" class="pt12">
  <tbody><tr>
    <td width="2%">&nbsp;</td>
<!-- INLINE SYTLED font-size: 0px MOVE TO CSS AS REQUIRED
    <td style="font-size: 0px;"><img border="0" src="images/wp_top_head.jpg"></td>
  </tr>
  <tr>
    <td width="2%">&nbsp;</td>
    <td><img border="0" src="images/head2l-for-sched.jpg"><a href="http//www.rainrich.com"><img border="0" src="images/head2r-for-sched.jpg"></a></td>
  </tr>  
</tbody></table>

Open in new window

Having said that - the markup is not great and you will most likely run into other problems. I would consider using a different method for your layout.