Hi,

I use an autocomplete function on my website, which works very well, except I can't seem to style it using css. Below I've included the html file, the css file, and the file which retrieves the results to fill the autocomplete window (although, as I say, the function works well apart from the styling).

I would be very grateful for any suggestions about how I can make sure that I'm referencing the autocomplete window correctly in my css file.


admin/check_unlinked_entered_disciplines.php
-------------------------------
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script>
$(document).ready(function() {
$("input#autocomplete").autocomplete(
{
source: "/autocomplete_queries/admin_discipline_name.php",
delay: 10,
minLength: 3
}
);
});
</script>

<title>Unlinked Entered Disciplines</title>
<link href="https://bluetutors.co.uk/admin/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form action="check_unlinked_entered_disciplines.php" method="post">
<input id="autocomplete" type="text" size="30" maxlength="150" name="displayed_discipline1'">
<input type="submit" name="submit" value="Update">
</form>
</body>
</html>


admin/style.css
-------------------------------
.ac_results {
padding: 0px;
border: 1px solid WindowFrame;
background-color: Window;
overflow: hidden;
}

.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}

.ac_results iframe {
display:none;/*sorry for IE5*/
display/**/:block;/*sorry for IE5*/
position:absolute;
top:0;
left:0;
z-index:-1;
filter:mask();
width:3000px;
height:3000px;
}

.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: pointer;
display: block;
width: 100%;
font: menu;
font-size: 12px;
overflow: hidden;
}

.ac_loading {
background : Window url('./indicator.gif') right center no-repeat;
}

.ac_over {
background-color: Highlight;
color: HighlightText;
}


autocomplete_queries/admin_discipline_name.php
-------------------------------
<?php require_once('../includes/primary_includes.php');

$query =
'SELECT `Displayed Disciplines`.`displayed discipline`, `Displayed Disciplines`.`popularity`
FROM `Displayed Disciplines`
WHERE `Displayed Disciplines`.`displayed discipline` LIKE "'.$_GET['term'].'%"
ORDER BY `Displayed Disciplines`.`popularity` DESC
LIMIT 0 , 5';
$result = custom_mysql_query($query);
while($row = $result->fetch_assoc()) {

$return_array[] = $row['displayed discipline'];
}

print json_encode($return_array);

?>