Webmasters Stack Exchange is a question and answer site for pro webmasters. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

see here for an example...


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 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 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 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>

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
share|improve this question

closed as off topic by Su', paulmorriss Feb 1 '13 at 10:50

Questions on Webmasters Stack Exchange are expected to relate to webmastering within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

up vote 1 down vote accepted

The list will do. You need to apply the 'vertical-align:top' style to the images. I usually use 'middle' for this which looks a little better for one-liners.

This can be done in your image direction, as in:

<img src="assets/images/gIconRedDot.png" alt="Skatepark" style="vertical-align:top"/>

Or by CSS:

#mapLegend li img {
share|improve this answer
that worked perfectly, thanks – Baldy Apr 10 '11 at 15:58

Not the answer you're looking for? Browse other questions tagged or ask your own question.