JQueryUI dropdowns under browser dropdown in IE8

cnr sport

New Member
I've got a page I'm working on where we've got some field elements and dropdowns, and it should look something like this:I have it set up in a table right now, code looks like this:<!DOCTYPE html><html> <head> <title>Corporate Directory</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="http://stackoverflow.com/questions/10283667/Scripts/jquery-1.6.4.min.js"></script> <link type="text/css" href="http://stackoverflow.com/questions/10283667/Styles/base.css" rel="stylesheet" /> <script type="text/javascript" src="http://stackoverflow.com/questions/10283667/Scripts/Autocomplete/jquery.autocomplete.js"></script> <script type="text/javascript"> $(document).bind("mobileinit",function(){ path = "path"; $.ajax({url:path+"Mobile_PhoneStart.cfm", dataType:'json', success:(function(data){ //stuff to do autofill populatebusunit(); }), error:(function(){alert("Session Expired. Restart the Brower/App.");})}); }); function populatebusunit(){ // fills the dropdown for business unit for(var i=1;i<sdata.DATA.length;i++){ var listvalue = http://stackoverflow.com/questions/10283667/$.trim(sdata.DATA[2])+" - *" + $.trim(sdata.DATA[0]) +"*"; var markup = markup + '<option value="'+$.trim(sdata.DATA[0])+'">'+listvalue+'</option>'; } $("#busunit").append(markup).trigger("create"); } function loadjscssfile(filename, filetype){ //load a css file dynamically function getInternetExplorerVersion() // Returns the version of Internet Explorer or a -1 // (indicating the use of another browser). { var rv = -1; // Return value assumes failure. if (navigator.appName == 'Microsoft Internet Explorer') { var ua = navigator.userAgent; var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})"); if (re.exec(ua) != null) rv = parseFloat( RegExp.$1 ); } return rv; } function checkVersion() { var msg = "You're not using Internet Explorer."; var ver = getInternetExplorerVersion(); if ( ver > -1 ) { if ( ver >= 8.0 ) msg = "You're using a recent copy of Internet Explorer." else msg = "You should upgrade your copy of Internet Explorer."; } alert( msg ); } </script> <link rel="stylesheet" href="http://stackoverflow.com/questions/10283667/Styles/autocomplete.css" /> <script src="http://stackoverflow.com/questions/10283667/Scripts/jquery.mobile-1.0.js"></script><link rel="stylesheet" href="http://stackoverflow.com/questions/10283667/Styles/jquery.mobile-1.0.min.css" /><link rel="stylesheet" href="http://stackoverflow.com/questions/10283667/Styles/Main.css" /><script type="text/javascript">var IE = getInternetExplorerVersion();loadjscssfile("Styles/customtheme.css", "css");</script> </head> <body><!-- -------- Corporate Directory Lookup --><div data-role="page" id = "Mainpage" data-title = "Corporate Directory"> <div><img src="http://stackoverflow.com/questions/10283667/images/corporatedirectory2.jpg" alt="test"></img><a data-role="button" id="link" data-inline="true" href="http://stackoverflow.com/questions/10283667/Lookup.html" data-icon="search" data-theme="a" rel="external" data-ajax="false" data-mini="true">Basic Search</a></div> <div></div> <br><br><br> <div data-role="content"> <div><form action="SearchResults.html" method="get" rel="external" data-ajax="false"> <input type="Hidden" name="StartRow" value=http://stackoverflow.com/questions/10283667/1> <input type="Hidden" name="SearchFlag" value="http://stackoverflow.com/questions/10283667/no"> <input type="Hidden" name="SearchTable" value="http://stackoverflow.com/questions/10283667/A"> <input type="Hidden" name="MName" value=""> <br> <table border="0"> <col width="auto" /> <col width="100%" /> <tr> <td nowrap><label for="lastname">Last Name:</label></td> <td><input type="search" data-mini="true" autocomplete="off" style="text-transform: uppercase" name="LName" id="lastname" value="" placeholder="Lastname"/></td> </tr> <tr> <td nowrap><label for="firstname">First Name:</label></td> <td><input type="search" data-mini="true" autocomplete="off" style="text-transform: uppercase;font-family:Arial;" name="FName" id="firstname" value="" placeholder="Firstname"/></td> </tr> <tr> <td nowrap><label for="firstname">Comit ID:</label></td> <td><input type="search" data-mini="true" autocomplete="off" style="text-transform: uppercase;font-family:Arial;" name="commitid" id="commitid" value="" placeholder="Comit ID"/></td> </tr> <tr> <td nowrap><label for="aim">AIM:</label></td> <td><input type="search" data-mini="true" autocomplete="off" style="text-transform: uppercase" id="aim" name="AIM" placeholder="AIM Number"/></td> </tr> <tr> <td nowrap><label for="busunit" class="select">Business Unit:</label></td> <td><select name="Dept" data-mini="true" id="busunit" class="resultset"> <option value=""></option> </select></td> </tr> <tr> <td nowrap><label for="phone">Phone Number:</label></td> <td><input type="search" data-mini="true" autocomplete="off" style="text-transform: uppercase" id="phone" name="Phone" placeholder="Phone Number"/></td> </tr> <tr> <td nowrap><label for="resultnumber" class="select">No of Results:</label></td> <td><select name="resultnumber" data-mini="true" id="resultnumber" class="resultset"> <option value="http://stackoverflow.com/questions/10283667/10">10</option> <option value="http://stackoverflow.com/questions/10283667/20">20</option> <option value="http://stackoverflow.com/questions/10283667/25">25</option> <option value="http://stackoverflow.com/questions/10283667/50">50</option> <option value="http://stackoverflow.com/questions/10283667/100">100</option> </select></td> </tr> </table> <button type="submit" data-mini="true" data-theme="a" rel="external" data-ajax="false">Submit</button> </form></div><!-- End of Form --> </div><!-- End of Content --></div><!-- End of Page --></body></html>This is the only page that has the dropdowns as an issue, and I'm almost positive it's because it's in a table. I've tried a few other things but couldn't get everything laid out properly in IE (which, in a corporate environment tends to be mandatory).Alternative solutions (where we've got auto width nowrap on the labels and fields taking up the rest of the space on the left) are perfectly acceptable, as long as they work in at least IE8 (although IE6 would be nice as well)Using @GlennG's comment, I've got the dropdown displaying properly, but the input fields now have a problem!HTML<p class="testing2"> <label class="testing" for="lastname">Last Name:</label> <input type="search" data-mini="true" autocomplete="off" style="text-transform: uppercase" name="LName" id="lastname" value="" placeholder="Lastname"/></p><p class="testing2"> <label class="testing" for="firstname">First Name:</label> <input type="search" data-mini="true" autocomplete="off" style="text-transform: uppercase;font-family:Arial;" name="FName" id="firstname" value="" placeholder="Firstname"/></p><p class="testing2"> <label class="testing" for="firstname">Comit ID:</label> <input type="search" data-mini="true" autocomplete="off" style="text-transform: uppercase;font-family:Arial;" name="commitid" id="commitid" value="" placeholder="Comit ID"/></p><p class="testing2"> <label class="testing" for="aim">AIM:</label> <input type="search" data-mini="true" autocomplete="off" style="text-transform: uppercase" id="aim" name="AIM" placeholder="AIM Number"/></p><p class="testing2"> <label class="testing" for="busunit" class="select">Business Unit:</label> <select name="Dept" data-mini="true" id="busunit" class="resultset"> <option value=""></option> </select></p><p class="testing2"> <label class="testing" for="phone">Phone Number:</label> <input type="search" data-mini="true" autocomplete="off" style="text-transform: uppercase" id="phone" name="Phone" placeholder="Phone Number"/></p><p class="testing2"> <label class="testing" for="resultnumber" class="select">No of Results:</label> <select name="resultnumber" data-mini="true" id="resultnumber" class="resultset"> <option value="http://stackoverflow.com/questions/10283667/10">10</option> <option value="http://stackoverflow.com/questions/10283667/20">20</option> <option value="http://stackoverflow.com/questions/10283667/25">25</option> <option value="http://stackoverflow.com/questions/10283667/50">50</option> <option value="http://stackoverflow.com/questions/10283667/100">100</option> </select></p><button type="submit" data-mini="true" data-theme="a" rel="external" data-ajax="false">Submit</button>CSS#testing{ display:block; width: 200px; float: left; clear: left;}#testing2{ clear: both;}And the actual HTML from the browser ends up like this (taken from firebug)<p class="testing2"> <label class="testing ui-input-text" for="lastname">Last Name:</label> <div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c ui-mini"> <input class="ui-input-text ui-body-c" data-mini="true" autocomplete="off" style="text-transform: uppercase;" name="LName" id="lastname" value="" placeholder="Lastname" data-type="search" type="text"><a data-mini="true" data-theme="c" data-iconpos="notext" data-icon="delete" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true" href="http://stackoverflow.com/questions/10283667/#" class="ui-input-clear ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-mini ui-btn-icon-notext ui-input-clear-hidden" title="clear text"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">clear text</span><span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span></span></a> </div></p><p class="testing2"> <label class="testing ui-input-text" for="firstname">First Name:</label> <div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c ui-mini"> <input class="ui-input-text ui-body-c" data-mini="true" autocomplete="off" style="text-transform: uppercase; font-family: Arial;" name="FName" id="firstname" value="" placeholder="Firstname" data-type="search" type="text"><a data-mini="true" data-theme="c" data-iconpos="notext" data-icon="delete" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true" href="http://stackoverflow.com/questions/10283667/#" class="ui-input-clear ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-mini ui-btn-icon-notext ui-input-clear-hidden" title="clear text"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">clear text</span><span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span></span></a> </div></p><p class="testing2"> <label class="testing ui-input-text" for="firstname">Comit ID:</label> <div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c ui-mini"> <input class="ui-input-text ui-body-c" data-mini="true" autocomplete="off" style="text-transform: uppercase; font-family: Arial;" name="commitid" id="commitid" value="" placeholder="Comit ID" data-type="search" type="text"><a data-mini="true" data-theme="c" data-iconpos="notext" data-icon="delete" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true" href="http://stackoverflow.com/questions/10283667/#" class="ui-input-clear ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-mini ui-btn-icon-notext ui-input-clear-hidden" title="clear text"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">clear text</span><span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span></span></a> </div></p><p class="testing2"> <label class="testing ui-input-text" for="aim">AIM:</label> <div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c ui-mini"> <input class="ui-input-text ui-body-c" data-mini="true" autocomplete="off" style="text-transform: uppercase;" id="aim" name="AIM" placeholder="AIM Number" data-type="search" type="text"><a data-mini="true" data-theme="c" data-iconpos="notext" data-icon="delete" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true" href="http://stackoverflow.com/questions/10283667/#" class="ui-input-clear ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-mini ui-btn-icon-notext ui-input-clear-hidden" title="clear text"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">clear text</span><span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span></span></a> </div></p><p class="testing2"> <label class="testing ui-select" for="busunit">Business Unit:</label> <div class="ui-select"> <div class="ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-mini ui-btn-block ui-btn-icon-right" data-mini="true" data-inline="false" data-theme="c" data-iconpos="right" data-icon="arrow-d" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true"> <span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text"></span><span class="ui-icon ui-icon-arrow-d ui-icon-shadow">&nbsp;</span></span> <select name="Dept" data-mini="true" id="busunit" class="resultset"> <option value=""></option> undefined <option value="http://stackoverflow.com/questions/10283667/BD">ALCENTRA INC - *BD*</option> <option value="http://stackoverflow.com/questions/10283667/HI">APPLICATION DEVELOPMENT - *HI*</option> </select> </div> </div></p><p class="testing2"> <label class="testing ui-input-text" for="phone">Phone Number:</label> <div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c ui-mini"> <input class="ui-input-text ui-body-c" data-mini="true" autocomplete="off" style="text-transform: uppercase;" id="phone" name="Phone" placeholder="Phone Number" data-type="search" type="text"><a data-mini="true" data-theme="c" data-iconpos="notext" data-icon="delete" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true" href="http://stackoverflow.com/questions/10283667/#" class="ui-input-clear ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-mini ui-btn-icon-notext ui-input-clear-hidden" title="clear text"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">clear text</span><span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span></span></a> </div></p><p class="testing2"> <label class="testing ui-select" for="resultnumber">No of Results:</label> <div class="ui-select"> <div class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-block ui-btn-icon-right ui-btn-up-c" data-mini="true" data-inline="false" data-theme="c" data-iconpos="right" data-icon="arrow-d" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true"> <span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">10</span><span class="ui-icon ui-icon-arrow-d ui-icon-shadow">&nbsp;</span></span> <select name="resultnumber" data-mini="true" id="resultnumber" class="resultset"> <option value="http://stackoverflow.com/questions/10283667/10">10</option> <option value="http://stackoverflow.com/questions/10283667/20">20</option> <option value="http://stackoverflow.com/questions/10283667/25">25</option> <option value="http://stackoverflow.com/questions/10283667/50">50</option> <option value="http://stackoverflow.com/questions/10283667/100">100</option> </select> </div> </div></p><div aria-disabled="false" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-block ui-btn-up-a" data-mini="true" data-inline="false" data-theme="a" data-iconpos="" data-icon="" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true"> <span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Submit</span></span><button aria-disabled="false" class="ui-btn-hidden" type="submit" data-mini="true" data-theme="a" rel="external" data-ajax="false">Submit</button></div>The input fields are taking up the whole width and ignoring the float from the labels, then overlapping the labels.
 
Top