Table alignment issues with image and text

  • goliathgames

    (@goliathgames)


    13 years ago

    We had a company create a micro-site for an upcoming game we our introducing this summer and they used wordpress we can no longer contact them and I am doing my best to update our “How to Play” page which basically shows the instructions. Here is what I have so far.
    http://www.gooeylouiegame.com/74-2

    If you scroll down you can see under “Playing the game” the images are not aligned with the text.

    I created the table below and the above is how it ended up.

    <table width="1111">
<tbody>
<tr>
<td><img class="aligncenter" alt="pick 1" src="http://www.gooeylouiegame.com/wp-content/uploads/2013/04/Die1.png" width="60" height="56" /></td>
<td style="text-align: left;">PICK ONE GOOEY</td>
</tr>
<tr>
<td><img class="aligncenter" alt="Pick 2" src="http://www.gooeylouiegame.com/wp-content/uploads/2013/04/die2.png" width="60" height="56" /></td>
<td>PICK TWO GOOEYS</td>
</tr>
<tr>
<td><img class="aligncenter" alt="don't pick any" src="http://www.gooeylouiegame.com/wp-content/uploads/2013/04/die3.png" width="60" height="56" /></td>
<td style="text-align: left;">SKIP YOUR TURN DON’T PICK ANY GOOEYS</td>
</tr>
<tr>
<td><img class="aligncenter" alt="reverse" src="http://www.gooeylouiegame.com/wp-content/uploads/2013/04/die4.png" width="60" height="56" /></td>
<td style="text-align: left;">PICK ONE GOOEY AND THEN GAME PLAY SWITCHES</td>
</tr>
</tbody>
</table>

    Here is also a link to the the style.css I have to work with.
    http://www.gooeylouiegame.com/css

    Hopefully someone can help me figure out what to do. I know a little about manipulating the style sheet however as much detail as possible is very helpful if it is necessary to fix this issue. Thank you in advance for helping.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Krishna

    (@1nexus)

    13 years ago

    Try this:

    <table width="1111">
<tbody>
<tr>
<td valign="top"><img class="aligncenter" alt="pick 1" src="http://www.gooeylouiegame.com/wp-content/uploads/2013/04/Die1.png" width="60" height="56" /></td>
<td style="text-align: left;">PICK ONE GOOEY</td>
</tr>
<tr>
<td valign="top"><img class="aligncenter" alt="Pick 2" src="http://www.gooeylouiegame.com/wp-content/uploads/2013/04/die2.png" width="60" height="56" /></td>
<td style="text-align: left;">PICK TWO GOOEYS</td>
</tr>
<tr>
<td valign="top"><img class="aligncenter" alt="don't pick any" src="http://www.gooeylouiegame.com/wp-content/uploads/2013/04/die3.png" width="60" height="56" /></td>
<td style="text-align: left;">SKIP YOUR TURN DON’T PICK ANY GOOEYS</td>
</tr>
<tr>
<td valign="top"><img class="aligncenter" alt="reverse" src="http://www.gooeylouiegame.com/wp-content/uploads/2013/04/die4.png" width="60" height="56" /></td>
<td style="text-align: left;">PICK ONE GOOEY AND THEN GAME PLAY SWITCHES</td>
</tr>
</tbody>
</table>

    The above code is just an improvisation of your code. But for formatting tables review:
    http://www.w3schools.com/tags/tag_table.asp

    Thread Starter goliathgames

    (@goliathgames)

    13 years ago

    I see what you did there and it didn’t work as you can see http://www.gooeylouiegame.com/74-2 there has been no change. Thank you for trying. You would think adjusting the vertical alignment would do the trick.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Table alignment issues with image and text’ is closed to new replies.

Tags