CSS - Form Labels Above Input

Hi all!

I'm wondering for quite a while now... when you put text or a label next to a radiobutton, it never lines up nicely. The (label) text is always a bit lower then the radiobutton.

A common solution to this is using tables. But I don't want to use this "hack". I've also tried CSS margins and padding, but these don't seem to help.

Is there any elegant way out there to get the text nicely lined up with a radiobutton?

Thanks!

I don't know how to get my radiobuttons, defined as,
Code:

 <div id="options">
  <fieldset id="fset">
    <legend>Pick car</legend>
    <label for="id_gm">
      <input type="radio" value="gm" id="id_gm">gm</label>
    <label for="id_vw">
      <input type="radio" value="vw" id="id_vw">vw</label>
  </fieldset>
</div> 

lined up so they a
Floated to the left;
Each choice (radiobutton and its label) on its own row;
With the radiobutton prior to its label; and
With the radiobutton and its label aligned horizontally.

Would be grateful for your help.

This will be tough, but I'm confident CSS can handle exactly what I need.

I want to print onto labels. Actually, they're return address labels (1.75" by 0.5") to be specific.

How do I set up a layout with the following specifications?

Quote:
Sheet Size: 8.5" x 11" (standard sheet of paper)
Dimensions: 1.75" x 0.5" (dimensions of each label)
Spacing Between Labels: Vertical Spacing 0", Horizontal Spacing 0.28125", Vertical Pitch 0.5", Horizontal Pitch 2.03125"
Margins: Top 0.5", Bottom 0.5", Left 0.33", Right 0.33"


Can someone give me a starting point and I'll try to figure it out? I'm lost on it.

Thanks

Hi,
I am trying to find a way to print address labels from a web page. The page will either be ASP or ASP.NET. Is it possible to get enough control over the print layout to create consistent labels? The browser will be IE6 and the printer will be printing onto standard address labels that you buy for this sort of thing.

If it is possible, could someone please point me in the right direction, I am stumped.

Thanks,

Matt

Hello there,

I Have a radiobutton with a label beside it.
It only isn't aligned that nicely.
The radiobutton it self is a few pixels heigher then the label it self.

Now i have partitialy fixed this by using float: left on the radiobutton(s) itself.

But it doesn't work in all browsers.

Is there some kind of standard way to fix this?

Thx in advance.

Hey!
I got some issues in IE8 (not checked IE7,6)
When I press the "send" button and the form validates, the bottom 2 labels and a checkbox move down about 15px. I think it has to do with my positioning of the calendar icons above and the error messages, havent been able to fix it tho.
http://www.borgweb.se/cvh/boka_rum.php is the address.
The site is in swedish so bare with me, I think you will understand what I mean once you submit the form.
If I then press ctrl-a or select everything with the mouse, the labels go back to their original position.
Any ideas of what can sort this is welcome!
Thanks!

I'm having some trouble formatting the radio button label text size (as well as the button size).

my CSS class is
Code:

.style_xxs_normal {
	font-family: Arial;
	font-size: xx-small;
	font-weight: 400;
}

my radio buttons are
Code:

<tr><td width='100%' align='left'><input type='radio' name='answer' class='style_xxs_normal' value='1'>&nbsp;Answer 1</td></tr>
<tr><td width='100%' align='left'><input type='radio' name='answer' class='style_xxs_normal' value='2'>&nbsp;Answer 2</td></tr>

Thanks for any suggestions.

http://www.zahra-zahra.com/admin/editCategory.php

the input boxes are all out of align.. i dont know why!!!

here is the css

Code:

#content form {
	font-size:0.8em;
	clear:none;
}
#content label {
	width:20%;
	float:left;
	font-size:0.9em;
	margin-bottom:0em
	font-size:1em;
	clear:none;
}
#content input, #content select, #content textarea {
	margin:0em;
	clear:none;
}

#content .submit {
	clear:none;
}

This is driving me nuts....



You see how the text is a tad hight than the form input ?

How do i make them align ?!

Thanks.

How do you get the input text areas and selections to highlight or glow once active? For examples, visit Zappos.com or Amazon.com - when you click in the text fields to login it sort of glows.

