Hi all,

 This is an old one and I've never found a good answer yet. So

<ASP:Label ID="label1" runat="server" Text="This is label 1" WIDTH="250px" /> textbox control <br/>

<ASP:Label ID="label2" runat="server" Text="This is another label" WIDTH="250px" /> textbox control <br/>

In IE 6 and 7 it renders correctly and the textbox controls line up great. In Firefox 1.x or 2.x it doesn't work.

So is the WIDTH property of the label control an IE only feature or is there a simple solution for cross browser compatability ?

 Many Thanks.

If you need someone to blame, blame IE

Let me explain: Label gets rendered in <span> element; by W3C standard, <span> element is of type inline, so it does not have width (it is not applicable to it).

So, Firefox and other browsers render label correctly. If you do want that kind of behaviour, you can do following:

Create CSS class which will be applied on labels which needs width:

.fixedLabel 
{
    display: block;
    float: left;
}

 Now, give to your labels this CssStyle:

<asp:Label ID="label1"  CssClass="fixedLabel" runat="server" Text="This is label 1" width="250px" /><asp:TextBox
    ID="TextBox1" runat="server"></asp:TextBox><br/>
<asp:Label ID="label2" CssClass="fixedLabel" runat="server" Text="This is another label" WIDTH="250px" /><asp:TextBox
    ID="TextBox2" runat="server"></asp:TextBox><br/>

and display should be ok in all compliant browsers.

That is correct - However you will want to watch out for using floating as other elements afterwards can be messed up because of it.

 Throw a:

<div style="clear:both;"></div> afterwards to cancel the effects that floating has on the following elements.

can you also use Columns="30" to produce the correct width in FF as well ?

mcm

Hi that works fine, but let me add the complication that I am having - This seems to happen if you use themes.

So set up a theme and add

so on your page you have

<span id="Label1" style="display:inline-block;width:250px;">Text 1:</span> textbox <br />

The "display:inline-block;" is recognised by IE but not firefox and no amount of css allows me to override what dot net has rendered.

Hi

Here it is

 <asp:Label runat="server" width="250px" skinid="myLabel" />

 Thanks

You can try same as in example:

- add CssClass to definition of label in Skin file
- add definition in external CSS file.

However, if this has purpose of creating good looking form, please try to spend some time on examining proper way to do it:

http://www.quirksmode.org/css/forms.html

It is very easy, effective and displays properly in all compliant browsers.

Thanks for all that.

But, I suppose the conclusion is that the WIDTH property of the label control is not cross browser compatible.

It only works with IE and therefore I think this should be pointed out in the MS documentation.

Or is there a way to make it cross browser compatible ?

Well, label is server side (so it is ASP.NET thing) and gets rendered to <span> client side element.

Yes, if you do not change display mode of span element, width has no effect by standards. Only way is above - change display mode to block, add width, and add clearing div at the end. 

avida:

Thanks for all that.

But, I suppose the conclusion is that the WIDTH property of the label control is not cross browser compatible.

It only works with IE and therefore I think this should be pointed out in the MS documentation.

Or is there a way to make it cross browser compatible ?

avida:

Thanks for all that.

But, I suppose the conclusion is that the WIDTH property of the label control is not cross browser compatible.

It only works with IE and therefore I think this should be pointed out in the MS documentation.

Or is there a way to make it cross browser compatible ?

Avida, you're right - only IE Supports that because IE is a MS product. MS has wisened up a bit after the release of ASP.NET and has started gearing it's Developer Solutions towards multiple browsers.

 You will also see that most web developers do not use width/height tags (attributes) in the HTML control - instead we use the style/class attribute.  I'd recommend not using width/height attributes and use the class attribute and build CSS classes to be used by your web applications.

 But for now... yea width will only work in IE because IE doesn't follow W3C CSS Standards totally, firefox doesn't follow all of them but adheres to them more than most other browsers.

Dejan Vesic:

If you need someone to blame, blame IE

Let me explain: Label gets rendered in <span> element; by W3C standard, <span> element is of type inline, so it does not have width (it is not applicable to it).

So, Firefox and other browsers render label correctly. If you do want that kind of behaviour, you can do following:

Create CSS class which will be applied on labels which needs width:

.fixedLabel 
{
    display: block;
    float: left;
}

 Now, give to your labels this CssStyle:

<asp:Label ID="label1"  CssClass="fixedLabel" runat="server" Text="This is label 1" width="250px" /><asp:TextBox
    ID="TextBox1" runat="server"></asp:TextBox><br/>
<asp:Label ID="label2" CssClass="fixedLabel" runat="server" Text="This is another label" WIDTH="250px" /><asp:TextBox
    ID="TextBox2" runat="server"></asp:TextBox><br/>

 

and display should be ok in all compliant browsers.

Hi Dejan,

I am having a problem with the label width as well. I added

Below is the css class:

Thanks.

blumonde

You can't fix width and also require word-wrap :-)

I am not sure how can you resolve this.