Member_2_5230414
asked on
css is displaying text field behnd text field rather then below
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
html is
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;
}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- Distance:
<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-
Distance:
<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> <a href="#" value="removeButton" class="removeButton">Remove</a>
</div> <br />
Cooldown-
Distance:
<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>ASKER
I have fixed all the error but it still happens... it should be on its own line
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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&