Solved

css is displaying text field behnd text field rather then below

Posted on 2013-01-24
3
131 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 500 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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

746 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now