Login or Sign up Help | Site Map
Connecting Tech Pros Worldwide

Label Styling

Question posted by: shapper (Guest) on June 27th, 2008 07:19 PM
Hello,

I am styling the labels on a section of my page as follows:

label {float: left; width: 6.5em;}

Now I want to remove this styling from a label that has the class
"Message".

Mu questions are:
Is the default value for floating of the label Left?
And should I define the width to 100%?

Thanks,
Miguel
Would you like to answer this question?
Sign up for a free account, or Login (if you're already a member).
Jukka K. Korpela's Avatar
Jukka K. Korpela
Guest
n/a Posts
June 27th, 2008
07:19 PM
#2

Re: Label Styling
Scripsit shapper:
Quote:
Originally Posted by
I am styling the labels on a section of my page as follows:
>
label {float: left; width: 6.5em;}


Presumably to make labels equally wide. An alternative, and in some ways
better, approach is to use a table of labels and input fields.
Quote:
Originally Posted by
Now I want to remove this styling from a label that has the class
"Message".


I wonder why. Is it really a _label_, and why would you make its
rendering different from other labels.
Quote:
Originally Posted by
Is the default value for floating of the label Left?


No, the initial value is float: none, and that's what browsers use as
the default.
Quote:
Originally Posted by
And should I define the width to 100%?


No, the initial value is width: auto, and that's what browsers use as
the default. For an inline element (which is what label elements are by
default), the the default means that the element is as wide as needed
for its content.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/


shapper's Avatar
shapper
Guest
n/a Posts
June 27th, 2008
07:19 PM
#3

Re: Label Styling
On Jun 16, 12:07 pm, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
Quote:
Originally Posted by
Scripsit shapper:
>
Quote:
Originally Posted by
I am styling the labels on a section of my page as follows:

>
Quote:
Originally Posted by
label {float: left; width: 6.5em;}

>
Presumably to make labels equally wide. An alternative, and in some ways
better, approach is to use a table of labels and input fields.
>
Quote:
Originally Posted by
Now I want to remove this styling from a label that has the class
"Message".

>
I wonder why. Is it really a _label_, and why would you make its
rendering different from other labels.
>
Quote:
Originally Posted by
Is the default value for floating of the label Left?

>
No, the initial value is float: none, and that's what browsers use as
the default.
>
Quote:
Originally Posted by
And should I define the width to 100%?

>
No, the initial value is width: auto, and that's what browsers use as
the default. For an inline element (which is what label elements are by
default), the the default means that the element is as wide as needed
for its content.
>
--
Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/


Hi,

This is for a form and I am not using tables but a list as follows
(This is ASP.NET MVC Preview 3. Html.TextBox is an Input):

<form id="Edit" action="<%= Url.Action("Update", new { id =
ViewData.Model.Box.BoxID }) %>" method="post" class="Base">
<fieldset>
<legend>Editar Caixa</legend>
<ol>
<li>
<label for="Name" class="Required">Nome</label>
<%= Html.TextBox("Name", (string)ViewData["Name"] ??
ViewData.Model.Box.Name.ToString()) %>
</li>
<li>
<label for="Body">Conteúdo</label>
<%= Html.TextArea("Body", (string)ViewData["Body"] ??
ViewData.Model.Box.Body.ToString(), 10, 20) %>
</li>
</ol>
</fieldset>
</form>

I set the width of the label to push the inputs to the right:

form.Base {}

form.Base fieldset {}

form.Base fieldset legend {display: none;}

form.Base fieldset ol {}

form.Base fieldset ol li {padding: 0.4em 0 0.4em 8em;}

form.Base fieldset ol li input, form.Base fieldset ol li
textarea {
border: solid 4px #F0F0F0; /* #E1EDF0 */
color: #252525;
font: normal 0.8em Verdana, Geneva, sans-serif;
padding: 0.15em;
width: 95%;
}

form.Base fieldset ol li label {
color: #404040;
float: left;
font: bold 0.9em Arial, Helvetica, Tahoma, sans-serif;
margin: 0.3em 0 0 -8em;
padding: 0 1em 0 0;
text-align: right;
width: 6.5em;
}

I am using a JQuery Validation Plugin that displays a error messages
rendered as Labels. These are the ones I want to restyle.

Should I render this error messages with another tag?

Basically I want to give them a red background with padding of 1.2 em
and I don't want them to expand 100% so it shouldn't be a block
element ...

Anyway, any suggestions are welcome to solve this or improve my code.

Thanks,
Miguel

 
Not the answer you were looking for? Post your question . . .
182,334 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).

  • Didn't find the answer you were looking for?
    Post Your Question
  • Top Community Contributors