Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

radio button and label aligning

Status
Not open for further replies.
Graeme06

Graeme06

Technical User
Jun 6, 2006
60
Hi, I've got a bunch of radio buttons with labels. The thing is that the radio button seems a little high compared to the label (they are not vertically alligned perfectly). I've tried CSS but gotten no where, although I'm probably doing something wrong. Any ideas?

Thanks,
Graeme
 
Sort by date Sort by votes
thanks, but that does the same thing. Is there any CSS I need to add on top of that?
 
Upvote 0 Downvote
I'm not sure exactly how you want it to look, but try using vertical-align on the input tag. It'll change how it's aligned. Perhaps text-top will be to your liking.
 
Upvote 0 Downvote
Not true. My code:
Code: 
<!DOCTYPE XHTML PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/xhtml1-loose.dtd">[/URL]
<html>
<head><title></title>
</head>
<body>
<label for="rb1">Yes
  <input type="radio" name="rb1" value="y" style="vertical-align:bottom;" />
</label>
</body>
</html>

W3C:

'vertical-align'
Applies to: inline-level and 'table-cell' elements
 
Upvote 0 Downvote
show me the difference in these two:

Code: 
<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

<html>
<head>
<title>Untitled</title>
</head>

<body>

<label for="rb1">Yes
  <input type="radio" name="rb1" id="rb1" value="y" style="vertical-align:bottom;" />
</label>

<label for="rb2">Yes
  <input type="radio" name="rb2" id="rb2" value="y" />
</label>

</body>
</html>



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
or this:

Code: 
<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

<html>
<head>
<title>Untitled</title>
</head>

<body>

<div style="height: 300px; border: 1px solid black;">
<label for="rb1">Yes
  <input type="radio" name="rb1" id="rb1" value="y" style="vertical-align:bottom;" />
</label>

<label for="rb2">Yes
  <input type="radio" name="rb2" id="rb2" value="y" />
</label>

<img src="[URL unfurl="true"]http://www.tek-tips.com/images/partnerbtn120x60.gif"[/URL] style="vertical-align: bottom;" />
<img src="[URL unfurl="true"]http://www.tek-tips.com/images/partnerbtn120x60.gif"[/URL] />

</div>

</body>
</html>

radio buttons are looking the same...



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Screenshot.png


Maybe it doesn't work in IE. I'm on my Linux box and can't test it. I'm not intending to start a flame war, but as you can see, it's working for me.
 
Upvote 0 Downvote
well that looks somewhat better, thanks. I still don't get why I can't just add some padding though.
 
Upvote 0 Downvote
oh and by the way, it does chang ethe allignemtn of the radio buttons. Whether it is valid or not, I haven't checked yet.
 
Upvote 0 Downvote
lol, I just realized why it was working for me. I was using Firefox 2.0 beta 1, and it would seem that it interprets that property a little better.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
466
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
132
lmcate
lmcate
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
359
PeDa
PeDa
jason.lex
  • Locked
  • Question
Bootstrap grid and columns question
Replies
0
Views
70
jason.lex
jason.lex
jason.lex
  • Locked
  • Question
iPhone browsers (chrome and safari) output different compared to other browsers 1
Replies
2
Views
94
jason.lex
jason.lex

Part and Inventory Search

Sponsor

Back
Top