Solved

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

Posted on 2003-12-10
4
611 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
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

914 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now