current community

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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.

share|improve this question
2  
Show us the output HTML instead of telling us they're the same. Let us be the judge of that! –  Eli Gassert Jun 12 '13 at 20:17
 
@EliGassert Will edit that in. –  wootscootinboogie Jun 12 '13 at 20:18
 
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 Jun 12 '13 at 20:21
 
Eli and fnostro are correct,they in fact DID NOT render the html the same. –  wootscootinboogie Jun 12 '13 at 20:22
1  
Before HTML5 there WAS NO label tag –  fnostro Jun 12 '13 at 20:27
show 8 more comments

2 Answers

up vote 3 down vote accepted

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.

share|improve this answer
 
"In Internet Explorer" : you mean the output is different for other browsers? –  Johnny5 Jun 12 '13 at 20:23
 
Yes, Internet Explorer renders some tags differently than Firefox, Chrome, Safari, etc. –  Karl Anderson Jun 12 '13 at 20:24
1  
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... –  Jonathan Jun 12 '13 at 20:26
3  
<asp:label> only renders a <label> control when the AssociatedControlId is set. –  Richard Seal Jun 12 '13 at 20:34
 
@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. –  Karl Anderson Jun 12 '13 at 20:38
show 1 more comment
up vote 3 down vote

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;
}
share|improve this answer
 
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. –  Karl Anderson Jun 12 '13 at 20:25
 
Good point, updating answer :-) –  IrishChieftain Jun 12 '13 at 20:26
 
Just checked and it works in IE9 –  IrishChieftain Jun 12 '13 at 20:37
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.