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

Can you try to make a jsfiddle? It's hard to follow

ntgCleaner
– ntgCleaner

2013-04-09 22:04:48 +00:00
Commented Apr 9, 2013 at 22:04 — ntgCleaner
– ntgCleaner, Commented Apr 9, 2013 at 22:04
Please include a jsFiddle showing the problem

Adrift
– Adrift

2013-04-09 22:05:00 +00:00
Commented Apr 9, 2013 at 22:05 — Adrift
– Adrift, Commented Apr 9, 2013 at 22:05
fiddling in a second guys.

DaGhostman Dimitrov
– DaGhostman Dimitrov

2013-04-10 08:19:58 +00:00
Commented Apr 10, 2013 at 8:19 — DaGhostman Dimitrov
– DaGhostman Dimitrov, Commented Apr 10, 2013 at 8:19

Daniel Imms · Accepted Answer · 2013-04-10 08:59:25Z

2

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

enter image description here

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

edited Apr 10, 2013 at 8:59

answered Apr 10, 2013 at 8:43

Daniel Imms

50.6k19 gold badges157 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DaGhostman Dimitrov Over a year ago

OK +1 for that but could you give me answer to the question above, about the overflow?

CherryFlavourPez Over a year ago

Rather than setting line-height to 0 (which may cause issues if the markup includes any text in the future), I'd recommend setting the vertical-align property to anything other than the default baseline (e.g. span { vertical-align: top }) will remove the gaps. Those gaps are there for descenders on letters like 'g' and 'p', hence why setting line-height will fix the issue.

Collectives™ on Stack Overflow

Issues with CSS overflow and display

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related