CSS menu positioning issues

[wldrumstcs]

I have a php/MySQL/AJAX populated suggestion box that updates as users type into it. It is a simple menu, but I have 2 issues. First, when it is empty (ie there is nothing to suggest to the user), the menu appears as a little black speck. I know this is because I have borders around the menu, and I was trying to figure out a way to not display those borders when the menu is empty.

Second, I want the auto-suggest to be anchored to the bottom-left of the textbox above it. The textbox is centered in a column, and I haven't figured out a way to line up my menu with the textbox. I have tried playing around with the "position" attribute, but none of the settings (inherit, relative, etc.) seemed to work.

Here is some code:

(css)


.suggest_link {
background-color: #FFFFFF;
padding: 2px 6px 2px 6px;
}
.suggest_link_over {
background-color: #6699FF;
color: #FFFFFF;
padding: 2px 6px 2px 6px;
}
#search_suggest {
position: absolute;
background-color: #FFFFFF;
text-align: left;
border-top: 0px;
border-left: 1px solid #868687;
border-right: 1px solid #868687;
border-bottom: 1px solid #868687;
}


And the HTML:


<td width="20%"><div align="center">
<input name="addname" type="text" id="addname" class="tb-background" value="<?php echo $input1; ?>" onkeyup="searchSuggest();" autocomplete="off"/></div>
<div id="search_suggest"></div>
</td>

[abduraooft]

Could you post a link to your page?

[wldrumstcs]

I made a fake account for you so you can test it. Keep in mind this thing is faaaaaar from done, and some of the content is pure filler. I made one entry for you under "restaurant" called "portillos" (best damn hotdogs around). The auto-suggest feature is under the restaurant textbox that appears after you click "+Add an Entry." Here is the login info:
Email: test
Password: test

http://wldrumstcs.ipower.com/login.php