Differences between display in cornerstone preview to live

[Pixel8r]

Hi,

I have been slowly converting my site over to using the new V2 elements. I have noticed this problem and am not sure what is causing it.

When designing this element in cornerstone it displays as so (This is in Safari BTW) - https://www.evernote.com/l/AHakEYcL0FBACrzdCpvdKOz2etJ4slJulBIB/image.png

But when I then publish the page and go to view it in different browsers it shows like this;

Chrome - https://www.evernote.com/l/AHawSDI-jqNP8ZDrYRiHXyLzbMwY4kzqI4sB/image.png

Safari - https://www.evernote.com/l/AHbNC1nHvVFCmLVkfQ1aolDJIfSx808xk4wB/image.png

Strangely in Safari it sort of does a double render of the page, first showing it correctly then jumping to how the Chrome render shows.

I will put my login details in secure note if you want to have a look at what is going on.

Mark

[basanta]

Hi There,

I can see there is some margin coming in the heading element in safari browser only. Please add following css in your custom css.

.x-text-headline p {
  margin-bottom: 0px;
}

it will remove the gap in safari.

Thanks

[Pixel8r]

Thanks that sorted the error on that page. I have noticed one more page which acting a bit strange. Will Put links in secure note.

[friech]

Hi There,

I see that there is a nested <p> tag on that markup when working with a shortcode or HTML markup, please utilize the Text editor or the RAW Content element, as editing with the Visual Text can cause this type of issue (generated p tags.)

You can resolve this issue by updating the custom CSS Basanta provided above.

.x-text-headline p,
.x-text p {
  margin-bottom: 0px;
}

Cheers!

[Pixel8r]

Thank you that has resolved the issue. I did use the text editor to enter the html. Below is the content of it, so I am unsure why the extra < p > appeared.

[christian]

You’re welcome.