tags:

views:

48

answers:

4
.labelOne { border-width:thin;
            border-style:solid;
            border-color:Red;
            background-color:Silver; }

<asp:Label ID="Label1" runat="server" CssClass="labelOne">
    <h1>Hello world</h1>
</asp:Label>

<br /><br />

<asp:Label ID="Label2" runat="server"
           BorderColor="Black"
           BorderStyle="Solid"
           BorderWidth="1px"
           BackColor="Silver">
    <h1>Hello world</h1>
</asp:Label>

Hello. In the code sample above I have 2 Label controls with their contents set to an h1 header tag. The first Label is styled using css, and the second with the Label's inline properties (both Labels have identical styling). But the first Label doesn't output properly, it's border is broken. If I replace the first Label's markup with plain "Hello world" text it renders properly, but it breaks again when I use markup. Can someone explain why this is happening?

+2  A: 

Add this to your CSS:

display:inline-block;

Apparently Asp.Net adds that css style for you when you use the inline styles on a label.

By the way, I was able to spot the difference between the styles applied to the 2 labels (span tags) very quickly by bringing it up in Firebug.

orandov
+6  A: 
Joel Coehoorn
If this approach is taken, the `<h1>` tag would also require `display:inline-block` otherwise it will consume the entire width of its containing element.
Warren
Actually, I most likely would have put the <h1> tags around the Label as opposed to the other way around. Right now, I'm reading this book that's explaining how to use Label controls, and it said that a Label can be assigned plain text or HTML. So I was testing that when I ran into this problem. What's throwing me off is that the second Label in my code sample works. I haven't used the Literal control yet, I'm just started with Asp.net...
400_the_cat
+1  A: 

Label is the wrong control to be using here as it renders a html <label>, which defines a label for an input element. It would make more sense to use a Panel which will render as a <div>.

Luke
`<asp:Label>` renders as `<label>` if you have an `AssociatedControlID` property on the Label, but it renders as a `<span>` otherwise.
Warren
Joel Coehoorn's answer is very similar, it depends what you're planning on doing to which approach you take. If you want to make switch the heading on off, etc, use a panel. If you just want to set the text use a literal inside the h1.
Luke
@Warren. Thanks for the correction.
Luke
A: 

A span-element (which is what the asp:Label outputs) is an inline element, and can not contain block level elements like h1. This might be the reason why it breaks.

Arve Systad