I tried to predefine label and input textbox but checkbox not getting aligned. I'm using dotnet controls in aspx pages. Check box text is talking label's css on its own. Please help me.

Eg: <asp:CheckBox CssClass="chkBox" ID="chkRememberMe" runat="server" Text='Remember Me' >

My CSS is:
---------------

br {
clear: left;
}
label{
float: left;
margin-bottom: 5px;
text-align: right;
width:40%;
padding-right: 15px;
}
input.textbox{
width: 250px;
height: 150px;
border:1px solid #A7B39F;
margin:2px;
color:#F05700;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

<h1>Registered users sign in</h1>
<label> E-mail address </label>
<asp:TextBox ID="txtLoginEmail" runat="server" TabIndex="1"></asp:TextBox>

<label> Password</label>
<asp:TextBox ID="txtLoginPwd" runat="server" TabIndex="2" TextMode="Password"></asp:TextBox>

<asp:CheckBox ID="chkRememberMe" runat="server" Text='Remember Me' >

I'm guessing it's because you're using asp to define the areas. Creating default styles only works with standard elements, not php or asp content.

Also to make sure that the label and textbox styles remain seperate, you should create a div for each one ... the enclosed elements will then use the div styles that they are contained in.

In other words:

#label {
float: left;
margin-bottom: 5px;
text-align: right;
width:40%;
padding-right: 15px;
}

Then:
<div id=label> E-mail address </div>

you can also define the textbox style by defining it:
.textbox {
width: 250px;
height: 150px;
border:1px solid #A7B39F;
margin:2px;
color:#F05700;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

then use <span=textbox> <asp:TextBox ID="txtLoginPwd" runat="server" TabIndex="2" TextMode="Password"></asp:TextBox> </span>

I don't know if that method can define asp content, but it's worth a shot.

Hope that helps ... and good luck :)

Hey Thanks a tonn. I tried your option. It really looks neat. But so many div's and span's to be used. How I wish, I redefine labels, textbox and check box lists and it would be soo less coding. Is there any way possible??
Thank You once again.

Yeah ... I agree, it's a lot of excess div seperation that has to take place. Maybe one day it'll be easier to style a website without all of this. Heck, hopefully Internet Explorer v7 will make things easier than they currently are.
Luckly ... raw text compresses a huge amount, so the css and html are your least concern as far as bandwidth is concerned. Navigating the code is a different matter though.

Here's an idea though ... when designing a complex website, it's always a good idea to seperate complex elements or elements that are only used on certain pages. The majority of my website uses the same elements ... so it calls on a single css called -main-.css (surrounding it in '-' keeps it at the top of the list of files).

-main-.css looks like this:

@import url('index.css');
@import url('donations.css');
@import url('login.css');
@import url('menu.css');
@import url('search.css');
@import url('font.css');

The other portion of the site uses a different master css that calls on some of the above files and a few different ones.

These keeps all the styling seperate and in different files so I can locate problems and it lessens in the amount of commenting that's needed to organize the code.

Best of luck on your site :)

Hmmm makes sense. As this is web application(software) it is has too many form pages. Now I know what is possible and what is not possible with CSS in aspx(dotnet) files. I again 'Thank You' for your answers :)

Great page ! Very useful information.

Great code, I would like to know the source or and php code on how I can get the feedback to a email when the visitor pressed the "submit" button. Thx.

@Rekha
The problem is not that you're using ASP, it's that you have not defined a class ".textbox". In css, a class attribute is referred to with the ".{name}" syntax.

I think if ASP.NET is in any way sensible it will be possible to use <asp:TextBox class="textbox" ...>

Then your original CSS will simply start working. Also instead of #label try to work with the <label> tag. It just makes more sense.

Michiel,

I was trying to predefine the default tags like 'label' 'input textbox' etc., But when I predefined the label and input box... checkbox text was getting applied with label style... which is wrong. If only I can predefine these tags... I don't have to use class="stylename" in all the labels or textboxes... Don't you think, that would be great. But this doesn't work with asp or php files i guess.

Read the comment in cssbeauty.com
http://cssbeauty.com/skillshare/discussion/786/how-to-predefine-label-textbox-and-checkbox-for-tableless-from/#Item_0

he says,

The System.Web.UI.HtmlControls.HtmlInputCheckBox class doesn't generate a label at all. All it does is this (found that on MSDN) :


<input id="Soccer" type=checkbox runat="server"> Soccer

So you're kind of stuck.

Please read the comment to understand the rendering of browsers for HTML, asp or php files.

The radio buttons should appear before the option Male/Female and not after