label control not heeding width attribute

Dabbler

I'm trying to block out some text by setting Label width attribute which
renders as a span tag so that all labels for textfields take up the same
amount of space hence the textfields are all aligned but for some reason the
width is being ignored in IE 6 even though it works in Firefox. Is there some
bug associated with this and maybe the Doctype specification?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<style type="text/css">
..waLabel{
width:106px; /* push all textboxes to the right 106px */
margin-right:100px;
border: 1px dotted blue;
}
</style>

The FormView code:
<asp:Label ID="lblFirstName" runat="server" CssClass="waLabel" Text="First
Name" ></asp:Label>
<asp:TextBox ID="tbFirstName" runat="server" CssClass="waTextBox"
Width="180px" Columns="25" MaxLength="25" Text='<%# Bind("FirstName") %>'

</asp:TextBox>

The resulting span code:
<span id="fvRegDetail_lblFirstName" class="waLabel">First Name</span>
<input name="fvRegDetail$tbFirstName" type="text" value="Christopher"
maxlength="25" size="25" id="fvRegDetail_tbFirstName" class="waTextBox"
style="width:180px;" />

thanks for any suggestions on this.

Apr 11 '06 #1

Subscribe Reply

6324

Phillip Williams

I suggest using an HTMLTable to arrange the different controls within
tablecells. Setting the styles on tablecells is more consistent across
browsers that the inline span tag. For example,

<table class="tblClass">
<tr>
<td class="something">
<asp:Label ID="lblFirstName" runat="server" Text="First
Name" ></asp:Label>
</td>
<td class="somethingelse">
<asp:TextBox ID="tbFirstName" runat="server" Columns="25" MaxLength="25"
Text='<%# Bind("FirstName") %>'

</asp:TextBox> </td>
</tr>
</table>

--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"Dabbler" wrote:
I'm trying to block out some text by setting Label width attribute which
renders as a span tag so that all labels for textfields take up the same
amount of space hence the textfields are all aligned but for some reason the
width is being ignored in IE 6 even though it works in Firefox. Is there some
bug associated with this and maybe the Doctype specification?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<style type="text/css">
.waLabel{
width:106px; /* push all textboxes to the right 106px */
margin-right:100px;
border: 1px dotted blue;
}
</style>

The FormView code:
<asp:Label ID="lblFirstName" runat="server" CssClass="waLabel" Text="First
Name" ></asp:Label>
<asp:TextBox ID="tbFirstName" runat="server" CssClass="waTextBox"
Width="180px" Columns="25" MaxLength="25" Text='<%# Bind("FirstName") %>'
</asp:TextBox>

The resulting span code:
<span id="fvRegDetail_lblFirstName" class="waLabel">First Name</span>
<input name="fvRegDetail$tbFirstName" type="text" value="Christopher"
maxlength="25" size="25" id="fvRegDetail_tbFirstName" class="waTextBox"
style="width:180px;" />

thanks for any suggestions on this.

Apr 11 '06 #2

Dabbler

Thanks Phillip.

I thought of this but was trying to avoid the table solution as I have 50
fields so were talking 50 tr tags + 100 td tags whereas I already have the
style class assigned to the controls. But I think I'm going to have to byte
the bullet. Maybe I can get the search replace with regex to add the tags!
Did I mention I have carpal tunnel syndrome and am trying to minimize typing
;)

"Phillip Williams" wrote:

I suggest using an HTMLTable to arrange the different controls within
tablecells. Setting the styles on tablecells is more consistent across
browsers that the inline span tag. For example,

<table class="tblClass">
<tr>
<td class="something">
<asp:Label ID="lblFirstName" runat="server" Text="First
Name" ></asp:Label>
</td>
<td class="somethingelse">
<asp:TextBox ID="tbFirstName" runat="server" Columns="25" MaxLength="25"
Text='<%# Bind("FirstName") %>'
</asp:TextBox>

</td>
</tr>
</table>

--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"Dabbler" wrote:
I'm trying to block out some text by setting Label width attribute which
renders as a span tag so that all labels for textfields take up the same
amount of space hence the textfields are all aligned but for some reason the
width is being ignored in IE 6 even though it works in Firefox. Is there some
bug associated with this and maybe the Doctype specification?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<style type="text/css">
.waLabel{
width:106px; /* push all textboxes to the right 106px */
margin-right:100px;
border: 1px dotted blue;
}
</style>

The FormView code:
<asp:Label ID="lblFirstName" runat="server" CssClass="waLabel" Text="First
Name" ></asp:Label>
<asp:TextBox ID="tbFirstName" runat="server" CssClass="waTextBox"
Width="180px" Columns="25" MaxLength="25" Text='<%# Bind("FirstName") %>'
</asp:TextBox>

The resulting span code:
<span id="fvRegDetail_lblFirstName" class="waLabel">First Name</span>
<input name="fvRegDetail$tbFirstName" type="text" value="Christopher"
maxlength="25" size="25" id="fvRegDetail_tbFirstName" class="waTextBox"
style="width:180px;" />

thanks for any suggestions on this.

Apr 11 '06 #3

Phillip Williams

If I had to arrange 50 fields on a FormView I would use a repeater within the
ItemTemplate and then arrange the rows on the repeater using templates
generated dynamically by building a customized class derived from Itemplate.

Or I would use a detailsView with TemplateFields whose Templates are (again)
composed dynamically like I did in this demo albeit with a GridView:
http://www.webswapp.com/codesamples/.../gridview.aspx

