Question

I have created a very simple autocomplete dropdown widget in jQuery, which you can apply to input elements. It works great, but for some reason, the dropdown list shows a gap between the input and the list in browsers other than Firefox (tested in IE, Safari and Chrome).

I’ve mocked this up in jsFiddle, to demonstrate the problem, only to find that it worked fine in all browsers… That was until I unticked the “Normalized CSS” option. Then the gap reappeared in IE, etc., but it still works fine in Firefox. Here’s a screenshot:

This is clearly thus a CSS problem. However, I can’t for the life of me work out where the problem lies. I’ve had a look at jsFiddle’s normalize.css and tried a few things from there (mostly setting the padding and margins of various selectors to 0px), but I can’t get it to work! Any ideas on how I can change my CSS so that the gap disappears in all browsers?

Answer 1

I was able to get rid of the gap simply by setting the top margin on your div.popup ul to 0px.

div.popup ul {
list-style: none;
background: red;
padding: 0px;
margin-top: 0px;
}