Pro 4.0.10: Nested divs with anchor tags acting differently on the front end

[Misho]

Hi!

This issue started when I wanted to add some paddings to a div, that did not showed up on the front-end the same way as they did in the Layout builder.

I have decided to add visible borders to all containers inside looped columns, to understand what is going on. My findings are that it seems to be a bug with a DIV when it has an <a> tag.

This is how the products look like in the Layout builder:

This is the front end:

As you can see, the paddings are not working.

Now, this is my structure for the Looped column:

Since it is not possible to have both the <article> and <a> tag on the same container, I have decided to nest them. <article> is for the semantics, and <a> is to make the content inside the column clickable.

When we add visible borders to all containers, we get this inside the Layout editor:

Red: Column <article>
Blue: Div <a>
Orange: Div <figure>
Green: Div <article> that holds all the product data

The paddings that are not applying on the front end are added to the blue div with the <a> tag.

However, this is what happens on the front end:

As you can see, we don’t have a single <a> blue DIV that wraps around the figure and the nested (green) article anymore. We have the blue <a> DIV now repeated two times: One is around the <figure> DIV, and the other got inside the second, green <article> DIV, that is nested inside. So the front-end structure is not the same as the back-end one, and that probably causes the paddings to fail to be effective.

Thanks!

Edit: When I make the outer Column to be have an <a> tag, and the inner div to have the <article> tag, so switching the tags on the red and the blue container, the problem goes away. Still, it seems that the div with an <a> tag misbehaves in some scenarios, like the one I have encountered.

[ruenel]

Hello @Misho,

Thanks for the detailed information. Any <a> anchor being placed inside an anchor is invalid markup. We actually have a system operating behind the scenes in this release that will remove any anchor tags from nested Elements that might inadvertently use them. This was explained in detail by @Kory in this thread:

• Post (Tiles) Element - Add button with link (not working)

Hope this helps.

[Misho]

@ruenel

Any <a> anchor being placed inside an anchor is invalid markup

@ruenel, thanks!

I don’t think that is the case here. I was talking about an anchor tag inside the <article> tag, not about nested anchor tags. The column was an <article>, and inside it was an <a> tag. Then this <a> tag had a <figure> and another <article> There is no invalid markup present.

[ruenel]

Hello @Misho,

In your illustration, the Green DIV is enclosed in the Blue DIV which means that the green anchor is nested inside the blue anchor tag.

The system modifies the layout to have the anchor tags separated from being nested to each other. I have recreated your layout having this:

The system modified the resulting tags and make it like this:

I will forward this thread to @Kory for more input about how the systems. Thank you for your understanding.

[Misho]

@ruenel, I’m so sorry. I’ve made a mistake. Green is an <article> tag, not anchor.

I have edited the post.

[prakash_s]

Hello @Misho,

As my colleague, @ruenel has already forwarded this thread to @Kory. Please stay tuned for his inputs on this.
Thank you for your understanding