tags:

views:

21

answers:

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
  <title>Input data</title>
  <link type="text/css" rel="stylesheet" href="css/reset.css">
  <link type="text/css" rel="stylesheet" href="css/my_css.css">
</head>

<body style="position:relative; top=0px; left=0px;">
      <input type="radio" name="radio_name" value="one" checked>one<br>
      <input type="radio" name="radio_name" value="two">two<br>
      <input type="radio" name="radio_name" value="three">three<br>
</form>
</body>
</html>

reset.css is one of the more famous one's (I forget where I got it, sorry).

The button text is appearing left aligned (behind the radio buttons), so what's the correct CSS to make it appear to the right of the buttons?

I am guessing something with input[type="radio"] and border or padding, but I can't seem to get it to work.

+1  A: 

Well, first off, that isn't valid HTML - where did your opening form tag go?

To correct method for creating labels for form element is using the (surprise!) label element. If you need each element on separate lines it is recommended to use a list to separate each line. Something like this:

<ul>
    <li><input type="radio" name="radio_name" value="one" id="one" checked><label for="one">one</label></li>
    <li><input type="radio" name="radio_name" id="two" value="two"><label for="two">two</label></li>
    <li><input type="radio" name="radio_name" id="three" value="three"><label for="three">three</label></li>
<ul>

This will look something like this without any CSS except for the reset. Otherwise there's nothing we can help you out with here unless you actually show us the CSS. Just guessing though, you might have set position: absolute on your input elements.

Here are some of the possible styles that may cause the problem you described: http://jsfiddle.net/3HUnL/

Yi Jiang