ASP.net controls not obeying CSS?

Question

Why is is that Block 1 doesn't render the expected styling and Block 2 does?

CSS

.test
{
    height:3.85in;
    width: 2.625in;
    border: 10px solid  blue;
    padding-right:.25in;
    padding-left:.25in;
    padding-top:.25in;
    text-align:center;
    overflow:hidden;

}
.test label
{
    font-size:xx-large;
    color:Red;
}

Block 1

<div  class="test" runat="server"><asp:Label runat="server">Test</asp:Label></div>

Block 2

<div class="test" runat="server"><label runat="server">text</label></div>

The output for the HTML for the two divs is identical.

Show us the output HTML instead of telling us they're the same. Let us be the judge of that! — Eli Gassert
– Eli Gassert, Commented Jun 12, 2013 at 20:17
Ditto that - typically an <asp:Label /> tag renders to a <span> which means your CSS for .test label would not work for the <asp:label /> — fnostro
– fnostro, Commented Jun 12, 2013 at 20:21
Eli and fnostro are correct,they in fact DID NOT render the html the same. — wootscootinboogie
– wootscootinboogie, Commented Jun 12, 2013 at 20:22
@fnostro I experimented with different tags and mixed and matched span tags and label tags. Good catch. — wootscootinboogie
– wootscootinboogie, Commented Jun 12, 2013 at 20:23

Karl Anderson · Accepted Answer · 2013-06-12 20:21:15Z

3

ASP.NET Label server controls render as SPANs in Internet Explorer and not as HTML label elements. This causes your CSS selector to not be matched for Block 1, but it does match for Block 2.

My recommendation is to add a CSS class name to the ASP.NET Label server control so that it will match the CSS style you want applied to the span/label element.

answered Jun 12, 2013 at 20:21

Karl Anderson

34.9k12 gold badges69 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Johnny5 Over a year ago

"In Internet Explorer" : you mean the output is different for other browsers?

Karl Anderson Over a year ago

Yes, Internet Explorer renders some tags differently than Firefox, Chrome, Safari, etc.

Jonathan DS Over a year ago

No, <asp:Label> will render a span tag no matter the browser you are in, check by yourself with the firebug or chromes code inspector...

Richard Seal Over a year ago

<asp:label> only renders a <label> control when the AssociatedControlId is set.

Karl Anderson Over a year ago

@Jonathan - You are correct. Richard Seal - I knew there was a scenario where ASP.NET forced it to be a LABEL, which is the exact reason for when it makes sense to be a LABEL, because it is linked to an INPUT element.

|

IrishChieftain · Accepted Answer · 2013-06-12 20:23:36Z

3

Try the following:

<asp:Label CssClass="test" runat="server">Test</asp:Label>

.test
{
    height:3.85in;
    width: 2.625in;
    border: 10px solid  blue;
    padding-right:.25in;
    padding-left:.25in;
    padding-top:.25in;
    text-align:center;
    overflow:hidden;
    font-size:xx-large;
    color:Red;
}

answered Jun 12, 2013 at 20:23

IrishChieftain

15.2k8 gold badges55 silver badges98 bronze badges

1 Comment

Karl Anderson Over a year ago

Well he would also need to change the CSS definitions to have the styles specific to the label be applied. As you wrote this, it would apply the same styles as the DIV had applied to it.

Collectives™ on Stack Overflow

ASP.net controls not obeying CSS?

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related