Issue with self closing tag in Theme Section

Solved
Highlighted
Tourist
25 0 0

When I create a new Theme Section and use a self closing tag e.g. "<a ... />" at the beginning of the section, the self closing tag is duplicated in multiple places in the section.  The tag is also repeated into the following footer section.

 

If the tag is closed with an end tag e.g. "<a ... ></a>", then the tag is not repeated.  When I look at the HTML source code, the tag is not repeated.  It maybe a problem with Javascript but I also have an issue in the Theme Editor with that section. 

 

In the Theme Editor, if I put the section at the beginning of all sections and after I save, the editor will re-arrange it and put the section as the last section.

 

In the image, you can see "repeatingxxx" seven times.Screen Shot 2019-02-07 at 11.21.13 AM.png

 

Next image is from the browser console.Screen Shot 2019-02-07 at 11.29.26 AM.png

 

I am attaching both versions of the Theme Sections and the HTML source code.  I just downloaded the Boundless Theme this week.

 

 

0 Likes
Shopify Partner
839 82 125

They there,

 

That <a>...</a> inside <ul> above the <li> doesn't look good. The only element allowed inside an <ul> is <li>. So the HTML as seen here on the screenshot with the page source is invalid and might impact the whole layout of the page. Not necessarily the root cause, but thought I'd highlight that.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Tourist
25 0 0

I am not adding the <a> tag into either the <ul> or <li> tags.

0 Likes
Tourist
25 0 0

I took a closer look at the case with the end tag.  The <a> tag is repeated as well but it is within the section.

 

In the image you can see, there are just <a> tags with no attributes or any contentScreen Shot 2019-02-07 at 12.01.38 PM.png

 

0 Likes
Tourist
25 0 0

@rickydazla @gina-gregory @Jason @Arthur_Korniyen

 

Have you encountered this issue?  Or do you have an idea what is going on with my issue?

 

I would appreciate your help.

0 Likes

Success.

Shopify Partner
2536 31 561

It's not a Shopify problem, it's broken HTML and browser error-recovery.

The .html in your ZIP does not show any repeats -- try looking at "View Page source" for unprocessed code and not in "Elements", where browser (unsuccessfully) tries to fix the HTML structure.


Now the question is why do you think self-closing <a> is valid?

 

It's not a void element, so it can't be self-closing, most probably browser treats it as opening tag and have problems since there is no closing tag.

Try any valid void tag, lake <br /> (or any of  area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr).

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
1 Like
Shopify Expert
474 0 69

Tim's right. It's an issue with your html. <a> is not a self-closing tag. So if you don't close it, you're going to have the issue you're seeing.

1 Like
Tourist
25 0 0

Thanks for your input.  I did not make the distinction between void and non-void elements.

 

I appreciate your feedback.

0 Likes
Tourist
25 0 0

I put the slash in the wrong location in the end tag.

0 Likes