CODEWITHSUNDEEP
csscross-browser
Xophmeister
Xophmeister

Reputation: 9211

jQuery-Based Dropdown Shows Gap Outside of Firefox

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:

enter image description here

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?

Upvotes: 0

Views: 60

Answers (1)

MuteWitness9
MuteWitness9

Reputation: 58

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;
}

Upvotes: 3

Related Questions