newbie: images in table moved

[R.A.M.]

Hello,
I have little experience in HTML/CSS and I would like to ask a question. I
have prepared a table (2x2) of images with captions. Unfortunately images in
second column are moved down at about 30px.
Could you explain me why and how to correct it?
Here's HTML:

<form id="Form" name="Form">
<table border="0" width="725px">
<tr align="center">
<td align="right" valign="top">
<a id="Assocatiotion" href="Association.html" title="Association
&quot;Integration&quot;">
<p id="AssociationPicture" />&nbsp;<br/>
<p id="AsociationCaption" />&nbsp;
</a>
</td>
<td align="left" valign="top">
<a id="Center" href="Center.html" title="Center of psychoterapy">
&nbsp;<p id="CenterPicture" /><br/>
&nbsp;<p id="CenterCaption" />
</a>
</td>
</tr>
<tr align="center">
<td align="right" valign="top">
<a id="Club" href="Club.html" title="Club &quot;Amicus&quot;">
<p id="ClubPicture" />&nbsp;<br/>
<p id="ClubCaption" />&nbsp;
</a>
</td>
<td align="left" valign="top">
<a id="Voluntary" href="Voluntary.html" title="Voluntary">
&nbsp;<p id="VoluntaryPicture" /><br/>
&nbsp;<p id="VoluntaryCaption" />
</a>
</td>
</tr>
</table>
</form>

Here's CSS:

#AssociationPicture
{
background-image: url('images/Association.gif');
width: 200px;
height: 200px;
}
#AssociationCaption
{
background-image: url('images/Association_caption.gif');
width: 200px;
height: 25px;
}
#Association:hover #AssociationCaption
{
background-image: url('images/Association_over.gif');
width: 200px;
height: 25px;
}
#CenterPicture
{
background-image: url('images/Center.gif');
width: 200px;
height: 200px;
}
#CenterCaption
{
background-image: url('images/Center_caption.gif');
width: 200px;
height: 25px;
}
#Center:hover #CenterCaption
{
background-image: url('images/Center_over.gif');
width: 200px;
height: 25px;
}
#ClubPicture
{
background-image: url('images/Club.gif');
width: 200px;
height: 200px;
}
#ClubCaption
{
background-image: url('images/Club_caption.gif');
width: 200px;
height: 25px;
}
#Club:hover #ClubCaption
{
background-image: url('images/Club_over.gif');
width: 200px;
height: 25px;
}
#VoluntaryPicture
{
background-image: url('images/Voluntary.gif');
width: 200px;
height: 200px;
}
#VoluntaryCaption
{
background-image: url('images/Voluntary_caption.gif');
width: 200px;
height: 25px;
}
#Voluntary:hover #VoluntaryCaption
{
background-image: url('images/Voluntary_over.gif');
width: 200px;
height: 25px;
}

Thank you!
/RAM/

 

[Beauregard T. Shagnasty]

I have little experience in HTML/CSS and I would like to ask a
question. I have prepared a table (2x2) of images with captions.
Unfortunately images in second column are moved down at about 30px.
Could you explain me why and how to correct it?
Here's HTML:

Don't post code. There could very well be other parts of your page,
missing here, that affect your problem. Post the URL. We also don't have
copies of your images, so any testing would be only a guess.

<a id="Assocatiotion" href="Association.html" title="Association
&quot;Integration&quot;">

Your spell checker is broken. Where is the CSS for "Assocatiotion" ?