Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

css is displaying text field behnd text field rather then below

Posted on 2013-01-24
3
Medium Priority
?
140 Views
Last Modified: 2013-02-13
Hello,

I am having an issue where when a hidden field is shown its displaying behind the current textboxes.

If you follow to this site:http://jarrattperkins.com/training/addtraining.aspx

And select training type: session you will see what it does.

the css is
		.rightinfo
		{ 
			float:left;
			width:94px;
			text-align:left;
			}
		.leftinfo
		{
			float:left;
			width:182px;
			text-align:left;
	height: 22px;
}
			#mainaddtraning
			{
				margin-top:50px;
				float:left;
				width:100%;
				
			
			}
			.bothinfo
			{
				width:100%;
				margin-bottom:15px; 
				display:inline-block;
				
			}

Open in new window


html is

<div id="addtrainingbox">  
<div id="addtrainingtext">
 
<h2>Add Training<img id="diary" src="images/diary.png" /></h2></div> <div id="diaryimage"> </div> 
        <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', 'form1', [], [], [], 90, '');
//]]>
</script>


     
<center>
<div id="mainaddtraning">
<div class="bothinfo">
<div class="rightinfo"> Run Date & Time: </div><div class="leftinfo"><input name="rundatetime" type="text" id="rundatetime" style="width:180px;" /> 
         
        <input type="hidden" name="MaskedEditExtender6_ClientState" id="MaskedEditExtender6_ClientState" /> 
        <span id="MaskedEditValidator6" style="display:none;"></span></div>
          </div>
          <br />
          <div class="bothinfo">
            <div class="rightinfo">Training Type:  </div> <div class="leftinfo"> <select name="Type" id="Type">
	<option value="SteadyRun">Steady Run</option>
	<option value="EasyRun">Easy Run</option>
	<option value="LongRun">Long Run</option>
	<option value="Session">Session</option>

</select></div></div>
    <div class="bothinfo">
            <div class="rightinfo">Terrain Type: </div>
            <div class="leftinfo">     <select name="terrain1" id="terrain1">
	<option value="Road">Road</option>
	<option value="XC">XC</option>
	<option value="Track">Track</option>
	<option value="Other">Other</option>

</select></div>
    <div class="hideme">
    <div class="bothinfo">
            <div class="rightinfo"> Distance (Miles):</div>
             <div class="leftinfo">  <input name="thedistance" type="text" id="thedistance" style="width:30px;" /></div>
             </div>
             </div>
             <div class="hideme2">
              <div class="bothinfo">
            <div class="rightinfo"> Session:</div>
             <div class="leftinfo"> Warmup-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Distance:
                       &nbsp;<input name="repdistance1" type="text" id="Text1" style="width:30px;" />
                       
                        Min: 
                     <input name="min3" type="text" value="00" maxlength="2" id="Text2" style="width:30px;" />
                        Secs 
                     <input name="sec3" type="text" value="00" maxlength="2" id="Text3" style="width:30px;" /><br /><br />
                  <div id='TextBoxesGroup'>
                        Rep1-
                          &nbsp;&nbsp;Distance:
                       &nbsp;
                      <input name="repdist1" type="text" id="repsit1" style="width:30px;" /><select name="kmormile1" id="kmormile1">	<option value="Miles">Miles</option>	<option value="Km">Km</option></select>
                        Min: 
                     <input name="repmin1" type="text" value="00" maxlength="2" id="repmin1" style="width:30px;" />
                        Secs 
                     <input name="repsec1" type="text" value="00" maxlength="2" id="repsec1" style="width:30px;" /><a href="#" value="addButton" class="addButton">Add</a>&nbsp;<a href="#" value="removeButton" class="removeButton">Remove</a>
                      </div> <br />
                                      

Cooldown-&nbsp;

                      &nbsp;&nbsp;&nbsp;Distance:
                       &nbsp;<input name="TextBox1" type="text" id="TextBox1" style="width:30px;" />
                        Min: 
                     <input name="TextBox2" type="text" value="00" maxlength="2" id="TextBox2" style="width:30px;" />
                        Secs 
                     <input name="TextBox3" type="text" value="00" maxlength="2" id="TextBox3" style="width:30px;" /><br /><br /></div>
             </div>
             <br />
             </div>
               <div class="hideme">
             <div class="bothinfo">
            <div class="rightinfo">Time:</div>
             <div class="leftinfo">  Hr: 
                     <input name="hour1" type="text" value="00" maxlength="2" id="hour1" style="width:30px;" />
                        Min: 
                     <input name="min1" type="text" value="00" maxlength="2" id="min1" style="width:30px;" />
                        Secs 
                     <input name="sec1" type="text" value="00" maxlength="2" id="sec1" style="width:30px;" /></div>
             </div>
             </div>
             <div class="bothinfo">
            <div class="rightinfo">Weather: </div>
             <div class="leftinfo"><select name="weather1" id="weather1">
	<option value="Sunny">Sunny</option>
	<option value="Cloudy">Cloudy</option>
	<option value="Light Rain">Light Rain</option>
	<option value="Heavy Rain">Heavy Rain</option>
	<option value="Windy">Windy</option>
	<option value="Snow">Snow</option>

</select></div>
             </div>
                 <div class="bothinfo">
            <div class="rightinfo"> Comments: </div>
             <div class="leftinfo"><input name="comments1" type="text" id="comments1" style="height:100px;width:150px;" /></div>
             </div>

        <input type="submit" name="Submit" value="Submit" id="Submit" class="button" />
        <input type="submit" name="Cancel" value="Cancel" id="Cancel" />
</div>  
</center>
    </div>

Open in new window

0
Comment
Question by:runnerjp2005
3 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38814864
If you want it on top it needs a z-index.  Adding that might or might not work because the junk scripting ends up generating a bunch of errors.  The doctype is a weak transitional and I see at least one obsolete tag.  The meaningless errors from the scripting are probably getting the way of identifying the serious errors.

If the z-index works it is just luck; but don't worry with all that junk in the page it is bound to give you lots of practice at fixing a broken page anytime you try to do something with it.

Cd&
0
 

Author Comment

by:runnerjp2005
ID: 38815237
I have fixed all the error but it still happens... it should be on its own line
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 2000 total points
ID: 38815249
The absolute first thing you need to do is make sure your HTML is semantic. If text isn't inside of a container(I'm referring to the labels) put it in a container.

This:

             		Warmup-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Distance:
                       &nbsp;<input type="text" style="width:30px;" id="Text1" name="repdistance1">

Open in new window


This code above is absolutely horrible. You should have that text in a label field and it should be right above or right next to the corresponding input.

 <label for="warmup">Warmup-Distance</label>
 <input type="text" style="width:30px;" id="Text1" name="repdistance1">

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

824 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question