: Aligning Images in Tables and Lists I am trying to layout a list vertically that has a checkbox, image and description.... see here for an example... http://www.sk8loc8.com/deposit/list.jpg As you

@LarsenBagley505

Posted in: #Html #Images #Table

I am trying to layout a list vertically that has a checkbox, image and description....

see here for an example...
www.sk8loc8.com/deposit/list.jpg
As you can see the images look a bit too high and i would like them to 'sink' a little to line up with the text and checkbox.

i put them in a table to get around the issue, but it acts just the same as an unordered list and the image sits higher.

i tried using valign=top for the text and checkbox but this doesnt seem to work, neither does adding a bottom-margin to the text, or adding a top-margin to the image.

does anyone have any advice?

here is the markup...

<table id="mapLegend" class="mapLegendTable" border="1" cellpadding="5px">
<tr title="A skatepark we know exists">
<td valign="top"><input type="checkbox" /></td>
<td><img src="assets/images/gIconRedDot.png" alt="Skatepark" /></td>
<td valign="top">Park</td>
</tr>
<tr title="A skatepark we strongly recommend">
<td valign="top"><input type="checkbox" /></td>
<td><img src="assets/images/gIconYellowStar.png" alt="Recommended Skatepark" /></td>
<td valign="top">Recommended Park</td>
</tr>
<tr title="A Skater Owned Shop">
<td valign="top"><input type="checkbox" /></td>
<td><img src="assets/images/gIconSkateshop.png" alt="Skate Shop" /></td>
<td valign="top">Skate Shop</td>
</tr>
<tr title="A skatepark we do not know anything about. It MAY exist but we do not know for sure">
<td valign="top"><input type="checkbox" /></td>
<td><img src="assets/images/gIconUnconfirmedSpot.png" alt="Unconfirmed Skatepark" /></td>
<td valign="top">Unconfirmed Park</td>
</tr>
</table>


and the old code, as an unordered list...

<ul id="mapLegend">
<li id="parkIcon" title="A skatepark we know exists">
<img src="assets/images/gIconRedDot.png" alt="Skatepark" /><span>Park</span></li>
<li id="recommendedParkIcon" title="A skatepark we recommend">
<img src="assets/images/gIconYellowStar.png" alt="Skatepark" />Recommended Park</li>
<li id="shopIcon" title="A Skater Owned Shop">
<img src="assets/images/gIconSkateshop.png" alt="Skatepark" />Skate Shop</li>
<li id="unconfirmedParkIcon" title="A skatepark we do not know anything about. It MAY exist but we do not know for sure">
<img src="assets/images/gIconUnconfirmedSpot.png" alt="Skatepark" />Unconfirmed
Park</li>
</ul>

Vote Up Vote Down

Login to post a comment!