Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2019-01-02 09:17:09

Gallex
Member
Registered: 2006-10-08
Posts: 1,096

CSS: margin below image

hi!

can anybody tell me, why IE 11 displays that extra margin below the images here?

Offline

#2 2019-01-02 11:59:09

Gallex
Member
Registered: 2006-10-08
Posts: 1,096

Re: CSS: margin below image

if you look at the last block with image in page, you see that margin doesn’t appear right after the image, but before the end of a .sec-left > div element. but somehow it affects it, because without image, there is no margin as well

added

.sec-left > div:after {
display: table;
content: ‘ ‘;
clear:both;
}

but didn’t help

Offline

#3 2019-01-02 14:06:09

Gallex
Member
Registered: 2006-10-08
Posts: 1,096

Re: CSS: margin below image

noticed that if width of original size of a image is less than width of .sec-left > div it doesn’t add extra margin. did this, but also didn’t help:

img {
max-width: calc(100% – 1px);
height:auto;
}

created testpage. take a look with IE 11

Offline

#4 2019-01-02 14:44:22

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,227
Website

Re: CSS: margin below image

Checking your test page, that seems to correct your issue:

.sec-content > div {overflow:hidden}


Patrick.
G+
Github | CodePen

Offline

#5 2019-01-03 08:09:41

Gallex
Member
Registered: 2006-10-08
Posts: 1,096

Re: CSS: margin below image

Checking your test page, that seems to correct your issue:

.sec-content > div {overflow:hidden}

unfortunately it doesn’t. :(
and it cuts off this:

.sec-left > div::before,.sec-right > div::before {
background: rgba(0,0,0,0.4);
content:” “;
top:0;
bottom:0;
width:3000px;
position: absolute;
z-index: -100;
}

are you saying that you see correctly with IE 11?

Offline

#6 2019-01-03 08:50:26

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,227
Website

Re: CSS: margin below image

Sure. It isn’t what you want to get?

(IE11 latest screenshot): https://ibb.co/p2gpP9Z

.sec-content > div {
overflow: hidden;
	padding-bottom: 50px;
	display: -ms-flexbox;
	dislay: flex;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

(tested successfully within Edge, Firefox and Chrome PC)

Your images seems to be extremely huge, especially the background and the first one. Did you envisage to compress them with http://tinypng.com/?

Also, try this:

.sec-left > div::before,.sec-right > div::before {
	background: rgba(0,0,0,0.4);
	content:' ';
	top:0;
	bottom:0;
/*
	width:3000px;
*/
width: 100%;
	position: absolute;
	z-index: -100;
}

Last edited by Pat64 (2019-01-03 09:02:40)


Patrick.
G+
Github | CodePen

Offline

#7 2019-01-03 09:59:33

Gallex
Member
Registered: 2006-10-08
Posts: 1,096

Re: CSS: margin below image

Sure. It isn’t what you want to get?
(IE11 latest screenshot): https://ibb.co/p2gpP9Z
.sec-content > div {
overflow: hidden;

you are right, Pat64, it removes the extra margin in IE 11! i just added overflow:hidden to wrong place – very sorry!

now, the extra margin problem solved, but it creates the second one – the half-transparent black backgrounds needs to over exceed its parent boundaries, but overflow:hidden “cuts it off”.

take a look here - the background of first block needs to be like the second one has.

your solution:

.sec-left > div::before,.sec-right > div::before {
...
/*
	width:3000px;
*/
width: 100%;
...

doesn’t help here

Last edited by Gallex (2019-01-03 10:02:16)

Offline

#8 2019-01-03 10:24:29

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,227
Website

Re: CSS: margin below image

Sorry but I can’t notice any problems with the background.

Could you be more precise (name of the blocs and what is the problem)?


Patrick.
G+
Github | CodePen

Offline

#9 2019-01-03 10:55:20

Gallex
Member
Registered: 2006-10-08
Posts: 1,096

Re: CSS: margin below image

Sorry but I can’t notice any problems with the background.

compare the owl’s block (lower) background in your picture:
(IE11 latest screenshot): https://ibb.co/p2gpP9Z

and here

can you see the difference in left side? that’s what the overflow:hidden is doing – doesn’t let half-transparent background to cover left side of .sec-left > div

Offline

#10 2019-01-03 10:57:16

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,227
Website

Re: CSS: margin below image

To be positioned on the left edge of its parent container (sec-right) and this is the maximum:

.sec-right > div::before {
/*
left: 0;
*/
right: 0;
}

…Or, if you want same alignment:

.sec-left > div::before {
left: 0;
}
.sec-right > div::before {
right: 0;
}

Last edited by Pat64 (2019-01-03 11:02:03)


Patrick.
G+
Github | CodePen

Offline

Board footer

Powered by FluxBB