Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
#1 2018-03-25 13:00:49
- Gallex
- Member
- Registered: 2006-10-08
- Posts: 1,304
CSS: padding-bottom:30%;
any ideas why padding-bottom:30%; not working with IE12, Edge and latest Firefox? Chrome does. The site (the section before the footer)
.col-content > div{
margin-bottom: 15px;
padding-bottom:30%;
position:relative;
z-index: 5;
}Offline
Re: CSS: padding-bottom:30%;
You should have mentioned that this is in a flex box context (and note where to look: the images at the bottom of the page).
Firefox and Edge (16 and older) resolve percentage padding in the block-direction against the height of the element. In this case, height is auto, and the padding computes to zero. Chrome and Safari resolve it agains the inline direction (width), which can always be computed.
From Edge 17 (due next month), the browser will behave like Chrome + Safari do: resolve against the inline direction (against the width). The CSS working group (spec authors) has changed the spec text in this regard.
Compare the older CR text: W3C Candidate Recommendation, 19 October 2017 with the latest draft text.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
#3 2018-03-26 09:49:18
- Gallex
- Member
- Registered: 2006-10-08
- Posts: 1,304
Re: CSS: padding-bottom:30%;
yep, the “devil” was flex-box. now it is working in every browser.
thanks phiw13, for thorough explanation!
Offline
Pages: 1