tags:

views:

133

answers:

2
Q: 

Why is hidden text input boxes showing up below instead of to the right?

Hi, 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"&gt;&lt;/script&gt;
<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"&gt;

<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>
A: 

I think these lines will help you get started, at least for the line about browsers.

The key thing is that you need to float your spans and then float the hidden span. You'll need to clear all of your spans except for the hidden ones though.

DEMO

 #showhidetarget5 {
    float:left;
    clear:none;
  }
  span {
    float:left; 
    clear:both;
  }

Also, what's up with all of the 'aria-labelledby' attritbutes? I don't think those are even valid html attributes.

Catfish  2010-07-23 21:12:57
I believe the aria-labelledby attributes are coming in HTML5 (at least that's what most of the accessible specifications say). Thanks for your response!
Victor  2010-07-26 11:50:50
A:  
#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.

Scott  2010-07-23 21:13:24
Thank you, I have alot more to learn about CSS.
Victor  2010-07-26 12:26:54

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?