Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2003-12-10
4
Medium Priority
?
631 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 100 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 100 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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…

926 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