Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Issues with CSS overflow and display

Issues with CSS overflow and display

Problem

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

Problem courtesy of: DaGhostman Dimitrov

Solution

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:

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;
}
Solution courtesy of: Daniel Imms

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Issues with CSS overflow and display

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×