f



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

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 >

0
Jason
10/24/2006 4:55:59 AM
comp.authoring.html 7078 articles. 0 followers. Post Follow

4 Replies
1126 Views

Similar Articles

[PageSpeed] 39

On 2006-10-24, Jason <jason@cyberpine.com> 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.
0
Ben
10/24/2006 6:50:54 AM
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 <jason@cyberpine.com> 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.

0
jobs
10/24/2006 4:22:19 PM
On 2006-10-24, jobs <jobs@webdos.com> wrote:
> 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 <jason@cyberpine.com> 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.
>
0
Ben
10/24/2006 4:39:39 PM
On 2006-10-24, Ben C <spamspam@spam.eggs> wrote:
> On 2006-10-24, jobs <jobs@webdos.com> wrote:
>> 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.
0
Ben
10/24/2006 5:12:00 PM
Reply: