First of all, it's a really bad idea to use…

Question

0

Asked: May 15, 20262026-05-15T21:59:02+00:00 2026-05-15T21:59:02+00:00

I found an odd error when I was splitting up my code into a

0

I found an odd error when I was splitting up my code into a new page (and reorganizing the questions). Sorry if my code is sloppy, I’ve done alot of re-learning as I begin to incorporate CSS and jQuery into my knowledge base…last time I made a website was with tables back in high school.

Anyway, the problem I have is the hidden input text boxes (the specify ones) show up when a participant clicks on the checkbox. What happens when I originally tested the code in Firefox and IE was the box correctly un-hides itself to the right of the checkbox item.

However, now the input box is appearing below the checkbox! How can I fix this?

CSS code:

#inputArea
{
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    background-color: #d6e5f4;
    padding: 10px;
}

#inputArea input[type="text"], #inputArea textarea
{
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    border: solid 1px #85b1de;
    width: 300px;
    background-color: #EDF2F7;
} 

div.row label:hover {
    background:#FFFF66;
    cursor:pointer;
}


.prestyle {
  display: inline;
  font-size:14.4px;
  font-family: Arial, Helvetica, sans-serif;
}


.indent { margin-left: 50px; }

p.page {
    text-align:center;
    font-size:20px;
}

.italic {font-style:italic;}

.blacktext {
    font: 14pt sans-serif;
    letter-spacing 2pt;
    color: #000000
}


#inputArea input[type="text"]:focus, #inputArea textarea:focus
{
    background-image: none;
    background-color: #ffffff;
    border: solid 1px #33677F;
}

body
{
background-color: #d6e5f4;
}


</style>

Javascript/JQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            $('#Yes_Computer1').hide();

            $('#Yes_Computer').click(function () {
                $('#Yes_Computer1').toggle(400);
            });
        });
        $(document).ready(function () {
            $('#No_Computer').click(function () {
                $('#Yes_Computer1').hide();

            });
        });     
        $(document).ready(function () {
            $('#showLinuxSpecify').hide();

            $('#Linux').click(function () {
                $('#showLinuxSpecify').toggle(400);
            });
        });
        $(document).ready(function () {
            $('#showOSXspecify').hide();

            $('#OSX').click(function () {
                $('#showOSXspecify').toggle(400);
            });
        });
        $(document).ready(function () {
            $('#showWindowsSpecify').hide();

            $('#Windows').click(function () {
                $('#showWindowsSpecify').toggle(400);
            });
        });     
        $(document).ready(function () {
            $('#showOtherOSSpecify').hide();

            $('#OtherOS').click(function () {
                $('#showOtherOSSpecify').toggle(400);
            });
        });     
        $(document).ready(function () {
            $('#showhidetarget5').hide();

            $('#OtherBrowser').click(function () {
                $('#showhidetarget5').toggle(400);
            });
        });         
</script>

Body:

<body>
<form name="Background" method="post" action="http://localhost/background.php">

<fieldset>
<div id="inputArea">


<div class="blacktext">8. Do you have a computer at home?</div>
<div class="row">
<pre class="prestyle">
    <span><input type="radio" name="Home_Computer" value="Yes" id="Yes_Computer" onclick=""><label for="Yes_Computer" id="Yes_Computer-ariaLabel">Yes</label></span>
    <span><input type="radio" name="Home_Computer" value="No" id="No_Computer" onclick=""><label for="No_Computer" id="No_Computer-ariaLabel">No</label></span>
</pre>
</div>
<br />
<span id="Yes_Computer1">
<div class="blacktext">8a. What type of internet connection do you use at home?  <span class="italic">Please check all that apply</span>.</div>
<div class="row">
<pre class="prestyle">
    <span><input type="checkbox" name="modem" value="Cable" id="Cable" aria-labelledby="Cable-ariaLabel"> <label for="Cable" id="Cable-ariaLabel">Cable Service</label></span>  
    <span><input type="checkbox" name="modem" value="Dial-up" id="Dial-up" aria-labelledby="Dial-up-ariaLabel"> <label for="Dial-up" id="Dial-up-ariaLabel">Dial-up Service</label></span>      
    <span><input type="checkbox" name="modem" value="DSL" id="DSL" aria-labelledby="DSL-ariaLabel"> <label for="DSL" id="DSL-ariaLabel">DSL Service</label></span>      
    <span><input type="checkbox" name="modem" value="SatelliteDish" id="SatelliteDish" aria-labelledby="SatelliteDish-ariaLabel"> <label for="SatelliteDish" id="SatelliteDish-ariaLabel">Satellite Dish Service</label></span>     
    <span><input type="checkbox" name="modem" value="FiberOptic" id="FiberOptic" aria-labelledby="FiberOptic-ariaLabel"> <label for="FiberOptic" id="FiberOptic-ariaLabel">Fiber-Optic Service</label></span>       
    <span><input type="checkbox" name="modem" value="MobileBroadband" id="MobileBroadband" aria-labelledby="MobileBroadband-ariaLabel"> <label for="MobileBroadband" id="MobileBroadband-ariaLabel">Mobile Broadband Plan for a Computer or Cell Phone</label></span>       
