Click here to get back home

Text and Image inside table

Alight Text Left and Image right in same cell ??
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
Text and Image inside table Alight Text Left and Image right in same cell ?? Jason 10-24-2006
Posted by Jason on October 24, 2006, 12:55 am
Please log in for more thread options

Is that possible? How?

<td >
<asp:Label ID="StartDateLabel" runat="server" Text="Start Date:">
<asp:imagebutton ID="Imagebutton1" width=18 Height=18
CommandName=SetDate imageUrl="../cal.jpg" runat=server />
</asp:Label>
</td>
<td >


Posted by Ben C on October 24, 2006, 2:50 am
Please log in for more thread options

> Is that possible? How?

Set text-align: left on the cell as usual (it's likely to be the
default), and make the image float: right.

To work around a Firefox float bug, better to put the image before the
text in the source. Otherwise it will always end up on the next line.

Posted by jobs on October 24, 2006, 12:22 pm
Please log in for more thread options


I can't seem to get the image to align right with the a textbox to the
right of it.The datepicker image is now right justificed but the top of
the imiage is about at the middle of the textbox and label:

<td >
<asp:Label ID="StartDateLabel" runat="server" Text="Start
Date:"></asp:Label>
<div style="float:right;vertical-align:top"/>
<asp:imagebutton ImageAlign=top ID="Imagebutton1" width=20 Height=20
CommandName=SetDate
imageUrl="../App_Themes/WinXP_Silver/Images/datepicker.gif"
runat=server />
</div>
</td>

Also, the above is affecting the label pushing it up.



Ben C wrote:
> > Is that possible? How?
>
> Set text-align: left on the cell as usual (it's likely to be the
> default), and make the image float: right.
>
> To work around a Firefox float bug, better to put the image before the
> text in the source. Otherwise it will always end up on the next line.


Posted by Ben C on October 24, 2006, 12:39 pm
Please log in for more thread options


> I can't seem to get the image to align right with the a textbox to the
> right of it.The datepicker image is now right justificed but the top of
> the imiage is about at the middle of the textbox and label:

A float is vertically aligned differently from an inline replaced (e.g.
a normal img).

An inline replaced sits on the baseline. But a float has its top edge
aligned with the top of the line box.

I can think of two solutions.

1. Use a table with one row and two cells with vertical-align: baseline.
Put the text in the first cell and the image in the second.
2. A bit more unusual, set text-direction: rtl on the container, and
text-direction: ltr on the asp:Label, and leave the image as an
inline replaced (i.e. don't float it).

> <td >
> <asp:Label ID="StartDateLabel" runat="server" Text="Start
> Date:"></asp:Label>
> <div style="float:right;vertical-align:top"/>
> <asp:imagebutton ImageAlign=top ID="Imagebutton1" width=20 Height=20
> CommandName=SetDate
> imageUrl="../App_Themes/WinXP_Silver/Images/datepicker.gif"
> runat=server />
> </div>
> </td>
>
> Also, the above is affecting the label pushing it up.
>
>
>
> Ben C wrote:
>> > Is that possible? How?
>>
>> Set text-align: left on the cell as usual (it's likely to be the
>> default), and make the image float: right.
>>
>> To work around a Firefox float bug, better to put the image before the
>> text in the source. Otherwise it will always end up on the next line.
>

Posted by Ben C on October 24, 2006, 1:12 pm
Please log in for more thread options


>> I can't seem to get the image to align right with the a textbox to the
>> right of it.The datepicker image is now right justificed but the top of
>> the imiage is about at the middle of the textbox and label:
>
> A float is vertically aligned differently from an inline replaced (e.g.
> a normal img).
>
> An inline replaced sits on the baseline. But a float has its top edge
> aligned with the top of the line box.
>
> I can think of two solutions.
>
> 1. Use a table with one row and two cells with vertical-align: baseline.
> Put the text in the first cell and the image in the second.

I should have added then set text-align: left on the first cell and
text-align: right on the second one.

> 2. A bit more unusual, set text-direction: rtl on the container, and
> text-direction: ltr on the asp:Label, and leave the image as an
> inline replaced (i.e. don't float it).

Actually there's very little to be gained by messing about with
text-direction, so I'd say forget that.

Similar ThreadsPosted
Image Positioning Inside Table Problem (IE only) January 2, 2008, 8:09 am
Setting an image as background to a table cell. September 27, 2005, 5:54 pm
How can I force clipping of text in a table cell? October 18, 2004, 8:49 am
ALT image for text? February 28, 2005, 10:40 am
image alt style pop up for text August 6, 2004, 8:25 am
Image flush with text input box November 19, 2006, 9:42 am
Image maps and area alt text June 14, 2007, 8:08 am
CSS property float: left inside table? July 19, 2007, 5:24 am
how to float image surrounded by text on 4 sides February 20, 2005, 8:17 pm
Problem positioning text over an centered image September 22, 2005, 6:07 pm

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap