Radio button form

timstring

The buttons in this form are set more than an inch from the labels. Here's the html:

<div align="left">
<input type="radio" name="Task" value="NotDone">Not Dones<br>
<input type="radio" name="Task" value="Suspended">Suspended<br>
<input type="radio" name="Task" value="Cancelled">Cancelled<br>
<input type="radio" name="Task" value="RouteParameters">Route Parameters<br>
<input type="radio" name="Task" value="InTime">In Time<br>
<input type="radio" name="Task" value="Late">Late<br>
<input type="radio" name="Task" value="ManualICOMS">Manual ICOMS<br>

</div>

see pic:

[ATTACH]5035[/ATTACH]

Radio.jpg

bradgrafelman

Can you show us the CSS rule(s) that apply to the elements in question?

dalecosp

timstring;11038155 wrote:
The buttons in this form are set more than an inch from the labels. Here's the html:

Try a smaller monitor 😉 😃

timstring

A smaller monitor? I can barely see this one

I have tinkered with the CSS and arrived at this

.Day {
	font-size: 12px;
    width: 100px;
    height: 14px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	}


.EnterButtons {
	font-size: 18px;
    height: 24px;
	text-align:left;
	margin-left:auto;
	margin-right:auto;

}

.FormButton {
	background: #cc1559;
	width: 100px;
	height: 32px;

font: 24px/24px Helvetica, sans-serif;
font-weight:900;
text-align:center;
font-stretch:expanded;
color:#FFF;
font-style:oblique;
border-width: 3px;
border-style: solid;
border-color: #5e5e5e #888 #696969 #888;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
border-radius: 18px;
}

Since y'all always ask, here's the sum of the HTML Code:

<body>

<p><IMG class="displayed" src="Images/Easy_logo.gif" width="225px" height="70px" /></p><br />



<div style="width:400px; margin:auto">
<form action="FindNotDones.php" method="post" class="center">


<br><br><p>Select Date</p>
<?php
echo $_POST['SystemNum'];
$_SESSION['SystemNum'] = $_POST['SystemNum'];

echo '<input type="text" id="field1" class = "Day" name="WorkDate" size="50" lable = "Select Date<br>" value="' . date("Y-m-d", time()) . '" /><br/>';
      ?>     

 <script>
  AnyTime.picker( "field1",
    { format: "%Y-%m-%d", firstDOW: 0 } );
  $("#field2").AnyTime_picker(
    { format: "%H:%i", labelTitle: "Hora",
      labelHour: "Hora", labelMinute: "Minuto" } );
</script>
<br>

<div class = "EnterButtons">
<input type="radio" name="Task" value="Not Done">Not Dones<br>
<input type="radio" name="Task" value="Suspended">Suspended<br>
<input type="radio" name="Task" value="Cancelled">Cancelled<br>
<input type="radio" name="Task" value="RouteParameters">Route Parameters<br>
<input type="radio" name="Task" value="InTime">In Time<br>
<input type="radio" name="Task" value="Late">Late<br>
<input type="radio" name="Task" value="Manual ICOMS">Manual ICOMS<br>

</div>

<input type="submit" value="Submit" class="FormButton">


</form>
</body>

Which yields:

[ATTACH]5037[/ATTACH]

Two things wrong: The submit button & the margins. The whole thing is jammed against the left side of the monitor. I need it to be centered on the screen. I have tried various "position" commands with no luck.

Thanks for the speedy reply

radio2.jpg

johanafm

Validate your html code
Then remove all your styles and it should looks like it should look.

dalecosp

Looks like you're in MSIE and, possibly, an older version?

You'll need a valid DOCTYPE to force IE into standards mode, at which point your "auto margins" will probably work.

I'd suggest making a container DIV around the entire thing and marking it "position:relative;".

After this, you can absolutely position your other elements inside the container.

I like to set backgrounds on DIV elements, or borders, so I can see where they intersect during development (this can be removed from the CSS later).

The reason your submit button is smack in the middle of your form is because you have a DIV with className "EnterButtons" set to a height of 24px, but you have about 150px worth of content (seven radio buttons choices). Setting ".EnterButtons" height larger is a quick fix, but, really, you should probably not have this DIV here....

timstring

Thanks for the help. I did a major overhaul and cleared up most of the problems. Now, one problem remains. I'm trying to get the form to align left, but in the middle of the screen. If I put a "text-align:left," the form is on the left side of the screen. If I take that property out, the form lines are centered on the page. What I need is to specify "text-align:left" with the whole block in the center of the screen.

dalecosp

Put a container (div perhaps?) around the whole "block" (if there isn't one already). Set its left/right margins to auto and then use the text-align on the content/tags inside that container.