Extra space when using overflow:hidden in inline-block list

Question

Refering to this : http://jsfiddle.net/CZk8L/4/

Can anybody explain to me why the overflow:hidden style generates this extra space at the bottom of the first li ?

This is driving me crazy for hours.

The fact is I need the position:relative; overflow:hidden on my first li because of the form that I want to hide and move inside it (to follow the cursor).

I tried to set some heightor max-height on each element, but it did not work. I also tried some line-height

A solution to re-align both li could be to add the same position:relative; overflow:hidden on the second li, but it still be the extra space under them and I would like to understand the root cause.

Thanks for your help!

Answer 1

Change ul padding:5px to padding:0px to avoid space under li.

 ul {display: inline-block; background:#DDD; padding:0px;white-space: nowrap; margin:50px 200px;}

You can align the li using vertical-align: top;

   .with_overflow li:first-child {position: relative; overflow: hidden;vertical-align: top; }
    .with_overflow form {position: absolute; opacity: 0;}
    .with_overflow iframe {display:none}

See updated fiddle