Question

I have a css problem with jquery / jquery ui / auto complete

<script type="text/javascript">
  $(function() {
  $("#search").autocomplete({
    source: "autocomplete.php",
    minLength: 2,
    select: function(event, ui) {
      window.location.href = "http://site.com/" + ui.item.id + ".html";
      $("#search").val(ui.item.label);
    }
    })

    .data("autocomplete")._renderItem = function (ul, item) {
       return $('<li class="ui-menu-item-with-icon"></li>')
        .data("item.autocomplete", item)
        .append('<a style="height: 50px;" class="ui-corner-all"><img src="thumb.php?img=' + item.img + '" class="ajaxsearchimage">' + item.label + '</a>')
        .appendTo(ul);
    };
    });
    </script>
    <style>
    span.searchicon
    {
      display: inline-block;
      height: 50px;
      width: 50px;
    }

    .ajaxsearchtext
    {
      padding-left: 60px;
      display: inline-block;
    }
    </style>

I would like to align the text on the top
I tryed to put vertical-align:top in the class but it doesn’ work.

http://imageshack.us/photo/my-images/4/sansrer.png/

Does someone has a solution ?

Regards

Answer 1

you need to apply the property to the image

img {vertical-align:text-top;}

an example
http://www.w3schools.com/css/tryit.asp?filename=trycss_vertical-align

UPDATE

upon comments I suggest floating the image to the left would be the solution.

img.SelectedClass { float: left; }