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://
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
        <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;


        <script type="text/javascript" src="prototype.js"></script>
        <script type="text/javascript" src="scriptaculous/scriptaculous.js"></


        <div id="centreWrapper">
                <div id="itemSelectionWrapper">
                                        <legend>Item Selection</legend>

                                        <div id="itemSelectorRow">
                                                <input type="text" 
name="locations" id="locations" value=""
size="80" />
                                                <div id="locationSuggestions" 

        <script type="text/javascript">
                new Autocompleter.Local('locations', 'locationSuggestions', 
1', 'Item 2', 'Item 3'], { tokens:',', paramName:'tags' });


The only other mention of this issue that I could find is in this

Any ideas on a fix or workaround that doesn't involve compatibility
mode or not centring the page?


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 
For more options, visit this group at 

Reply via email to