Solved

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

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

Suggested Solutions

Title # Comments Views Activity
How to make footer stick to bottom 9 36
Hide Table in merge 3 31
SSRS 2016 Rendering HTML tables 3 26
..ignore the Question 1 7
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

856 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