Link Property Bug

[ehsdappdev]

If there is a element with the link property enabled and the content includes a link, the styling for the element gets reset to defaults and any changes made in the Cornerstone UI are not rendered. In the Cornerstone editor, the content of the element is visually rendered below its actual position on the page and the correct position is occupied by a Cornerstone element placeholder (cube outline with white/grey diagonal stripes background). Disabling the link property or removing the linked content in the element fixes the issue.

This has been a bug for years but I’m seeing this more often as we have non-technical staff making updates and using the Rich Text editor that exposes this bug.

I’m guessing the parent wrapper element having a link and separate text links having links are causing rendering issues in the browser.

Will there ever be a permanent fix for this?

Thanks!

[ruenel]

Hey @ehsdappdev,

Thanks for writing in!

I could not replicate the issue on my end. Check out the screenshot below:

When viewed live, it displays the same:

I have a hunch there is a broken link or a CSS conflict on your site causing the issue. Please share the page URL so we can inspect it.

Best Regards.

[ehsdappdev]

Did you also apply a link to the text in the headline text editor? That’s what triggers the issue. When BOTH the link property is enabled AND there’s a link in the text for either the headline or subhead. Its the same for any element that allows a link to be set and has editable text.

I’ve tried on all our websites running the Pro theme and its the same.
I can create a new blank page, add a headline, enable link on the headline and add a link to text in the headline. It wipes styles and causes it to display weird in Cornerstone.

I’ll include a sample url in a note.

[ruenel]

Hello @ehsdappdev,

By default, HTML does not allow nesting an <a> tag inside another <a> tag. Cornerstone’s Link option wraps the entire element in <a href="...">...</a>; if you then unintentionally add another link inside that same Headline’s content, you end up with an anchor nested inside an anchor, which breaks the element’s output. This is not a caching or CSS problem — it’s a browser HTML-parsing issue. When the browser’s parser hits the invalid nesting, it repairs it on the fly by closing the outer <a> early and re-opening a new copy of it (same href/class) after every subsequent element boundary. That’s why your output shows the same href duplicated across three empty <a> tags at each nesting level, and why the inner text gets split into separate linked fragments that are left outside any link. The wrapper classes that the compiled TSS styling targets no longer sit on a single intact element, so the styling and positioning are lost.

As a workaround until this is addressed at the builder level: don’t combine the element’s Link option with an inline link inside the same element’s Rich Text content. Move the inner link to a separate text element outside the linked wrapper, or drop the outer Link option and link only the specific text runs you need.

Best Regards.