Posted by R.A.M. on 11/15/07 17:07

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/

• Next in forum: Re: SCAM Alert - Jerry Stuckle
• Prev in forum: Re: Apologies to Chaddy
• Thread view: newbie: images in table moved

[Reply to this message]