f3tz3r
March 25, 2011, 8:29pm
1
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='pointer';" OnMouseOut="this.style.cursor='default';" id="changer' . $ii . '">
Show Summary
<div style="float:left;height:15px;width:15px;background-image:url('http://fis-cal.com/images/arrows.gif')" 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?
f3tz3r
March 25, 2011, 9:25pm
3
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>
Cups
March 25, 2011, 9:54pm
5
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.
oddz
March 25, 2011, 11:51pm
6
div ain’t allowed in a paragraph tag, but what Cups said.