Echo not following my rules

I am kind of a beginner, so feel free to mock/ridicule if this is a simple error, but i have exhausted all other resources before posting here.

Here is my php code:

echo (
	'<h3>' . $row['title'] . '</h3>' .
	'<p style="text-size:10px;" onmouseup="auto_hide(' . $ii . ')" OnMouseOver="this.style.cursor=&#39;pointer&#39;;" OnMouseOut="this.style.cursor=&#39;default&#39;;" id="changer' . $ii . '">
	Show Summary
	<div style="float:left;height:15px;width:15px;background-image:url(&#39;http:&#47;&#47;fis-cal.com&#47;images&#47;arrows.gif&#39;)" id="arrows"></div>
	</p>'
        );

Yet when rendered by my browser, i get:

<h3> Fiscal Systems Wins IBM Retail Sales Solutions Excellance Award</h3><p style="cursor: default; " onmouseup="auto_hide(1)" onmouseover="this.style.cursor='pointer';" onmouseout="this.style.cursor='default';" id="changer1">Show Summary</p><div style="float:left;height:15px;width:15px;background-image:url('http://fis-cal.com/images/arrows.gif')" id="arrows"></div>
<p></p>

And i cant for the life of me figure out why it is closing the <p> tag before the <div id=“arrows”> is inserted.

Any help with this will be greatly appreciated.

Andrew

If you take away the inline styles and javascript, do you get the correct result?


echo '
	<h3>'. $row['title'] .'</h3>
    <p id="changer'. $ii .'">Show Summary
  	<div id="arrows"></div>
    </p>'; 

Why aren’t you using CSS or unobtrusive JS?

I am using CSS, but when troubleshooting errors like this, i use inline styles so that i dont have to transfer multiple files every attempt to fix the problem.

Honestly, I’m not sure what you mean by “unobtrusive JS” unless thats calling the function from header. Which i can and will fix.

After removing all the inline styles my php is


echo (
	'<h3>' . $row['title'] . '</h3>' .
	'<p>Show Summary
        <div></div>
        </p>');

and the html that is rendered is


<h3> Fiscal Systems Wins IBM Retail Sales Solutions Excellance Award</h3>
<p>Show Summary</p>
<div></div>
<p></p>

Is this being run through a filter of some sort?

I checked this through the W3c validator and it didn’t like the closing P tab, but checking it like so is ok:


	<?php
		echo '
			<h3>'. $row['title'] .'</h3>
			<p id="changer'. $ii .'">Show Summary</p>
		  	<div id="arrows"></div>'; 
	?>

Unobtrusive Javascript: Unobtrusive JavaScript - Wikipedia, the free encyclopedia
So for (a very quick) example:


<!doctype html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<body>
<?php
	echo '
		<h3>'. $row['title'] .'</h3>
		<p id="changer'. $ii .'">Show Summary</p>
	  	<div id="arrows"></div>'; 
?>
		<script>
		window.onload = doSomething();
		function doSomething() {
			if( document.getElementById('changer') ) {
				var chngr = document.getElementById('changer');
				chngr.onmouseup = function() {
					alert('something')
				};	
			}
		}
		</script>
	</body>
</html>

Are you “viewing the html” in FF or Chrome by “inspecting an element” rather than viewing source code?

If so you are looking at the interpreted DOM, which gets cleaned up prior to displaying it to you. Do “view source code” to re-establish your sanity.

div ain’t allowed in a paragraph tag, but what Cups said.