PDA

View Full Version : css of label



esthera
Nov 19th, 2006, 06:42 AM
my html is:
<label for="title">Title</label> <input type="text" name="title"
value="Intitial/Top List" /> <label for="type">Type</label>
<br />
<input type="checkbox" name="type" value="Email" checked />Email<br />
<input type="checkbox" name="type" value="Fax" checked />Fax<br />

my css is:
.f10 label{
float:left;
width:15%;
font-weigth:bold;
}

the problem is because it's checkbox when it displays i see the first checkbox item indented in (after the label) but the second one isn't.

How can I get both items to be in the second row?

Arbitrator
Nov 19th, 2006, 09:50 AM
Use display: inline on the check-boxes and they should flow onto the same line provided enough room. I think that that’s the default though…

By the way, I’m curious: Are you using HTML or XHTML? If you’re using HTML, you shouldn’t have the closing slashes; if you’re using XHTML, then you need to expand your attributes since minimized attributes are not permitted in XHTML: checked should be checked="checked". The same applies for the defer, disabled, and selected attributes should you encounter them.

esthera
Nov 19th, 2006, 09:55 AM
it works on firefox but not ie.

Bill Posters
Nov 19th, 2006, 02:12 PM
The reason the second checkbox isn't floating in is because the first one is followed immediately by a linebreak (<br>).
This is forcing the next checkbox onto a new line.

Fwiw, the for attribute of the label element needs to be paired with an id attribute on a form control, not a name attribute. As id attributes need to be unique, you'll need to rethink your labelling.