css: how to format contact entry screen

Question

I am trying to nicely format contact screen in my aspx page using CSS. With the following code, I am unable to click into the txtEmailAddress. If I take out padding:100px from the txtSubject Span element, then I am able to click into 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>

Answer 1

i tried copying and pasting and experienced the same behaviour, i.e. with padding on the subject span i couldn't 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.

Whilst it doesn't answer your question, have you thought about using Label tag and styling these tags. The form will be more accessible this way. You can find out more about this approach on alistapart here:

Answer 2

Perhaps the following would suit your purposes 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>

You can then add your layout using CSS to the fieldset, label and input elements specifically, e.g.

fieldset label
{
  margin-right: 2em;
  width: 20em;
}

fieldset input
{
  display: inline;
}

Or some variation thereof.