CODEWITHSUNDEEP
c#asp.nethtmlcss
Anicho
Anicho

Reputation: 2667

HTML/CSS Positioning Issue with asp:Label and span

When I do the following:

<asp:Label CssClass="someField" runat="server">*</asp:Label> 
<asp:Label ID="someID" runat="server" Text="SomeText" AssociatedControlID="someACID"></asp:Label>

Or:

<span class="someField">*</span>
<asp:Label ID="someID" runat="server" Text="SomeText" AssociatedControlID="someACID"></asp:Label>

Css someField:

span.someField {
   color: #CC0000;
   font-weight: 600;
}

Css for label:

form label {
    clear: left;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 1em;
    margin: 0 3px 4px 0;
    padding: 4px 0 4px 5px;
    width: 200px;
}

the output I get is

SomeText*

When what I want is

*SomeText

Anyone know why this is happening?

Upvotes: 1

Views: 647

Answers (2)

Chris Marisic
Chris Marisic

Reputation: 33128

Another option 

form label:after {
    content: "*";
}

Upvotes: 1

Rick Liddle
Rick Liddle

Reputation: 2714

By setting float:left on the label you are taking it out of the flow of the document and causing it to render before the span. You need to either set the span to be a block layout and float it left as well or remove the float from the label.

UPDATE:

There's a good description of what floating does to elements and some considerations here: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Upvotes: 4

Related Questions