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
Richard KortsBusiness Owner / Chief DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

unrealized92Commented:
Since you have these images in a table, you need to set the table attributes & CSS to have no border.

<table cellspacing="0" cellpadding="0">

and in CSS:

table {border: none;}
Tom BeckCommented:
Browsers apply a default padding and margin to web pages. You can remove it by adding this as your first definition:

* { padding: 0; margin: 0 auto }

That takes out the space at the top.

You are using an html5 doctype so attributes "cellpadding" and "cellspacing" on tables is not supported. Use border-spacing: 0; border-collapse: collapse instead;

You have font-size: 30px in the css for the table. This will create space. Better to use something scalable like font-size: 1em. Or you can set line-height: 0 to remove space created by the font-size.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.