The class I developed in this demo â€œFormattedTemplate.csâ€ can be used in a
DetailsView without much of a change.

--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"Dabbler" wrote:

Thanks Phillip.

I thought of this but was trying to avoid the table solution as I have 50
fields so were talking 50 tr tags + 100 td tags whereas I already have the
style class assigned to the controls. But I think I'm going to have to byte
the bullet. Maybe I can get the search replace with regex to add the tags!
Did I mention I have carpal tunnel syndrome and am trying to minimize typing
;)

"Phillip Williams" wrote:
I suggest using an HTMLTable to arrange the different controls within
tablecells. Setting the styles on tablecells is more consistent across
browsers that the inline span tag. For example,

<table class="tblClass">
<tr>
<td class="something">
<asp:Label ID="lblFirstName" runat="server" Text="First
Name" ></asp:Label>
</td>
<td class="somethingelse">
<asp:TextBox ID="tbFirstName" runat="server" Columns="25" MaxLength="25"
Text='<%# Bind("FirstName") %>'
</asp:TextBox>

</td>
</tr>
</table>

--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"Dabbler" wrote:
I'm trying to block out some text by setting Label width attribute which
renders as a span tag so that all labels for textfields take up the same
amount of space hence the textfields are all aligned but for some reason the
width is being ignored in IE 6 even though it works in Firefox. Is there some
bug associated with this and maybe the Doctype specification?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<style type="text/css">
.waLabel{
width:106px; /* push all textboxes to the right 106px */
margin-right:100px;
border: 1px dotted blue;
}
</style>

The FormView code:
<asp:Label ID="lblFirstName" runat="server" CssClass="waLabel" Text="First
Name" ></asp:Label>
<asp:TextBox ID="tbFirstName" runat="server" CssClass="waTextBox"
Width="180px" Columns="25" MaxLength="25" Text='<%# Bind("FirstName") %>'
></asp:TextBox>
The resulting span code:
<span id="fvRegDetail_lblFirstName" class="waLabel">First Name</span>
<input name="fvRegDetail$tbFirstName" type="text" value="Christopher"
maxlength="25" size="25" id="fvRegDetail_tbFirstName" class="waTextBox"
style="width:180px;" />

thanks for any suggestions on this.

Apr 11 '06 #4

Dabbler

Thanks Phillip all great suggestions, but the fields are not homogenous, need
some radio button lists, checkboxes, dropdown lists and custom layout for
some sections of the page. Otherwise the DetailView would be the solution.

Derived class from ItemTemplate sounds interesting though ;)

"Phillip Williams" wrote:

If I had to arrange 50 fields on a FormView I would use a repeater within the
ItemTemplate and then arrange the rows on the repeater using templates
generated dynamically by building a customized class derived from Itemplate.

Or I would use a detailsView with TemplateFields whose Templates are (again)
composed dynamically like I did in this demo albeit with a GridView:
http://www.webswapp.com/codesamples/.../gridview.aspx

The class I developed in this demo â€œFormattedTemplate.csâ€ can be used in a
DetailsView without much of a change.

--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"Dabbler" wrote:
Thanks Phillip.

I thought of this but was trying to avoid the table solution as I have 50
fields so were talking 50 tr tags + 100 td tags whereas I already have the
style class assigned to the controls. But I think I'm going to have to byte
the bullet. Maybe I can get the search replace with regex to add the tags!
Did I mention I have carpal tunnel syndrome and am trying to minimize typing
;)

"Phillip Williams" wrote:
I suggest using an HTMLTable to arrange the different controls within
tablecells. Setting the styles on tablecells is more consistent across
browsers that the inline span tag. For example,

<table class="tblClass">
<tr>
<td class="something">
<asp:Label ID="lblFirstName" runat="server" Text="First
Name" ></asp:Label>
</td>
<td class="somethingelse">
<asp:TextBox ID="tbFirstName" runat="server" Columns="25" MaxLength="25"
Text='<%# Bind("FirstName") %>'
></asp:TextBox>
</td>
</tr>
</table>

--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"Dabbler" wrote:

> I'm trying to block out some text by setting Label width attribute which
> renders as a span tag so that all labels for textfields take up the same
> amount of space hence the textfields are all aligned but for some reason the
> width is being ignored in IE 6 even though it works in Firefox. Is there some
> bug associated with this and maybe the Doctype specification?
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
>
> <style type="text/css">
> .waLabel{
> width:106px; /* push all textboxes to the right 106px */
> margin-right:100px;
> border: 1px dotted blue;
> }
> </style>
>
> The FormView code:
> <asp:Label ID="lblFirstName" runat="server" CssClass="waLabel" Text="First
> Name" ></asp:Label>
> <asp:TextBox ID="tbFirstName" runat="server" CssClass="waTextBox"
> Width="180px" Columns="25" MaxLength="25" Text='<%# Bind("FirstName") %>'
> ></asp:TextBox>
>
>
> The resulting span code:
> <span id="fvRegDetail_lblFirstName" class="waLabel">First Name</span>
> <input name="fvRegDetail$tbFirstName" type="text" value="Christopher"
> maxlength="25" size="25" id="fvRegDetail_tbFirstName" class="waTextBox"
> style="width:180px;" />
>
> thanks for any suggestions on this.
>

Apr 11 '06 #5

Similar topics

CSS with <INPUT><LABEL></LABEL></INPUT>

by: TR | last post by:

Is it possible with CSS to prevent this wrapping alignment with a checkbox with a nested label? This is the label of the checkbox that wraps beneath it I'd prefer it looked like...