Is it possible to differentiate between various types of input field, e.g. assign a width to text inputs but leave buttons to find their own width based on content.

I know I can do this by assigning certain elements a class but I'd prefer not to have to do this.

Thanks

Hi all,

I cannot figure why last two form inputs at the following website appears wrong near the end.

I also included a screenshot.

http://www.refinethetaste.com/yk/addproject.asp

Hi there! I'll cut right down to the chase: is my method of styling form input fields efficient? Is there a better way to do it? I tried directly styling the input, rather than putting it in a div, but it didn't work in IE (when too much text went into the field, the background would move, no matter what I did. ) Also, is my <label> styling okay?

HTML Code:
Original - HTML Code <div class="formRow"> <div class="textInput"> <input class="textInput" id="name" type="text" /> <label for="name">Name</label> </div> </div>

  

<div class="formRow">
    <div class="textInput">
        <input class="textInput" id="name" type="text" />
        <label for="name">Name</label>
    </div>
</div>

CSS Code:
Original - CSS Code #content div.formRow:hover { background-color: #EEE; } #content input.textInput { font-size: 14px; color: #666; padding: 3px 5px; width: 190px; height: 20px; border: 0; background-color: transparent; } #content input.textInput:focus { color: #000; } #content div.textInput { margin-left: 50px; background: transparent url('images/textInput.png') no-repeat; } #content div.textInput label { font-size: 14pt; font-weight: bold; margin-left: 50px; vertical-align: top; }

  

  


 #content div.formRow:hover


     {


     background-color: #EEE;


     }


 #content input.textInput


     {


     font-size: 14px;


     color: #666;


     padding: 3px 5px;


     width: 190px;


     height: 20px;


     border: 0;


     background-color: transparent;


     }


 #content input.textInput:focus


     {


     color: #000;


     }


 #content div.textInput


     {


     margin-left: 50px;


     background: transparent url('images/textInput.png') no-repeat;


     }


 #content div.textInput label


     {


     font-size: 14pt;


     font-weight: bold;


     margin-left: 50px;


     vertical-align: top;


     } 

And lastly... my image:


Thanks a lot!

I have a form that has background images for the inputs. In both IE 6 and IE 7, the background images will move if the text goes outside of the image.

You can see what I'm talking about here.

Here is the xhtml:

Code:

<div class="contact">
	<form action="sendmail.php" method="post" id="contactform">
		<ul>
		        <li>
                                <label for="name"><img class="label" src="images/name.png" alt="" /></label>
				<input class="inputbox" type="text" name="name" value="" id="name" />
			</li>
			<li>
				<label for="email"><img class="label" src="images/email.png" alt="" /></label>
				<input class="inputbox" type="text" name="email" value="" id="email" />
			</li>
			<li>
				<label for="tele"><img class="label" src="images/phone.png" alt="" /></label>
				<input class="inputbox" type="text" name="tele" value="" id="tele" />

			</li>
			<li class="special">
				<label for="last">Don't fill this in:</label>
				<input type="text" name="last" value="" id="last" />
			</li>
			<li>
				<label for="message"><img class="label" src="images/message.png" alt="" /></label>
				<textarea rows="5" cols="30" name="message" class="messagebox"></textarea>

			</li>
			<li class="submitbutton">
				<input type="submit" value="" class="formbutton" />
			</li>
		</ul>
	</form>
</div>

and here is the relevant css:

Code:

.inputbox {
	height: 39px;
	width: 246px;
	border: none;
	padding: 10px 10px 0 10px;
	background: url("../images/inputbox.png") no-repeat 0 0;
	font: bold italic 1.25em/1.1em Lucida, sans;
	color: #3d2d06;
}

I'm sure this is an easy one but I can't really figure it out and googling has not produced any results.

Thanks in advance.

Hi,

Please see
http://lbclibrary.org/addtoinquiry.php
(scroll down a bit to see the form)

What I want to do is, when the user selects "I am a member of ..." or "I want to become a member of..."

the form fields in the OTHER cell should become readonly (i.e. should not allow input).

Is it possible to make ALL the form elements in one <td> cell as readonly? Further, is it possible to change their background colors to say light grey?

Then, when you select another radio option, that cell becomes writable and the other cell becomes readonly.

Thanks a lot!