Solved

css is displaying text field behnd text field rather then below

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

632 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