</pre>
</div>
<br />
<div class="blacktext">8b. Browsers are software on a computer used to surf the Internet.  Last month, which Internet browser did you typically use at home?  <span class="italic">Please check all that apply</span>.</div>
<div class="row">
<pre class="prestyle">
    <span><input type="checkbox" name="modem" value="Firefox" id="Firefox" aria-labelledby="Firefox-ariaLabel"> <label for="Firefox" id="Firefox-ariaLabel">Firefox</label></span>  
    <span><input type="checkbox" name="modem" value="GoogleChrome" id="GoogleChrome" aria-labelledby="GoogleChrome-ariaLabel"> <label for="GoogleChrome" id="GoogleChrome-ariaLabel">Google Chrome</label></span>   
    <span><input type="checkbox" name="modem" value="InternetExplorer" id="InternetExplorer" aria-labelledby="InternetExplorer-ariaLabel"> <label for="InternetExplorer" id="InternetExplorer-ariaLabel">Internet Explorer</label></span>   
    <span><input type="checkbox" name="modem" value="Safari" id="Safari" aria-labelledby="Safari-ariaLabel"> <label for="Safari" id="Safari-ariaLabel">Safari</label></span>    
    <span><input type="checkbox" name="modem" value="OtherBrowser" id="OtherBrowser" aria-labelledby="OtherBrowser-ariaLabel"> <label for="OtherBrowser" id="OtherBrowser-ariaLabel">Other</label></span>       <span id="showhidetarget5"><label for="OtherBrowser_version" id="OtherBrowser_version-ariaLabel">Please specify:</label><input value="" id="OtherBrowser_version" name="OtherBrowser_version" type="text" aria-labelledby="OtherBrowser_version-ariaLabel" style="width:150px"></span></pre>
</div>
<br />
<div class="blacktext">8c. What operating system does your home computer run in? <span class="italic">Select all that apply</span></div>
<div class="row">
<pre class="prestyle">
    <span><input type="checkbox" name="OS" value="Linux" id="Linux" aria-labelledby="Linux-ariaLabel"> <label for="Linux" id="Linux-ariaLabel">Linux</label></span>         <span id="showLinuxSpecify"><label for="Linux_version" id="Linux_version-ariaLabel">Please specify:</label><input value="" id="Linux_version" name="OLinux_version" type="text" aria-labelledby="Linux_version-ariaLabel" style="width:150px"></span>   
    <span><input type="checkbox" name="OS" value="OSX" id="OSX" aria-labelledby="OSX-ariaLabel"> <label for="OSX" id="OSX-ariaLabel">Mac OSX</label></span>         <span id="showOSXspecify"><label for="OSX_version" id="OSX_version-ariaLabel">Please specify:</label><input value="" id="OSX_version" name="OSX_version" type="text" aria-labelledby="OSX_version-ariaLabel" style="width:150px"></span>
    <span><input type="checkbox" name="OS" value="Windows" id="Windows" aria-labelledby="Windows-ariaLabel"> <label for="Windows" id="Windows-ariaLabel">Microsoft Windows</label></span>           <span id="showWindowsSpecify"><label for="Windows_version" id="Windows_version-ariaLabel">Please specify:</label><input value="" id="Windows_version" name="Windows_version" type="text" aria-labelledby="Windows_version-ariaLabel" style="width:150px"></span>
    <span><input type="checkbox" name="OS" value="Other" id="OtherOS" aria-labelledby="OtherOS-ariaLabel"> <label for="OtherOS" id="OtherOS-ariaLabel">Other</label></span>         <span id="showOtherOSSpecify"><label for="OtherOS_version" id="OtherOS_version-ariaLabel">Please specify:</label><input value="" id="OtherOS_version" name="OtherOS_version" type="text" aria-labelledby="OtherOS_version-ariaLabel" style="width:150px"></span>
</pre>
</div>
</span>

</div>
</fieldset>

</form>
<!--Edit the text inside the <p> tags according to the remaining number of questions or pages -->

<p class="page">Page 3 of X</p>
<center>
<input value="Next Page" type="submit">
</center>

</body>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-15T21:59:03+00:00

Editorial Team

2026-05-15T21:59:03+00:00Added an answer on May 15, 2026 at 9:59 pm

#inputArea input[type="text"], #inputArea textarea
{
  font-family: Arial, Sans-Serif;
  font-size: 13px;
  margin-bottom: 5px;
  display: block;  <------This is your problem
  padding: 4px;
  border: solid 1px #85b1de;
  width: 300px;
  background-color: #EDF2F7;
}

Should be display: inline (which I think is default) if you want it to sit beside. If you need the width then use display: inline-block.

0

Reply
Share
Share

- Report

How to approach applying for a job at a company ...

What is a programmer’s life like?

How to handle personal stress caused by utterly incompetent and ...

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions