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
"Integration"">
<p id="AssociationPicture" /> <br/>
<p id="AsociationCaption" />
</a>
</td>
<td align="left" valign="top">
<a id="Center" href="Center.html" title="Center of psychoterapy">
<p id="CenterPicture" /><br/>
<p id="CenterCaption" />
</a>
</td>
</tr>
<tr align="center">
<td align="right" valign="top">
<a id="Club" href="Club.html" title="Club "Amicus"">
<p id="ClubPicture" /> <br/>
<p id="ClubCaption" />
</a>
</td>
<td align="left" valign="top">
<a id="Voluntary" href="Voluntary.html" title="Voluntary">
<p id="VoluntaryPicture" /><br/>
<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/
