469,645 Members | 1,166 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,645 developers. It's quick & easy.

label control not heeding width attribute

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
4 6207
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
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
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
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

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by NancyASAP | last post: by
1 post views Thread by jack-e | last post: by
6 posts views Thread by Joe | last post: by
31 posts views Thread by jcrouse | last post: by
5 posts views Thread by BobLaughland | last post: by
11 posts views Thread by Peter Larsen [] | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.