Select randomly working on jqTransform

[GoDawgs]

I'm having a weird issue with jqTransform. Sometimes the dropdown boxes for my select inputs will drop down and sometimes they won't. When this issue happens, the width of the selects is as if no info was put there (You just see the arrow to click to pull the menu down). (I changed this by changing the style attribute for the select to set the widths. After changing this, it shows that at least the top <option> is there.) Any ideas? Any help is much appreciated. I've attached my javascript, the PHP used to display the form, and some CSS:

Here are some pictures to show what it looks like at different times (the pictures are without the defined width of the select inputs):

http://i53.photobucket.com/albums/g74/MackswellH/form_problem1.png

http://i53.photobucket.com/albums/g74/MackswellH/form_problem0.png

my CSS (#points_block is the div that the form is encased in):


#points_block{
position: relative;
display: none;
color: #5CB1E6;
background-color: white;
border: 1px lightgray solid;
width: 400px;
top: 25px;
left: 0px;
padding: 10px 10px 10px 10px;
}

.rowElem{
clear: both;
min-height: 35px;
position: relative;
height: auto;
}


my PHP that displays the form:


$add_points_block = "
<form method = \"POST\" action = \"random.php\" id=\"add_points\" name=\"add\">
<div class=\"packages\">
<div class=\"radioElem\">
<input type=\"radio\" id=\"package\" name=\"package\" value=\"standard\">
<ul>
<li>
<li>
<li>
</ul>
</div>
<div class=\"radioElem\">
<input type=\"radio\" id=\"package\" name=\"package\" value=\"pro\">
<ul>
<li>
<li>
<li>
</ul>
</div>
<div class=\"radioElem\">
<input type=\"radio\" id=\"package\" name=\"package\" value=\"platinum\">
<ul>
<li>
<li>
<li>
</ul>
</div>
</div>
<div class=\"rowElem\">
<label for=\"cc\" style=\"width: 120px\">Type:</label>
<select name=\"cc\" size=\"1\" style=\"width: 11em; height: 10em;\">
<option value=\"\">Select Type</option>
<option value=\"visa\">VISA</option>
<option value=\"mastercard\">Mastercard</option>
<option value=\"discover\">Discover</option>
<option value=\"americanexpress\">American Express</option>
</select>
</div>

<div class=\"rowElem\">
<label for=\"fullname\" style=\"width: 120px\">Full Name as Shown on Card:</label>
<input type=\"text\" name=\"fullname\" size=\"25\" maxlength=\"100\">
</div>
<div class=\"rowElem\">
<label for=\"cc_num\" style=\"width: 120px\">Credit Card #:</label>
<input type=\"text\" name=\"cc_num\" size=\"16\" maxlength=\"16\">
</div>
<div class=\"exp\">
<div class=\"rowElem\">
Expiration:

<label for=\"month\" style=\"width: 120px\">Month: </label>
<select name=\"month\" size=\"1\" style=\"width: 6em; height: 13em;\">
<option value=\"\">MO</option>
<option value=\"1\">JAN (1)</option>
<option value=\"2\">FEB (2)</option>
<option value=\"3\">MAR (3)</option>
<option value=\"4\">APR (4)</option>
<option value=\"5\">MAY (5)</option>
<option value=\"6\">JUN (6)</option>
<option value=\"7\">JUL (7)</option>
<option value=\"8\">AUG (8)</option>
<option value=\"9\">SEP (9)</option>
<option value=\"10\">OCT (10)</option>
<option value=\"11\">NOV (11)</option>
<option value=\"12\">DEC (12)</option>
</select>

<label for=\"year\" style=\"width: 120px\">Year:</label>
<select name=\"year\" size=\"1\" style=\"width: 4em; height: 11em;\">
<option value=\"\">YR</option>
<option value=\"20\">2020</option>
<option value=\"19\">2019</option>
<option value=\"18\">2018</option>
<option value=\"17\">2017</option>
<option value=\"16\">2016</option>
<option value=\"15\">2015</option>
<option value=\"14\">2014</option>
<option value=\"13\">2013</option>
<option value=\"12\">2012</option>
<option value=\"11\">2011</option>
</select>
</div>
</div>
<div class=\"rowElem\">
<label for=\"sec_code\" style=\"width: 120px\">Security Code:</label>
<input type=\"text\" name=\"sec_code\" size=\"3\" maxlength=\"3\">
<input type=\"hidden\" name=\"process\" value=\"yes\">
</div>
<div class=\"rowElem\"
<input type=\"submit\" name=\"submit\" value=\"purchase points!\">
</div>
</form>
";


my javascript (basically the only important code here is the .jqTransform() on #add_points. The other stuff is for other forms on the page.)


<script type="text/javascript">
<!--
$(function() {
//find all form with class jqtransform and apply the plugin
$("#second_login_form").jqTransform();
$("#sign_up").jqTransform();
$("#add_points").jqTransform();

$("#sign_up").validate({
rules: {
username: {
required: true,
minlength: 5
},
email: {
required: true,
email: true
},
pass1: {
minlength: 5,
required: true
},
pass2: {
equalTo: "#req-password"
}
},
messages: {
username: {
required: "Please include a username<br>",
minlength: "Please enter a username with more than 5 characters<br>"
},
email: {
required: "Please enter an email address<br>",
email: "The email address you entered was not valid, please try again<br>"
},
pass1: {
minlength: "Please enter a password that is longer than 5 characters<br>",
required: "Please enter a password<br>"
},
pass2: {
equalTo: "Both your passwords did not match. Please try again<br>"
}
},
errorLabelContainer: "#messageBox",
submitHandler: function(form) {
$(form).ajaxSubmit({
success: function(){
$("#signup_content").fadeOut('slow', function(){
$("#points_block").fadeIn('slow',function(){
// Animation complete
});
});
}
});
}
});
});

//-->
</script>