codecomputerlove/PhotoSwipe — Issue #225: rendered 'height: 0px' when given no height to container and my thoughts on opacity nav
Author: myradon
Created: 2011-12-23 11:50:42+00:00
State: open

Hey you all,

Height-problem;

I'm running into a problem which I don't know how to fix. We want to use PhotoSwipe for a responsive project: http://twitter.testing.oec.nl/?site_id=1150&theme=ccdb_twitter&kentekens=81XJVS:09VXS6:61NTHZ:05NXHT:4VNS15:38LSZH:33TFRX:96GJRK:97ZRLH:30PGTR.

If I don't asign a height to the container div#psSlider all rendered child-nodes will have height: 0px. I can set heights for various MQs according to dimensions of partent BUT when going to handheld-size everything should resize. Without a set height no image visible. What do I do wrong or what I'm I overlooking?

Opacity;

By the way. The Opacity property is in my opinion not okay. I had to hack out Opacity to use background-opacity filter for IE. Why would you have parent and all child-nodes opaque? I don't think this is a good solution for semi-transparent navigation. I'm using Modernizr to test for RGBA and set it and use IE-only filter-properties to set opaque background by doing stuff like this;

.ie7 div.ps-toolbar,
.ie8 div.ps-toolbar {
background:transparent;
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#7f000000', endColorStr='#7f000000');
zoom: 1;
}
Advatage is that buttons will clearly visible.

http://twitter.customerconnect.nl/themes/TwitterDefault/?site_id=1150&theme=ccdb_twitter&kentekens=81XJVS:09VXS6:61NTHZ:05NXHT:4VNS15:38LSZH:33TFRX:96GJRK:97ZRLH:30PGTR