Css: how to format contact input screen
I am trying to format the contact screen nicely in my aspx page using CSS. In the following code, I am unable to click the txtEmailAddress icon. If I pull the padding: 100px from the txtSubject Span element, then I can click in the txtEmailaddress and edit. please, help...
<div>
<span>
Your Email Address :
</span>
<span style="padding:100px">
<asp:TextBox ID="txtEmailAddress" runat="server"></asp:TextBox>
</span>
<br />
<span>
Subject :
</span>
<span style="padding:100px">
<asp:TextBox ID="txtSubject" runat="server"></asp:TextBox>
</span>
<br />
</div>
a source to share
I tried to copy and paste and experience the same behavior, i.e. with padding on the subject area, I could not click into txtEmailAddress. I am running IE8 on Vista SP1, if that helps at all. I also noticed that the text boxes were not aligned.
While it doesn't answer your question, have you thought about using the Label tag and styling those tags. The form will be more accessible this way. You can read more about this alistapart approach here:
a source to share
Perhaps the following will suit your goals better:
<fieldset>
<legend>Add a heading if you want one</legend>
<div>
<asp:Label id="lblEmail" runat="server" text="Your Email Address:" AssociatedControlID="txtEmailAddress">
</asp:Label>
<asp:TextBox ID="txtEmailAddress" runat="server"></asp:TextBox>
</div>
<div>
<asp:Label id="lblSubject" runat="server" text="Subject:" AssociatedControlID="txtSubject">
</asp:Label>
<asp:TextBox ID="txtSubject" runat="server"></asp:TextBox>
</div>
</fieldset>
Then you can add your layout using CSS to the fieldset, label and input elements like
fieldset label
{
margin-right: 2em;
width: 20em;
}
fieldset input
{
display: inline;
}
Or some changes.
a source to share