current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 4 down vote favorite
1

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!

share|improve this question
1  
Instead of "display:inline-block" can you use "float:left" Or check this link jsfiddle.net/cooolkiran/CZk8L/6 –  Kiran Mar 28 '14 at 2:19
    
Thanks, the li {float:left} is efficient (http://jsfiddle.net/CZk8L/8/). I still do not understand why this space appears with the display:inline-block. And your fiddle does not work neither : I want to keep de overflow:hidden on the first li. Thanks anyway. –  M'sieur Toph' Mar 28 '14 at 2:53

1 Answer 1

up vote 3 down vote accepted

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

share|improve this answer
    
Hi, it did not work (even on your updated fiddle). The space I want to 'fight' is under the first li and not between them. Thanks anyway. –  M'sieur Toph' Mar 28 '14 at 2:42
    
Tkx, but I need to keep overflow:hidden in the first li –  M'sieur Toph' Mar 28 '14 at 3:04
    
@M'sieurToph' yes it work with that too. see here jsfiddle.net/CZk8L/10 .. just add vertical-align: top; –  newTag Mar 28 '14 at 3:07
    
Oooh. Nice move! I tried to re-align the second li to the top, but not the first one ... I think I have a winner! Thanks a lot. Can you post your answer? So I can 'check' it! (EDIT : Just put back the ul padding to 5px on your fiddle to be as close from the original fiddle as possible) –  M'sieur Toph' Mar 28 '14 at 3:20
    
Done! Thx again. –  M'sieur Toph' Mar 28 '14 at 3:30

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.