Label Styling

[shapper]

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

[Jukka K. Korpela]

Re: Label Styling

Scripsit shapper:

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.

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.

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.

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]

Re: Label Styling

On Jun 16, 12:07 pm, "Jukka K. Korpela" <jkorp...@cs.tu t.fiwrote:

Scripsit shapper:
>

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.
>

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.
>

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.
>

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("Upd ate", new { id =
ViewData.Model. Box.BoxID }) %>" method="post" class="Base">
<fieldset>
<legend>Edita r Caixa</legend>
<ol>
<li>
<label for="Name" class="Required ">Nome</label>
<%= Html.TextBox("N ame", (string)ViewDat a["Name"] ??
ViewData.Model. Box.Name.ToStri ng()) %>
</li>
<li>
<label for="Body">Cont eúdo</label>
<%= Html.TextArea(" Body", (string)ViewDat a["Body"] ??
ViewData.Model. Box.Body.ToStri ng(), 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