--- a/client/autocomplete.xml
+++ b/client/autocomplete.xml
@@ -32,29 +32,33 @@
         },
         haveSomeResults: function(aText, aNodes) {
           this.clearResultsList();
           $(this._resultDiv).append(aNodes);
           this.showResultsList();
         },
         /* ===== Results List Stuff ===== */
         _resultDiv: null,
+        resultsVisible: false,
         showResultsList: function() {
           var entryOffset = $(this._entry).offset();
           $(this._resultDiv).css({
             left: entryOffset.let,
             top: entryOffset.top + this._entry.offsetHeight,
             width: $(this._entry).width()
           }).show();
+          this.resultsVisible = true;
         },
         hideResultsList: function() {
           $(this._resultDiv).hide();
+          this.resultsVisible = false;
         },
         clearResultsList: function() {
           $(this._resultDiv).empty();
+          this.selectedIndex = null;
         },
         selectedIndex: null,
         setSelectedIndex: function(aDesiredIndex) {
           var children = this._resultDiv.childNodes;
           if (children.length == 0)
             aDesiredIndex = null;
           else if (aDesiredIndex === undefined)
             aDesiredIndex = 0;
@@ -112,22 +116,29 @@
         }
         else if (event.keyIdentifier == "Up") {
           if (this.selectedIndex == 0)
             this.setSelectedIndex(null);
           else
             this.setSelectedIndex(this.selectedIndex - 1);
         }
         else if (event.keyIdentifier == "Down") {
+          // if the results aren't currently visible, show them and go to the
+          //  first index
+          if (!this.resultsVisible) {
+            this.showResultsList();
+            this.setSelectedIndex(0);
+            return;
+          }
           if (this.selectedIndex == null)
             this.setSelectedIndex(0);
           else
             this.setSelectedIndex(this.selectedIndex + 1);
         }
-        else if (event.keyIdentifier == "\u001b") {
+        else if (event.keyIdentifier == "U+001B") { // escape
           this.hideResultsList();
         }
       ]]></xbl:handler>
       <xbl:handler event="blur"><![CDATA[
       ]]></xbl:handler>
 
     </xbl:handlers>
   </xbl:binding>

--- a/client/bubbles.css
+++ b/client/bubbles.css
@@ -1,15 +1,24 @@
 .bubble {
+  display: inline-block;
   -moz-border-radius: 4px;
   margin: 0px 2px 0px 0px;
   padding: 0.1em 0.5em;
   color: black !important;
 }
 
+.bubble img {
+  vertical-align: middle;
+}
+
+.bubble span {
+  vertical-align: middle;
+}
+
 .bubble[type="contact"] {
   background-color: #FFAA78;
   border: 1px solid #FF7D31;
 }
 
 .bubble[type="contact-collection"] {
   background-color: #FFC357;
   border: 1px solid #FFAB0F;

--- a/client/bubbles.xml
+++ b/client/bubbles.xml
@@ -7,17 +7,17 @@
     <xbl:template>
       <div id="holder">
       </div>
     </xbl:template>
     <xbl:implementation><![CDATA[
       ({
         _nConstraints: null,
         addContact: function(aContact) {
-          var node = $("<div/>").addClass("bubble")[0];
+          var node = $("<div/>").addClass("bubble").attr("type", "contact")[0];
           ElementXBL.prototype.addBinding.call(node, "bubbles.xml#constraint-contact");
           node.setContact(aContact);
           $(this._nConstraints).append(node);
           console.log("Contact", aContact, "added");
         },
         xblBindingAttached: function () {
           this._nConstraints = this.shadowTree.getElementById("holder");
         },
@@ -26,17 +26,17 @@
     <xbl:handlers>
       <xbl:handler event="click"><![CDATA[
       ]]></xbl:handler>
     </xbl:handlers>
   </xbl:binding>
 
   <xbl:binding id="constraint-contact">
     <xbl:template>
-      <img id="picture" class="con_contactpic"/>
+      <img id="picture" height="18" width="18" class="con_contactpic"/>
       <span id="name"></span>
     </xbl:template>
     <xbl:resources>
       <xbl:style><![CDATA[
         .con_contactpic {
           width: 18;
           height: 18;
         }