SharePoint 2010: Custom List form and Lookup Field rendering displacement

If you have below scenario:

1. Custom List Form

2. Lookup Field 

3. Lookup list more  having more than 19 items

4. You are using some custom CSS that has position:relative

Then in IE, the lookup field starts rendering like this:

See the displacement of the lookup list values from the drop down. This happens because if the number of items crosses beyond 19, it starts rendering it as Input HTML control and if items are below 19, it renders them as Select. It assumes that if there are more then 19 items, users will type the starting characters to get smaller number of items to select from. And if you custom CSS has position:relative for DIV (if you are using JQueryUI, you may have it), you get this. 

So the solution is to override the custom CSS setting. simpleste solution would be to put this in style section

Note: Style section should go in the PlaceHolderAdditionalPageHead placeholder.

<style>

#_Select

{

position:static!important;

}

</style>

And then you get it right.