Repeater fields rendering additional elements

[Joachim]

Long time user and huge fan of PW, but this time I can't find an answer to my question this time:

For my social media buttons, I have a Repeater field called var_link_web with two fields: one is for the URL, and the other is an Images field containing two images that are used as a background-image for a <div>, of which the second is the ':hover' version (although activated through JavaScript here). 

There are four instances of this Repeater, of which two are 'turned off'.

I use the following PHP in my _main.php to call them, wrapped in <p><?php == ?></p>:

$s_m_button = $variables->var_link_web;
foreach($s_m_button as $button){
	$button_image = $button->var_link_image->first->height(80);
	$button_image2 = $button->var_link_image->eq(1)->height(80);
	echo "
	<a href='$button->var_link_url'>
       	<div class='image_link' style='background-image:url({$button_image->url})' onMouseOver='this.style.backgroundImage=url({$button_image2->url})' onMouseOut='this.style.backgroundImage=url({$button_image->url})'>
        </div>
	</a>";
};

($variables leads to an unpublished page with several fields I want to have easy access to, and is defined in _init.php.)

However, this gives me the following result:

I have no idea where the extra <p>'s come from. The URL field has the 'HTML Entity Encoder' turned on. What's even weirder is that the HTML source file seemingly renders correctly:

<p>			
	<a href='https://www.facebook.com/'>
		<div class='image_link' style='background-image:url(/site/assets/files/1045/icons-facebook-square.0x80.png)' onMouseOver='this.style.backgroundImage="url(/site/assets/files/1045/icons-facebook-square2.0x80.png)"' onMouseOut='this.style.backgroundImage="url(/site/assets/files/1045/icons-facebook-square.0x80.png)"'>
		</div>
	</a>
	<a href='https://www.instagram.com/'>
		<div class='image_link' style='background-image:url(/site/assets/files/1046/icons-instagram-square.0x80.png)' onMouseOver='this.style.backgroundImage="url(/site/assets/files/1046/icons-instagram-square2.0x80.png)"' onMouseOut='this.style.backgroundImage="url(/site/assets/files/1046/icons-instagram-square.0x80.png)"'>
		</div>
	</a>					
</p>

Removing the JavaScript has no effect. I'm probably missing something obvious, but am at a loss here.

 

Thank you in advance!

[Joachim]

Update:

Apparently the only reason I get that result is because it is wrapped in a <p> element.

Is my setup to blame or is this a (known) bug?

[teppo]

On 9/13/2021 at 5:20 PM, Joachim said:

Is my setup to blame or is this a (known) bug?

Technically it's a (browser rendering engine / HTML) feature, not a bug ?

According to HTML spec you can only put phrasing content within <p> tags, and as such, <div>'s are not allowed. When you inspect the page with dev tools, what you see there is the browser doing its best to convert invalid HTML markup into something valid (even though the end result is clearly not what you were aiming for). On the other hand when you're viewing the "raw" page source, browser won't try to parse or process it, which is why it seems to be fine.

If you need an element within <p> tag to behave like a block element, you should rather use a <span> (or another inline element) with "display: block".

[Joachim]

21 hours ago, teppo said:

Technically it's a (browser rendering engine / HTML) feature, not a bug ?

According to HTML spec you can only put phrasing content within <p> tags, and as such, <div>'s are not allowed. When you inspect the page with dev tools, what you see there is the browser doing its best to convert invalid HTML markup into something valid (even though the end result is clearly not exactly what you were aiming for). On the other hand when you're viewing the "raw" page source, the browser won't try to parse or process it, which is why it seems to be fine.

If you need an element within <p> tag to behave like a block element, you should rather use a <span> (or another inline element) with "display: block".

Ah, that explains a lot! So this hasn't even anything to do with ProcessWire ?

I had looked at the red text in the source file as Firefox presents it, but saw how in the example pages at times more than plain text was used, so didn't think it would be problematic. Still, it was probably only PHP outputting plain text..

Thank you for the concise explanation!