www.webdeveloper.com
Results 1 to 2 of 2

Thread: Cannot align radio buttons in a div tag

  1. #1
    Join Date
    Oct 2012
    Posts
    1

    Cannot align radio buttons in a div tag

    Having trouble getting 4 radio buttons and text to line up one below the other in a hidden box. when a check box is checked the box appears with 4 selections available to the user, but the last radio button is not aligned...any ideas?

    <script language="JavaScript" type="text/JavaScript">
    function uncheckRadio#scid#() {
    var choice = document.myform.areason_#scid#;
    for (i = 0; i < choice.length; i++)
    { if ( choice[i].checked = true ) choice[i].checked = false; }
    }
    </script>
    <cfset idcount = idcount + 1>
    <input type="hidden" name="scid" value="#scid#">
    <input type="hidden" name="itemid" value="#itemid#">
    <div id="reason_#scid#"
    style="display:none;
    position:absolute;
    left:200px;
    top:200px;
    width:750px;
    border-style: solid;
    background-color: white;
    padding: 5px;">

    <div style="float:left; position:fixed;"><input type="radio" name="areason_#scid#" id="areason_#scid#" onchange="ReverseContentDisplay('reason_#scid#'); return true;" value="This item is out of stock. Would you like to be alerted if it becomes available again." /></div><div style="float:left; display:inline; position:relative; left:20px;">This item is out of stock. Would you like to be alerted if it becomes available again.</div><br />

    <div style="float:left; position:relative; top:5px; left:0px;"><input type="radio" name="areason_#scid#" id="areason_#scid#" onchange="ReverseContentDisplay('reason_#scid#'); return true;" value="This item is currently out of stock but one can be custom made for you. Each piece is hand made and can take two or three weeks to complete. We will contact you when your piece is ready for shipment with a link for payment. Please respond with your order request." /></div><div style="float:left; display:inline; position:relative; top:-10; left:20px;">This item is currently out of stock but one can be custom made for you. Each piece is hand made and can take two or three weeks to complete. We will contact you when your piece is ready for shipment with a link for payment. Please respond with your order request.</div>

    <div style="float:left; position:relative; top:-5px; left:0px;"><input type="radio" name="areason_#scid#" id="areason_#scid#" onchange="ReverseContentDisplay('reason_#scid#'); return true;" value="Sorry, this item has been discontinued." /></div><div style="float:left; display:inline; position:relative; top:-17px; left:20px;">Sorry, this item has been discontinued. <br />

    <div style="float:left; position:relative; top:5px; left:-20px;"><input type="radio" name="areason_#scid#" id="areason_#scid#" onchange="ReverseContentDisplay('reason_#scid#'); return true;" value="This item is currently out of stock. Please let us know if you would like to be alerted when it becomes available again." /></div><div style="float:left; display:inline; position:relative; top:-10px; left:-0px;">This item is currently out of stock. Please let us know if you would like to be alerted when it becomes available again.</div>

    <a style="float:left; position:relative; top:5px; left:-20px; cursorointer;" onclick="uncheckRadio#scid#();">Clear Selection</a>
    <a style="float:left; position:relative; top:5px; left:30px; cursorointer;" onclick="ReverseContentDisplay('reason_#scid#'); return true;">Close</a>
    </div>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330
    Did you say the script works?

    One problem: ID values MUST be unique. I find 4 places where the ids are identical.
    Another problem: I do not believe # characters are valid in the id settings or function names.

    BTW: You should enclose your code between [ code] and [ /code] tags (without the spaces)
    to make it easier to read, copy, test and debug your programs by other members. It also preserves your formatting.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles