Vertical Alignment and TextBox size

[Stomme poes]

Actually, David's advice is pretty good. First hit on teh googles:

http://www.last-child.com/using-vertical-align-for-images-and-buttons/

Only the page doesn't explain anything (the worst kind of example).

I don't see what vertical align has to do with not being able to set a px height on inline inputs in a form though.

[Frinavale]

The vertical-align style may work for images; however, it does not work for buttons (in FireFox at least).

See for yourself:

<div id="someDiv" style="height:200px; width:200px; border:solid 1px black;">
    <input type="submit" name="someButton" value="hi" id="someButton" style="vertical-align:middle" />
</div>

The Doc's suggestion works nicely (in both FireFox and IE8 RC1):

<div id="someDiv" style="border: 1px solid black; height: 200px; width: 200px;">
    <input id="someButton" type="submit" style="position: relative; top: 50%;" value="hi" name="someButton"/>
</div>

Thanks Doc, I think I'll apply this to my solutions instead of using my current mess of attempts.

[drhowarddrfine]

The vertical-align style may work for images; however, it does not work for buttons (in FireFox at least).

vertical-align works fine in Firefox so it may be the implementation of the button. vertical-align is an inline style only.

[BeemerBiker]

Thanks for reposting this to the proper forum. As far as my original post (the one at the top) I was mistaken about the %40 working but the 14px not working. They both work in the design page but neither size to 14px (or 40%) at runtime and I do not know how to fix it. It does look good enough to be used.

Thanks for the tip about the vertical-aline, but it didnt make any difference as shown here (the textbox/s are at top left, should be at middle left)


Irregardless of the height setting, the textbox seems to be fixed at "small" font size and the xx-small has too much space above and below where it resides at runtime.

Code follows. Note that the textbox height is set to 12px but any other setting makes no difference. I have put smaller, even really tiny, textboxes in an ItemTemplate so I am unsure why these textboxes that are in a panel are not the correct size. Since it shows up small enough at design time, maybe there is something in my report.aspx page that is overriding the size of the user control slqfltr.ascx page.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="sqlfltr.ascx.cs" Inherits="Training.sqlfltr" %>
<script language="javascript" type="text/javascript" src="js/datetimepicker.js"></script>
<script language="javascript" type="text/javascript">
// <!CDATA[
    function CallNewCal(strControl)
    {   pCtrl = document.getElementById(strControl);
        NewCal(pCtrl, 'mmddyyyy', false, 24);
        return false;    }
// ]]>
</script>

<asp:Panel id="pnl4filter" runat="server" Height="45px" Width="193px" z-index="1"  
        position="absolute" BackColor="#FFFFCC" Font-Names="Verdana" Font-Size="XX-Small" >
<asp:Panel id="DateSelectionSection" runat="server" style="float:left;" Height="100%" Width="51%" > 
<asp:Panel id="FirstGrouping" runat="server" Height="50%" Width="100%">   
		<asp:TextBox id="txtDateStart" runat="server" Font-Names="Verdana" Font-Size="XX-Small"
            style="width: 64px; height:12px; float:left; vertical-align:middle;" />
        <asp:ImageButton ID="idCalendarS" runat="server" Font-Names="Verdana" Font-Size="XX-Small"
            style="float:right; height:14px; vertical-align:middle; width: 14px; " 
            ImageUrl="~/images/SmallCalendar.png" CausesValidation="False"  />
</asp:Panel>
<asp:Panel id="SecondGrouping" runat="server" style="float:left" Height="51%" Width="100%"> 
        <asp:TextBox ID="txtDateStop" runat="server" Font-Names="Verdana" Font-Size="XX-Small"              
            style="float:left; vertical-align:middle; height: 12px; width: 64px;" />
        <asp:ImageButton ID="idCalendarE" runat="server" CausesValidation="False" 
            Font-Names="Verdana" Font-Size="XX-Small" ImageUrl="~/images/SmallCalendar.png" 
            style="float:right; height:14px; vertical-align:middle; width: 14px; " />
</asp:Panel>
</asp:Panel>
 <asp:TextBox ID="CourseID" runat="server" Font-Names="Verdana" Font-Size="XX-Small" ToolTip="Course ID or blank for all"                   
        style="z-index: 3; overflow:hidden;  top: 1px; float:right; position:relative; height: 14px; width: 45%;"  />            
</asp:Panel>

As far was why the <P> was in the original code, VS2008 constructed a blank user control for me when i added "new" and it put a <P> into the page and I thought I had to use that.

best regards.

[drhowarddrfine]

@wastedguitaris t,
Don't hijack threads. Start your own.

@beemer,
Most people don't use .NET stuff so you need to provide the generated markup or you won't get much help.

[wastedguitarist]

sorry my bad, started my own