CSS: margin below image

Gallex · 2019-01-02 09:17:09

hi!

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

Gallex · 2019-01-02 11:59:09

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

Gallex · 2019-01-02 14:06:09

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

Pat64 · 2019-01-02 14:44:22

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

.sec-content > div {overflow:hidden}

Gallex · 2019-01-03 08:09:41

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?

Pat64 · 2019-01-03 08:50:26

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)

Gallex · 2019-01-03 09:59:33

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)

Pat64 · 2019-01-03 10:24:29

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)?

Gallex · 2019-01-03 10:55:20

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

Pat64 · 2019-01-03 10:57:16

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)

Gallex · 2019-01-03 12:17:03

i don’t want to change alignment.

and, if .sec-left and .sec-right has set overflow:hidden , it won’t display background-color in any side of .sec-left > div and .sec-right > div anyway

Pat64 · 2019-01-03 12:52:09

Who said you to add overflow: hidden on the .sec-left and sec-right blocs?

Sorry but I can understand what you want…

Textpattern CMS

Textpattern CMS support forum

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

CSS: margin below image

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

Re: CSS: margin below image

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

Re: CSS: margin below image

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

Re: CSS: margin below image

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

Re: CSS: margin below image

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

Re: CSS: margin below image

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

Re: CSS: margin below image

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

Re: CSS: margin below image

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

Re: CSS: margin below image

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

Re: CSS: margin below image

#11 2019-01-03 12:17:03

Re: CSS: margin below image

#12 2019-01-03 12:52:09

Re: CSS: margin below image

Board footer