I feel really dumb for not being able to figure this out so here I am, back at stackoverflow! I have a really basic table to be used as a reservation form. There are check-in dates and check-out dates that the user has to complete by using drop down menus for day month and year. For some reason, there is a big gap between day and month, pushing month and year all the way to the right of the browser window.
why? i know it must be something simple so I’m kicking myself for not being able to figure it out. sigh. can you help me?
here is the relevant code (i’ve updated it to include from start to finish, but removed a lot of javascript from the end). The linked css files are accessible if you put them in the url, but they didn’t tell me much..:
<link rel="stylesheet" type="text/css" href="http://www.emailmeform.com/builder/styles/dynamic.php?t=post" />
<link rel="stylesheet" type="text/css" href="http://www.emailmeform.com/builder/theme_css/f4kIcSddmwd92Jc1Zfx05Me8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined'){
document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-1.4.4.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
if (typeof $.ui == 'undefined'){
document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-ui-1.7.2.custom.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" src="http://www.emailmeform.com/builder/js/dynamic.php?t=post&t2=0&use_CDN=true"></script>
<div id="emf-container-outer">
<div id="emf-container">
<div id="emf-logo">
<a>EmailMeForm</a>
</div>
<form id="emf-form" class="leftLabel" enctype="multipart/form-data" method="post" action="http://www.emailmeform.com/builder/form/f4kIcSddmwd92Jc1Zfx05Me8" name="emf-form">
<div id="emf-form-instruction" class="emf-head-widget">
<div id="emf-form-description">
Please fill out the form below if you know which dates you would like to stay at Sarita.
</div>
</div>
<ul>
<li id="emf-li-0" class="emf-li-field emf-field-name data_container" style="text-align:left">
<label class="emf-label-desc" for="element_0">Name <span>*</span></label>
<div class="emf-div-field">
<span><input class="validate[required] emf-input-w60" value="" id="element_0_2" name="element_0[]" type="text" /> <label for="element_0_2" class=
"emf-bottom-label emf-text-center">First</label></span> <span><input class="validate[required] emf-input-w100" value="" id="element_0_3" name="element_0[]" type="text" /> <label for=
"element_0_3" class="emf-bottom-label emf-text-center">Last</label></span>
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-1" class="emf-li-field emf-field-email data_container" style="text-align:left">
<label class="emf-label-desc" for="element_1">Email <span>*</span></label>
<div class="emf-div-field">
<input id="element_1" name="element_1" class="validate[required,custom[email]]" value="" size="30" type="text" />
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-2" class="emf-li-field emf-field-select data_container" style="text-align:left">
<label class="emf-label-desc" for="element_2">Check-IN Date <span>*</span></label>
<div class="emf-div-field">
<select id="element_2" name="element_2" class="validate[required]">
<option value="" selected="selected">
Day
</option>
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
<option value="4">
4
</option>
<option value="5">
5
</option>
<option value="6">
6
</option>
<option value="7">
7
</option>
<option value="8">
8
</option>
<option value="9">
9
</option>
<option value="10">
10
</option>
<option value="11">
11
</option>
<option value="12">
12
</option>
<option value="13">
13
</option>
<option value="14">
14
</option>
<option value="15">
15
</option>
<option value="16">
16
</option>
<option value="17">
17
</option>
<option value="18">
18
</option>
<option value="19">
19
</option>
<option value="20">
20
</option>
<option value="21">
21
</option>
<option value="22">
22
</option>
<option value="23">
23
</option>
<option value="24">
24
</option>
<option value="25">
25
</option>
<option value="26">
26
</option>
<option value="27">
27
</option>
<option value="28">
28
</option>
<option value="29">
29
</option>
<option value="30">
30
</option>
<option value="31">
31
</option>
</select>
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-3" class="emf-li-field emf-field-select data_container" style="text-align:left">
<div class="emf-div-field">
<select id="element_3" name="element_3" class="validate[optional]">
<option value="Month" selected="selected">
Month
</option>
<option value="January">
January
</option>
<option value="February">
February
</option>
<option value="March">
March
</option>
<option value="April">
April
</option>
<option value="May">
May
</option>
<option value="June">
June
</option>
<option value="July">
July
</option>
<option value="August">
August
</option>
<option value="September">
September
</option>
<option value="October">
October
</option>
<option value="November">
November
</option>
<option value="December">
December
</option>
</select>
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-4" class="emf-li-field emf-field-select data_container" style="text-align:left">
<div class="emf-div-field">
<select id="element_4" name="element_4" class="validate[optional]">
<option value="Year" selected="selected">
Year
</option>
<option value="2011">
2011
</option>
<option value="2012">
2012
</option>
<option value="2013">
2013
</option>
<option value="2014">
2014
</option>
<option value="2015">
2015
</option>
<option value="2016">
2016
</option>
<option value="2017">
2017
</option>
<option value="2018">
2018
</option>
<option value="2019">
2019
</option>
<option value="2020">
2020
</option>
</select>
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-5" class="emf-li-field emf-field-select data_container" style="text-align:left">
<label class="emf-label-desc" for="element_5">Check-OUT Date <span>*</span></label>
<div class="emf-div-field">
<select id="element_5" name="element_5" class="validate[required]">
<option value="" selected="selected">
Day
</option>
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
<option value="4">
4
</option>
<option value="5">
5
</option>
<option value="6">
6
</option>
<option value="7">
7
</option>
<option value="8">
8
</option>
<option value="9">
9
</option>
<option value="10">
10
</option>
<option value="11">
11
</option>
<option value="12">
12
</option>
<option value="13">
13
</option>
<option value="14">
14
</option>
<option value="15">
15
</option>
<option value="16">
16
</option>
<option value="17">
17
</option>
<option value="18">
18
</option>
<option value="19">
19
</option>
<option value="20">
20
</option>
<option value="21">
21
</option>
<option value="22">
22
</option>
<option value="23">
23
</option>
<option value="24">
24
</option>
<option value="25">
25
</option>
<option value="26">
26
</option>
<option value="27">
27
</option>
<option value="28">
28
</option>
<option value="29">
29
</option>
<option value="30">
30
</option>
<option value="31">
31
</option>
</select>
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-6" class="emf-li-field emf-field-select data_container" style="text-align:left">
<div class="emf-div-field">
<select id="element_6" name="element_6" class="validate[optional]">
<option value="Month" selected="selected">
Month
</option>
<option value="January">
January
</option>
<option value="February">
February
</option>
<option value="March">
March
</option>
<option value="April">
April
</option>
<option value="May">
May
</option>
<option value="June">
June
</option>
<option value="July">
July
</option>
<option value="August">
August
</option>
<option value="September">
September
</option>
<option value="October">
October
</option>
<option value="November">
November
</option>
<option value="December">
December
</option>
</select>
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-7" class="emf-li-field emf-field-select data_container" style="text-align:left">
<div class="emf-div-field">
<select id="element_7" name="element_7" class="validate[optional]">
<option value="Year" selected="selected">
Year
</option>
<option value="2011">
2011
</option>
<option value="2012">
2012
</option>
<option value="2013">
2013
</option>
<option value="2014">
2014
</option>
<option value="2015">
2015
</option>
<option value="2016">
2016
</option>
<option value="2017">
2017
</option>
<option value="2018">
2018
</option>
<option value="2019">
2019
</option>
<option value="2020">
2020
</option>
</select>
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-8" class="emf-li-field emf-field-textarea data_container" style="text-align:left">
<label class="emf-label-desc" for="element_8">Special requests</label>
<div class="emf-div-field">
<textarea id="element_8" name="element_8" cols="45" rows="10" class="validate[optional]">
</textarea>
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-recaptcha">
<script type="text/javascript">
//<![CDATA[
$(function(){
$('#recaptcha_response_field').addClass('validate[required]');
});
//]]>
</script>
<div>
<script type="text/javascript">
//<![CDATA[
var RecaptchaOptions = {
theme: 'clean',
custom_theme_widget: 'emf-recaptcha_widget'
};
//]]>
</script> <script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=6LchicQSAAAAAGksQmNaDZMw3aQITPqZEsX77lT9">
I edited full source code.
Use any diff programta compare two files to understand.
Basicly your month and year was in diffirent li tag so they was at next line