By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,601 Members | 1,116 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,601 IT Pros & Developers. It's quick & easy.

Text and Image inside table <td> Alight Text Left and Image right in same cell ??

P: n/a
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 >

Oct 24 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
On 2006-10-24, Jason <ja***@cyberpine.comwrote:
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.
Oct 24 '06 #2

P: n/a
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:
On 2006-10-24, Jason <ja***@cyberpine.comwrote:
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.
Oct 24 '06 #3

P: n/a
On 2006-10-24, jobs <jo**@webdos.comwrote:
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:
>On 2006-10-24, Jason <ja***@cyberpine.comwrote:
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.
Oct 24 '06 #4

P: n/a
On 2006-10-24, Ben C <sp******@spam.eggswrote:
On 2006-10-24, jobs <jo**@webdos.comwrote:
>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.
Oct 24 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.