473,395 Members | 1,969 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 software developers and data experts.

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 25144
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,658 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,658 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,658 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,658 Expert Mod 8TB
@tomaz
then you can use conditional comments to hide those 'dangerous' values from any browser besides IE6.
Dec 16 '08 #18

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

Similar topics

0
by: Abhijeet Kumar | last post by:
Hi How can i justify align text on Label Control. I am working in C# Desktop application
3
by: bitsyboffin | last post by:
Hi all, does anybody know of a bug in MacIE which prevents style.display = 'none' and style.visibility = 'hidden' from "sticking" in MacIE? I'm making some graphical checkboxes & radios (I know,...
0
by: terry | last post by:
Hi, I'm just curious why the HTML label has an align property while the Web Control Label does not? Thanks, Terry
0
by: dotnw | last post by:
I have a server side checkbox with a javascript function attached to the onclick event. If I click on the checkbox's text itself (not the actual box), the javascript function gets called twice....
2
by: Jim McGivney | last post by:
I would like to center align the text in an asp label control. Surely this is possible, I can't find the proper syntax in the documentation. Any help is appreciated. Jim
24
by: Mike Otten | last post by:
Any help greatly appreciated. The validated page is at: http://myweb.stedwards.edu/michaelo/ddtab.htm The trouble is with the radio buttons (2/3-down the left column). The radios are...
2
by: swapna_munukoti | last post by:
Hi all, I am new to asp.net. So, may be my question may be simple. But I am feeling hard to achieve this. I need to create a web custom label control, for which I have to assign new property...
0
by: ballamber | last post by:
This is a solution to the problem. Works with .NET 2.0. So the problem is displaying a data bound read-only checkbox or radio button in a GridView without actually disabling those controls. I...
6
by: Ang | last post by:
Is it possible to get the checkbox and radio button values from excel by c#? Thanks. *** Sent via Developersdex http://www.developersdex.com ***
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.