Span vs. DIV for asp:Label Control

[Guest]

Hello All--

I have a number of <asp:Label CssClass="someclass">Text</asp:Label> controls
on my page. I would like them to be shown as
<div class="someclass">Text</div>
rather than
<span class="someclass">Text</span>

When it uses a span, it doesn't seem to use all the class definitions,
particularly for margins and positioning.

I realize I can surround my <asp:Label> controls with the <div> elements,
but that seems to make the <asp:Label> control unneccessary, doesn't it?

Thanks,
pagates

 

[Brennan Stehling]

Imports System.Web.UI
Imports System.Web.UI.WebControls

<ToolboxData("<{0}:DivLabel runat=server></{0}:DivLabel>")> _
Public Class DivLabel
    Inherits Label

    Protected Overrides ReadOnly Property TagKey() As
System.Web.UI.HtmlTextWriterTag
        Get
            Return HtmlTextWriterTag.Div
        End Get
    End Property

End Class

Perhaps the most simple approach would be to change the Label control
would to inherit from it and override the value of the TagKey.

Here is some VB.NET code.



Brennan Stehling
http://brennan.offwhite.net/blog/

 

[bruce barker \(sqlwork.com\)]

the difference between a span and div is the default display style. a div
defaults to block and a span to inline. if you want you labels to be block
style, just set the style

..someclass { display:block; }


-- bruce (sqlwork.com)

 

[Eliyahu Goldin]

If you would like to use divs, why not to go ahead and just do it?

<div class="someclass" runat="server" id="myDiv">Text</div>

 

[Brennan Stehling]

A Label allows you to set many properties for the Font and other
control settings which is helpful at design-time. And you do not want
to simply set the span to use "display: block" in the CSS because there
is a bug in IE6 which does not truly make that span act as a block
level element. You will want to ensure that it does start as a block.

Doing so will save you from a good deal of trouble.

Brennan Stehling
http://brennan.offwhite.net/blog/

If you would like to use divs, why not to go ahead and just do it?

<div class="someclass" runat="server" id="myDiv">Text</div>

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]

Hello All--

I have a number of <asp:Label CssClass="someclass">Text</asp:Label>
controls
on my page. I would like them to be shown as
<div class="someclass">Text</div>
rather than
<span class="someclass">Text</span>

When it uses a span, it doesn't seem to use all the class definitions,
particularly for margins and positioning.

I realize I can surround my <asp:Label> controls with the <div> elements,
but that seems to make the <asp:Label> control unneccessary, doesn't it?

Thanks,
pagates

 

[TechGuy]

Default Re: Span vs. DIV for asp:Label Control
Perhaps the most simple approach would be to change the Label control
would to inherit from it and override the value of the TagKey.

Here is some VB.NET code.

Imports System.Web.UI
Imports System.Web.UI.WebControls

<ToolboxData("<{0}ivLabel runat=server></{0}ivLabel>")> _
Public Class DivLabel
Inherits Label

Protected Overrides ReadOnly Property TagKey() As
System.Web.UI.HtmlTextWriterTag
Get
Return HtmlTextWriterTag.Div
End Get
End Property

End Class

I know this post is old but...
Brennan Stehling 's answer is best, but just in case anyone was in the position I was (unable to do what Brennan Stehling recomended) there is an easy work around to the asp label adding "<span>" problem... (for me I wanted to use <p>'s inside but that does not validate!)

Here is the solution:

this may be very wrong, but why not just close the span and re open it

ie. if your label text is "this work around rocks!" make it "</span>this work around rocks!<span>"

You can add Div or whatever you want... like "</span><div><p>this work around rocks!"</p></div><span>"

Note the reversed "</span><span>" ...this is on purpose!!!

if you make your label have the reversed </span><span> and it wraps your text in <span></span> you are essentially ending the span right from the start and reopening it when you are through. It will start and close it for you!

Just to be clear: Asp will take whatever text is in your label and write it like this: <span> your label text </span>

This means that say you have a db and are showing say articles using a formview and a label, the articles can not have <p> or <div> because you cant have <p> or <div> inside a <span>... which is not good if your articles are in html and have divs etc.

so change the text in the label to be whatever it was, just with "</span>" at the beginning and "<span>" at the end. That way, when ASP takes your label text and wraps it in <span>'s the beginning of your label immediately closes the span and the end of your label text reopens a span (just to be closed by ASP by the label). This leaves you with an empty span, your label text (with divs' and p's etc) and an empty span. This is crude, but works, and more importantly..validates!