autocomplete box moved out of position

[Monsignor]

Here’s the problem: I have a search form which shows an autocomplete dropdown once you start typing. The top-left corner of the autocomplete dropdown is supposed to be aligned with the bottom-left corner of the text input field and it stays there no matter how I resize the page. It was working fine, until I put the body of the page inside a div. Now the dropdown opens about 30 px to the right and 15 px down and when I resize the page it moves further to the right or to the left for some reason, so manually adjusting its position by 30px and 15 px would only work for a certain screen size. Can someone help me out here? Here’s the html:

The fields ‘pocetakfield’ and ‘krajfield’ are the ones with the autocomplete. I have some php on this page as well but it’s irrelevant for this discussion.

Here’s the relevant CSS:

html,body {

margin: 5px;

padding: 5px;

border: 0px;

left: 0px;

top: 0px;

font-family:"century gothic","comic sans ms";

background: #ECE5B6;

}

.autocomplete {

font-family: Tahoma;

font-size: 8pt;

background-color: white;

border: 1px solid black;

position: absolute;

cursor: default;

overflow: auto;

overflow-x: hidden;

}



.autocomplete_item {

padding: 1px;

padding-left: 5px;

color: black;

width: 100%;

text-align:left;

}



.autocomplete_item_highlighted {

padding: 1px;

padding-left: 5px;

color: white;

background-color: #0A246A;

text-align:left;

}

#pretraga {

width:400px;

height:175px;

background:#565656;

padding:10px;

font-size:16px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

border-radius: 10px;

}



#pretraga #pocetakfield {

margin-top:20px;

width:94%;

font-size:20px;

line-height:20px;

padding:5px;

color:#979c9c;

border:1px solid #ddd;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

border-radius: 10px;

}



#pretraga #krajfield {

margin-top:20px;

width:55%;

font-size:20px;

line-height:20px;

padding:5px;

color:#979c9c;

border:1px solid #ddd;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

border-radius: 10px;

}

#pretraga #table td {

text-align: left;

}

#page{

width:1060px;

margin:0 auto;

position:relative;

}

Sorry this is so long, but I really need some help with this. If I change the #page position to absolute, the autocomplete box stays in its place but when I increase the page size, the entire body floats to the left instead of staying in the middle. Can anyone figure out what I need to do?

[Author]

Posts