Issues with CSS overflow and display

Question

I have a problem with 3 divs.

I have one that is container("position : absolute; z-index: -1"), and the other two are sub containers("position : absolute; z-index: *n*") overplayed for the purpose of animation. Anyway the two sub containers have a "grid" of spans("position: relative; display: inline-block"). with fixed size 25x25 px and the spans have background image form sprite. he problem is that the overflow of the container does not seem to affect (i.e the spans that are supposed to be hidden are still showing, under it seems that it does not obey the "height" property of the element) the sub containers. Any ideas for a solution?

I do not have any other stylesheet , or in document styles, everything is generated on the go with JS & jQuery. will provide a screenshot after 8-10 hrs =D

The browser tested on is Latest FF(20.0) in Ubuntu

EDIT Here is a fiddle jsFiddle

Answer 1

Normally issues with display:inline or inline-block elements come up as a result of the size of the text that would normally occupy them. The remedy to this is to play around with line-height. Since you won't have any text at all you can safety set it to 0.

jsFiddle

#layer1 {
    line-height:0;
}

I Tested it in Chrome 26 and Firefox 20.

Here is an alternate solution using vertical-align:top from CherryFlavourPez

jsFiddle

#layer1 span {
    vertical-align:top;
}

---

About the overflow. You're using overflow:hidden on #map where the structure is as so:

<div id="map">
    <div id="layer1">
    <div id="layer2">
</div>

This is all fine except for the fact that #layer1 and #layer2 are positioned absolutely which takes them out of the flow of the page. You can cut the bottom by applying overflow:hidden to the layers if you want, but not on #map.

jsFiddle

#layer1,
#layer2 {
    overflow:hidden;
}