473,587 Members | 2,579 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

align checkbox/radio with label

29 New Member

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

I use following css code:


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 25168
7,435 Recognized Expert Expert
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
29 New Member
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; 
  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>
Dec 12 '08 #3
6,050 Recognized Expert Expert
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
29 New Member
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
Mr Prister
12 New Member
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>
If i am being stupid some one please hurl some abuse at me and i'll shut up!

Mr. Prister
Dec 12 '08 #6
8,658 Recognized Expert Moderator Expert
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.

Dec 12 '08 #7
7,435 Recognized Expert Expert
Cannot be style with. It has no effect.
Dec 13 '08 #8
7,435 Recognized Expert Expert
@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
7,435 Recognized Expert Expert
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"

Although HTML is case insensitive, use lower case because CSS is case sensitive.
Dec 13 '08 #10

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

Similar topics

by: Abhijeet Kumar | last post by:
Hi How can i justify align text on Label Control. I am working in C# Desktop application
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, bad idea, don't tell me, I just implement what I'm told), seeking to do it in a backwards compatable mode by using javascript to hide the real...
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
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. Interestingly, if I upload this test project to the internet, and re-try this test, the javascript function correctly gets called only once. ...
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
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 displaying a line above their respective labels. Here are the html and css snippets: <fieldset class="radio"> <legend>Credit card</legend>
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 called "Align". It should have center,left and right alignments. I have created a label with this property and set that to textalign. But it doesnt...
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 assume you know what templates are in a GridView. Examples are in VB.NET. Sorry... So as a first step create a function in the page's underlying...
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 ***
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.