Problem with text after a radio-input.

Forum Moderators: open

Message Too Old, No Replies

Problem with text after a radio-input.

jozomannen

10:47 pm on Sep 11, 2005 (gmt 0)

If I use this code:

<input type="radio"> Text1<br />
<input type="radio"> Text2

It will print out two radio-inputs and a text to the right of them. The thing is that the text will be like 2-4 pixels below the center of the radio-input.

So I wonder if there is any way to center the text vertically so it will look like it's on the same "row" as the radio-input?

Argblat

2:05 am on Sep 12, 2005 (gmt 0)

Something is fishy with what you are saying. Because given the small bit of code you posted, the radio input (the small circle) and the text for that radio input should line up exactly as you say...

Like this:

O Text 1
O Text 2

Perhaps your problem is due to CSS, or is browser specific. Try creating an html page with the following code and testing it in more than one environment and see if your problem persists:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<input type="radio"> Text1<br />
<input type="radio"> Text2
</body>
</html>

keyplyr

6:52 am on Sep 12, 2005 (gmt 0)

...any way to center the text vertically so it will look like it's on the same "row" as the radio-input?

style="vertical-align:middle;"

jozomannen

12:03 pm on Sep 12, 2005 (gmt 0)

Argblat: Try this code instead and you'll see the problem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style> body{font-size:11px;}</style>
</head><body>
<input type="radio"> Text1<br />
<input type="radio"> Text2</body>
</html>

keyplyr: Where should I add that code? For it to work?

jozomannen

12:13 pm on Sep 12, 2005 (gmt 0)

I tried to add: style="vertical-align:middle;" so the radio-input, but the text gets too high now. (it was too low before)

Is there any way I can do like vertical-align:middle+2px; or something like that?

Edit: it works in IE but not in FF

moltar

1:17 pm on Sep 12, 2005 (gmt 0)

Smaller fonts appear to be off. I am not sure how to fix this. I will look up later tonight.

This sort of illusion could happen with larger fonts. The radio button is centered in relation to lowercase text. If your text starts with an uppercase letter (like in your example) then it creates an illusion that the button is off.

jozomannen

5:58 pm on Sep 12, 2005 (gmt 0)

I guess this is my best try:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style> body{font-size:11px;}</style>
</head><body>
<table>
<tr><td><input type="radio"></td><td>Text1</td></tr>
<tr><td><input type="radio"></td><td>Text2</td></tr>
</table></body>
</html>

But it's not working 100% in FF

keyplyr

7:43 pm on Sep 12, 2005 (gmt 0)

Don't know what you are seeing but this aligns fine in IE or FF.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style> body{font-size:11px;}</style>
</head>

<body>

</body>
</html>

jozomannen

8:21 pm on Sep 12, 2005 (gmt 0)

I don't think it's as good in FF 1.0.6 as it is in IE, but I guess it will do. It's better then before this thread anyways =)

Thanks a lot for the help.