• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 646
  • Last Modified:

Alignment issue when placing an image and text inside one <TD> tag

Hello All,

When inside a <TD> tag, I place an image and a text, there seems to a slight alignment problem. The text is aligned to the bottom of the cell whereas the image center aligned.
eg:
<td><a href="#"><img src="xyz.gif" width="11" height="22" alt="">&nbsp;sometext</a></td>
In the browser, "sometext" is aligned bottom.

Is there any way, I can fix this without placing the image and the text in two different cells. I could have done this in two different cells, but if you look at the example, the image and the text is inside the href tag and if I place them in two different cells, then I should have href to be given for both, which I would like to avoid.

Please let me know if this is possible. One more very important thing, the solution should be working in both IE and Netscape 4.x and higher versions.

Thank you all in advance
0
gops1
Asked:
gops1
2 Solutions
 
seanpowellCommented:
You should be able to line it up like this:

<td><a href="#"><img border="0" src="xyz.gif" width="11" height="22" alt="" align="middle">&nbsp;sometext</a></td>

Depending on the font you're using (which carries it's own line-spacing) you can also use:

<a href="#"><img border="0" src="xyz.gif" width="11" height="22" alt="" align="absmiddle">&nbsp;sometext</a>

Note: The &nbsp; space character is going to be underlined in your example, because it's part of the <a> link. So there's a couple of options:

1. Add a right margin to the image (this is the preferred method)
<a href="#"><img border="0" src="xyz.gif" width="11" height="22" alt="" align="middle" style="margin-right:5px;">sometext</a>

2. Remove the underline from the link
<a href="#" style="text-decoration:none;"><img border="0" src="xyz.gif" width="11" height="22" alt="" align="absmiddle">&nbsp;sometext</a>

3. Add an "hspace" attribute to the image to push the text to the right (this wis also move the image to the right because the hspace applies to both sides of the image
<td valign="middle"><a href="#"><img border="0" src="xyz.gif" width="11" height="22" alt="" align="absmiddle" hspace="5">sometext</a></td>

0
 
Timothy GoldenWeb DevCommented:
sometimes CSS (style="margin-right:5px;") will not work in all browsers in all cases this is why i use nested tables and align then cell becuase most HTML 4 compliant browsers will render this correctly

<table>
<tr>
      <td>
      <table>
      <tr>
            <td valign="top"><img border="0" src="xyz.gif" width="11" height="22" alt=""></td>
            <td valign="top">text</td>
      </tr>
      </table>
      </td>
</tr>
</table>


     
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now