phpList.org

CKEditor 4 add space between images

Tags: #<Tag:0x00007f00e02dc598>

Hello,

I upgraded my old server from 2.10.10 to the great 3.6.1, it works very well and I love the new layout, functions and especially the tracking function.

But I have a small “problem”, when I create a message with the new editor (CKEditor) there is some space between the images. With the old editor (I also tested disabling CKEditor and enabling the old one), it doesn’t happen.

I try to remove the space in the html code, but it doesn’t work. Any solution? I need to use split images because I need to create hyperlinks for each product.

Thank you

@AMota can you show the html generated by the two editors, so see what is different?

I tried doing this and both editors wrapped each image with a <p> element that probably causes the gap.

If you edit the html source you can change it to be just one <p> with a <br/> separating the two images.

<p>
<img alt="" src="https://www.dcameron.me.uk/uploadimages/image/dog.jpg" style="width: 208px; height: 171px;" />
<br />
<img alt="" src="https://www.dcameron.me.uk/uploadimages/image/dog.jpg" style="width: 208px; height: 171px;" />
</p>

The editor displays a gap that does not appear in the actual email.
image
image

1 Like

Thank you so much for your reply.

There is the html code with the new editor:

I also detect that depends where we receive the e-mail.

On Outlook 2007 no gap:
next post because I’m new user, only allow post one media

On gmail (with Firefox) have gaps:
next post because I’m new user, only allow post one media

I try remove the cell, gap keeps. But if choose “Title 6” from the format selection the gap reduce a lot but still present.

I know that isn’t a big problem, but with this gap my design for the Newsletter looks amateur.

On Outlook 2007 no gap:

On gmail (with Firefox) have gaps:

I also try your sugestion (remove cells, only use images) but the gap still appers on gmail. :frowning:
In fact on PhpList preview message where is no gaps, so the issue maybe is on the gmail viewer

@AMota This displays without a gap in gmail and yahoo mail, by adding display: block to the img elements and padding: 0px to the table and td elements

<table style="padding: 0px; border-collapse: collapse;">
	<tbody>
		<tr>
			<td style="padding: 0px;"><img alt="" src="https://www.dcameron.me.uk/uploadimages/image/dog.jpg" style="width: 208px; height: 171px; display: block;" /></td>
		</tr>
		<tr>
			<td style="padding: 0px;"><img alt="" src="https://www.dcameron.me.uk/uploadimages/image/dog.jpg" style="width: 208px; height: 171px; display: block;" /></td>
		</tr>
	</tbody>
</table>
1 Like

@duncanc WOW you are my savior!!! Works perfect, thank you so much! You are a HTML God!! :slight_smile:

Now I’m explore all new phplist features, and I found the Template option. With this I can make my header and bottom common to all campaign one time only and works very well.

With your new code to remove the gaps on GMail viewer I do the same on template and fantastic. But I have one line with 3 images, sellers contacts, if I use “display: block” is one image for line, I try “display: inline” and “display: inline-block” with no success to remove the gap to the next image.