By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,077 Members | 1,356 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,077 IT Pros & Developers. It's quick & easy.

Label Styling

P: n/a
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
Jun 27 '08 #1
Share this Question
Share on Google+
2 Replies


P: n/a
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/

Jun 27 '08 #2

P: n/a
On Jun 16, 12:07 pm, "Jukka K. Korpela" <jkorp...@cs.tut.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("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
Jun 27 '08 #3

This discussion thread is closed

Replies have been disabled for this discussion.