Solved

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

Posted on 2003-12-10
4
619 Views
Last Modified: 2008-03-04
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
Comment
Question by:gops1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 31

Accepted Solution

by:
seanpowell earned 25 total points
ID: 9912175
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
 
LVL 3

Assisted Solution

by:Timothy Golden
Timothy Golden earned 25 total points
ID: 10022464
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this. Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it i…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question