I'm having difficulty in getting the drop-down portion of the Autocompleter control to display in the correct place in IE8.
It doesn't seem to matter whether I use the Ajax or Local autocompleter controls, so have posted the test harness here with a Local one. This works fine under IE7 and Fx 3, but in IE8, the results are way off to the right. If I turn IE8 into compatibility mode, all is good, but IMHO, this is not something that I should have to do. The amount they are off to the right depends on how wide your browser window is, so it's something to do with the centring process. Also, if we don't centre the site, and give the body a left-padding, the result is also off in IE8 only. I've tried this with the latest version of script.aculo.us (v1.8.2), and 3 different versions of Prototype (v1.6.0.3, v1.6.1 RC2 and v1.6.1 RC3), and it's off using all of them. Here's a test harness. It assumes you have Prototype in the same folder as this code, called 'prototype.js', and that you have script.aculo.us in a sub-folder called 'scriptaculous'. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> <head> <title>Autocompleter test in IE8</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style type="text/css"> html, body { padding: 0px; margin: 0px; } body { text-align: center; } #centreWrapper { width: 800px; margin: 0px auto; text-align: left; background-color: #CCCCCC; } #itemSelectionWrapper { position: relative; padding: 20px; } #itemSelectorRow { margin: 10px; } div.autocomplete { position: absolute; width: 250px; background-color: #FFFFFF; border: 1px solid #888888; margin: 0px; padding: 0px; } div.autocomplete ul, div.autocomplete li { list-style-type: none; margin: 0px; padding: 0px; } </style> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="scriptaculous/scriptaculous.js"></ script> </head> <body> <div id="centreWrapper"> <div id="itemSelectionWrapper"> <form> <fieldset> <legend>Item Selection</legend> <div id="itemSelectorRow"> <label>Item</label> <input type="text" name="locations" id="locations" value="" size="80" /> <div id="locationSuggestions" class="autocomplete" style="display:none;"></div> </div> </fieldset> </form> </div> </div> <script type="text/javascript"> new Autocompleter.Local('locations', 'locationSuggestions', ['Item 1', 'Item 2', 'Item 3'], { tokens:',', paramName:'tags' }); </script> </body> </html> The only other mention of this issue that I could find is in this thread: http://groups.google.com/group/prototype-scriptaculous/browse_thread/thread/687572ce1bd13d0a Any ideas on a fix or workaround that doesn't involve compatibility mode or not centring the page? Thanks, Dan --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
