Solved

css is displaying text field behnd text field rather then below

Posted on 2013-01-24
3
135 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

738 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