469,292 Members | 1,310 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,292 developers. It's quick & easy.

align checkbox/radio with label

29
hi

I've been searching the net for a solution, but did not find it.

I use following css code:

checkbox:

Expand|Select|Wrap|Line Numbers
  1. input.largerElement {    
  2.     width: 25px;
  3.     height: 25px;
  4. }

now i have the problem that my text label next to the checkbox is not in the straight middle but floats a little bit higher than my checkbox.

i tried a lot of possibilities (vertical align, fontsize etc) but it's impossible to get the alignment correct.

Somebody has an idea?
Dec 11 '08 #1
17 24732
drhowarddrfine
7,435 Expert 4TB
vertical-align usually does the trick so there must be something different about your html (which is why I always say to supply both when asking questions - nudge, nudge, wink, wink).

Did you do 'vertical-align:top'?
Dec 12 '08 #2
tomaz
29
hi, thanks for the reply.

I did try vertical alignment, but it doesnt change a thing.

the complete html:
Expand|Select|Wrap|Line Numbers
  1. <HTML>
  2. <HEAD>
  3. <TITLE></TITLE>
  4. <STYLE TYPE="text/css">
  5. input.largerElement {     
  6.     width: 30px; 
  7.     height: 30px; 
  8.  
  9. p
  10. {
  11.    VERTICAL-ALIGN: top;
  12. }
  13. </STYLE>
  14. </HEAD>
  15. <BODY>
  16. <P><INPUT type=radio class=largerElement>This is a test</P>
  17. </BODY>
  18. </HTML>
  19.  
Dec 12 '08 #3
Markus
6,050 Expert 4TB
You're missing a doctype which will throw IE into quirks mode.

A List Apart: Articles: Fix Your Site With the Right DOCTYPE!

Also, your html elements and attributes should be lowercase (not UPPERCASE).
Dec 12 '08 #4
tomaz
29
there's no difference with the lowercase css.

Also, in my project I use the correct doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

when I added it to this testpage, the problem persists.
The alignment of the text is too low.
Dec 12 '08 #5
Could you not use a table... I know that loads of people hate them, but it does align the text with the radio button nicely.

Expand|Select|Wrap|Line Numbers
  1. <table>
  2.     <tr>
  3.         <td><INPUT type=radio class=largerElement></td>
  4.         <td>This is a test</td>
  5.     </tr>
  6. </table>
  7.  
If i am being stupid some one please hurl some abuse at me and i'll shut up!

Mr. Prister
Dec 12 '08 #6
Dormilich
8,651 Expert Mod 8TB
if you drop the width/height declaration on <input> it's aligning as intended. to get the height, apply it to <p> (height or line-height).

and if I remember right inline elements should not be styled with width/height properties.

regards
Dec 12 '08 #7
drhowarddrfine
7,435 Expert 4TB
@Dormilich
Cannot be style with. It has no effect.
Dec 13 '08 #8
drhowarddrfine
7,435 Expert 4TB
@Mr Prister
Boy are you stupid. (And you came to the right board because this is for abuse. If you want an argument, that's a different board. :) )

Tables are for tables, not layout.
Dec 13 '08 #9
drhowarddrfine
7,435 Expert 4TB
Put 'vertical-align:top' to the 'input' not 'p'.

Now, you're going to be in a world of hurt if you don't start using a doctype, as mentioned above. On your first line add this before anything else:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Although HTML is case insensitive, use lower case because CSS is case sensitive.
Dec 13 '08 #10
tomaz
29
guess what?!

Expand|Select|Wrap|Line Numbers
  1. input.largerelement {      
  2.     width: 30px;  
  3.     height: 30px;
  4.     vertical-align: middle;  
  5. }  
"vertical-align: middle" on the input element will do the trick!
Dec 15 '08 #11
Dormilich
8,651 Expert Mod 8TB
nevertheless, "width" and "height" should not be applied to any inline element (which I think causes all this trouble).

regards
Dec 15 '08 #12
@drhowarddrfine
I guessed I would get a response similar to that and no doubt deserve it... but you cannot deny the fact that it does align them nicely!

I'm sorry for that and will now go and contemplate my existence!
Dec 15 '08 #13
Hi,

If you are using single label with input field you can also use float:left in css also. it will help using label in align.
Dec 16 '08 #14
tomaz
29
@Dormilich
I follow your opinion, but in this case I have to make these elements larger through width and height so the web application is touchscreen compliant.
Dec 16 '08 #15
Dormilich
8,651 Expert Mod 8TB
I don't know how the radio button renders on touchscreen devices, but when I was viewing it in FF the radio button had the size it always had. width and height were only increasing the space around it.

imho, a reasonable touchscreen device should render the radio button in an appropriate size.

regards
Dec 16 '08 #16
tomaz
29
yes, that's true.
FF don't show a big checkbox/radio, but enlarge the clickable area.

The assumption of the project is:
strictly IE6.

so, in that case, i'm free to use this style.


the text next to the checkbox/radio is also clickable with a 'label for='
Dec 16 '08 #17
Dormilich
8,651 Expert Mod 8TB
@tomaz
then you can use conditional comments to hide those 'dangerous' values from any browser besides IE6.
Dec 16 '08 #18

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

reply views Thread by Abhijeet Kumar | last post: by
reply views Thread by terry | last post: by
2 posts views Thread by Jim McGivney | last post: by
2 posts views Thread by swapna_munukoti | last post: by
6 posts views Thread by Ang | last post: by
1 post views Thread by CARIGAR | last post: by
1 post views Thread by Geralt96 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.