Link to home
Start Free TrialLog in
Avatar of swtwebdesign
swtwebdesign

asked on

Can someone identify this error that is causing my code (HTML, Javascript, PHP) to display markup to the browser content randomly.

I am really stuck on this one. I have a project I have developed for a client and cannot get it to function properly. The page randomly displays markup on the screen as indicated by the attached screenshot. By randomly I mean that every 4th or 5th click is returning this error... and only on certain browsers, like Chrome or Safari.

I have done everything I can think of and built and rebuilt the system. I cannot seem to find what would make the page display properly once, but then on refresh, to fail like that. Looking at the source when it fails, it does not match what is being displayed.

I can only guess it has something to do with my code being improperly developed. Any ideas on what I should be looking for?

 User generated image
 User generated image 

<?php session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/wide.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Collaborative Family Law Group</title>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--

body {
	font-family: Times, "Times New Roman", serif;
	background-image:url(images/bck_solid.jpg);
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

.link {
	display:block; width:100%; height:30px;
}

#wrapper {
	background-image:url(images/bck.jpg);
	background-repeat:repeat-x;
	width:100%;
	min-height:800px;
}

#header {
	width:996px; 
	margin-left:auto; 
	margin-right:auto;
}

#footer {
	clear:both;
	width:996px; 
	margin-left:auto; 
	margin-right:auto; 
	font-size:12px;
	text-align:center; 
	margin-top:40px;
}

#body {
	width:996px; 
	margin-left:auto; 
	margin-right:auto; 
}

#content {
	padding:20px;
}

h2 {
	font-style:italic; 
	margin:0px; 
	font-size:19px;
}


.buttonDiv{ 
position:relative;
float:left; 
background:#FFFFFF;
width:15px;
margin-right: 0.2em; 
cursor:pointer;
} 

#menu ul {
	list-style-type:none;
	position:relative;
	padding:0px;
	margin:0px;
	float:left;
}

#menu ul ul { 
	display:none;
	position:absolute;
}

#menu ul:hover ul {
	display:block;
}

#menu .btn:hover {
	background-position: 0px -31px;
}

.big-btn {
	height: 44px;
}

.big-btn:hover {
	background-position: 0px -44px;
}

#menu div {
	height:31px;
	background-repeat:no-repeat;
}

#menu #home_btn {
	background-image:url(images/menu_home.gif); 
	width:103px; 
}

#menu #about_btn {
	background-image:url(images/menu_about.gif); 
	width:126px; 
}

#menu #resources_btn {
	background-image:url(images/menu_resources.gif); 
	width:154px; 
}

#menu #practice_btn {
	background-image:url(images/menu_practice.gif); 
	width:279px; 
}

#menu #directory_btn {
	background-image:url(images/menu_directory.gif); 
	width:138px; 
}

#menu #contact_btn {
	background-image:url(images/sub_menu_contact.gif); 
	width:135px; 
}

#menu #what_is_btn {
	background-image:url(images/sub_menu_what_is.gif); 
	width:279px; 
}

#menu #for_me_btn {
	background-image:url(images/sub_menu_for_me.gif); 
	width:279px; 
}

#menu #faq_btn {
	background-image:url(images/sub_menu_faq.gif); 
	width:279px; 
}

#menu #glossary_btn {
	background-image:url(images/sub_menu_glossary.gif); 
	width:279px; 
}

#menu #legal_btn {
	background-image:url(images/sub_menu_legal.gif); 
	width:205px; 
}

#menu #financial_btn {
	background-image:url(images/sub_menu_financial.gif); 
	width:205px; 
}

#menu #mental_btn {
	background-image:url(images/sub_menu_mental.gif); 
	width:205px; 
}

#menu #videos_btn {
	background-image:url(images/sub_menu_videos.gif); 
	width:154px; 
}

#menu #books_btn {
	background-image:url(images/sub_menu_books.gif); 
	width:154px; 
}

#menu #articles_btn {
	background-image:url(images/sub_menu_articles.gif); 
	width:154px; 
}

#menu #links_btn {
	background-image:url(images/sub_menu_links.gif); 
	width:154px; 
}

#menu #login_btn {
	background-image:url(images/sub_menu_login.gif); 
	width:200px; 
}

#menu #board_btn {
	background-image:url(images/sub_menu_board.gif); 
	width:200px; 
}

#menu #order_btn {
	background-image:url(images/sub_menu_order.gif); 
	width:200px; 
}

#menu #dues_btn {
	background-image:url(images/sub_menu_dues.gif); 
	width:200px; 
}


#members_resources_btn {
	background-image:url(images/btn-member-resources.gif); 
	width:278px; 
}

#members_nav a {
	text-decoration:none;
	color:#003399;
}

#flashbanner {
	width:898px;
	margin-right:auto;
	margin-left:auto;
}

-->
</style>
<script type="text/javascript"> 
<!-- 

//script to change background-color of the selected 
//button and put the appropriate value in an input object 
function btnClick(btnNum){ 
for (i=1;i<=3;i++){ 
tempBtn=document.getElementById('btn'+i) 
tempBtnValue=document.getElementById('checked'+i)
if (tempBtnValue.value == 0 && i == btnNum) { tempBtnValue.value = 1; tempBtn.style.backgroundColor = "grey"; } else if (tempBtnValue.value == 1 && i == btnNum) { tempBtnValue.value = 0; tempBtn.style.backgroundColor = "#ffffff"; } //tempBtn.style.backgroundColor=(i==btnNum?'grey':'#ffffff') 
} 
tempBtnVal.value=btnNum 
} 
//--> 
</script> 

<!-- InstanceBeginEditable name="head" -->
<?php 
	$page = "directory";
	include("easy_cms_module/easy_cms_init.php"); 
?>
<!-- InstanceEndEditable -->
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>



<div id="wrapper">



<!-- Header Start-->

<div id="header">

<img src="images/banner_top.jpg" alt=""/>

<img src="images/menu_left.jpg" alt="" width="97" height="33" style="float:left;"/>

<div id="menu">

      <ul>
        <li>
          <div class="btn" id="home_btn"><a class="link" href="index.php"></a></div>
        </li>
      </ul>

      <ul>
        <li>
          <div class="btn" id="news_btn"><a class="link" href="news.php"></a></div>
        </li>
      </ul>

      <ul>
        <li>
          <div class="btn" id="practice_btn"></div>
          <ul>
            <li>
              <div class="btn" id="what_is_btn"><a class="link" href="whatis.php"></a></div>
            </li>
            <li>
              <div class="btn" id="for_me_btn"><a class="link" href="forme.php"></a></div>
            </li>
            <li>
              <div class="btn" id="faq_btn"><a class="link" href="faq.php"></a></div>
            </li>
            <li>
              <div class="btn" id="glossary_btn"><a class="link" href="glossary.php"></a></div>
            </li>
          </ul>
        </li>
      </ul>

      <ul>
        <li>
          <div class="btn" id="directory_btn"><a class="link" href="directory.php"></a></div>
        </li>
      </ul>
      

      <ul>
        <li>
          <div class="btn" id="about_btn"><a class="link" href="about.php"></a></div>
          <ul>
            <li>
              <div class="btn" id="contact_btn"><a class="link" href="contact.php"></a></div>
            </li>
          </ul>
        </li>
      </ul>
      
    <ul>
        <li>
          <div class="btn" id="resources_btn"></div>
          <ul>
            <li>
              <div class="btn" id="books_btn"><a class="link" href="books.php"></a></div>
            </li>
            <li>
              <div class="btn" id="videos_btn"><a class="link" href="videos.php"></a></div>
            </li>
            <li>
              <div class="btn" id="articles_btn"><a class="link" href="articles.php"></a></div>
            </li>
            <li>
              <div class="btn" id="links_btn"><a class="link" href="links.php"></a></div>
            </li>
          </ul>
        </li>
      </ul>

</div>
<img src="images/menu_right.jpg" alt="" width="94" height="30" />
<div id="flashbanner">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','898','height','181','title','Banner','src','banner','quality','high','wmode','transparent','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','banner' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="898" height="181" title="Banner">
    <param name="movie" value="banner.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <embed src="banner.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="898" height="181"></embed>
  </object>
</noscript>
</div>
<img src="images/blue_bar.jpg" alt="" /></div>

<!-- Header End-->




<!-- Body Start-->

<div id="body">

    <div style="float:left; width:957px; min-height:357px; background-image:url(images/content_area_bck.jpg); background-repeat:no-repeat;">
    
        <div style="padding:0px 25px 20px 70px;">
                  
            <div style="color:#022651; font-size:14px; margin-top:20px; font-weight:600; text-align:justify;">
            
            <!-- InstanceBeginEditable name="content_bottom" --> 
            
            <? content($page); ?>
            
			<?
            
            //--------------------------------------------------------------------------
            $connection = mysql_connect(EASYCMS_HOST, EASYCMS_USER, EASYCMS_PASSWORD);
            $db_select = mysql_select_db(EASYCMS_DATABASE, $connection);
            //--------------------------------------------------------------------------
            
            ?>
            

            <table style="float:left; font-size:13px; font-family:Arial, Helvetica, sans-serif;" width="280" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td align="center"><h2>Legal</h2></td>
              </tr>
              
              <tr>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
              </tr>
        
			  <? 
                
                $query ="SELECT * FROM professionals ";
                $query .="WHERE field = 1 AND activated = 1 ORDER BY firstname";
                $result = mysql_query($query, $connection);
                while ($pro_list = mysql_fetch_array($result)) { 
                
                ?>
              
              <tr>
                <td align="center" valign="top">
                <? 
				$span_id = $pro_list['title'] . $pro_list['lastname'] . $pro_list['firstname'];
				$search  = array(' ', ',', '.', '-');
				$span_id = str_replace($search, "", $span_id); 
				?>
				<span id="<?= $span_id ?>"><?= $pro_list['firstname'] . " " .  $pro_list['lastname'] .  " " . $pro_list['title']; ?></span><br />
                <?= $pro_list['address']; ?><br />
                <?= $pro_list['city'] . " " . $pro_list['state'] . ", " . $pro_list['zip']; ?><br />
                <?= $pro_list['phone']; ?><br />
                <? if ( $pro_list['email'] <> NULL ) {?> <a href="mailto:<?= $pro_list['email']; ?>">Email</a><br /> <? } ?>
                <? if ( $pro_list['website'] <> NULL ) {?> <a target="_blank" href="http://<?= $pro_list['website']; ?>">Website</a> <? } ?>
                </td>
              </tr>
              
              <tr>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
              </tr>
              
			 <? } ?>
              
			</table>
            
            
            <table style="float:left; font-size:13px; font-family:Arial, Helvetica, sans-serif;" width="280" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td align="center"><h2>Financial</h2></td>
              </tr>
              
              <tr>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
              </tr>
        
			  <? 
                
                $query ="SELECT * FROM professionals ";
                $query .="WHERE field = 2 AND activated = 1 ORDER BY firstname";
                $result = mysql_query($query, $connection);
                while ($pro_list = mysql_fetch_array($result)) { 
                
                ?>
              
              <tr>
                <td align="center" valign="top">
                <? 
				$span_id = $pro_list['title'] . $pro_list['lastname'] . $pro_list['firstname'];
				$search  = array(' ', ',', '.', '-');
				$span_id = str_replace($search, "", $span_id); 
				?>
				<span id="<?= $span_id ?>"><?= $pro_list['firstname'] . " " .  $pro_list['lastname'] .  " " . $pro_list['title']; ?></span><br />
                <?= $pro_list['address']; ?><br />
                <?= $pro_list['city'] . " " . $pro_list['state'] . ", " . $pro_list['zip']; ?><br />
                <?= $pro_list['phone']; ?><br />
                <? if ( $pro_list['email'] <> NULL ) {?> <a href="mailto:<?= $pro_list['email']; ?>">Email</a><br /> <? } ?>
                <? if ( $pro_list['website'] <> NULL ) {?> <a target="_blank" href="http://<?= $pro_list['website']; ?>">Website</a> <? } ?>
                </td>
              </tr>
         
              <tr>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
              </tr>
              
			 <? } ?>

              
			</table>
            
            
            <table style="float:left; font-size:13px; font-family:Arial, Helvetica, sans-serif;" width="280" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td align="center"><h2>Mental Health</h2></td>
              </tr>
              
              <tr>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
              </tr>
        
			  <? 
                
                $query ="SELECT * FROM professionals ";
                $query .="WHERE field = 3 AND activated = 1 ORDER BY firstname";
                $result = mysql_query($query, $connection);
                while ($pro_list = mysql_fetch_array($result)) { 
                
                ?>
              
              <tr>
                <td align="center" valign="top">
                <? 
				$span_id = $pro_list['title'] . $pro_list['lastname'] . $pro_list['firstname'];
				$search  = array(' ', ',', '.', '-');
				$span_id = str_replace($search, "", $span_id); 
				?>
				<span id="<?= $span_id ?>"><?= $pro_list['firstname'] . " " .  $pro_list['lastname'] .  " " . $pro_list['title']; ?></span><br />
                <?= $pro_list['address']; ?><br />
                <?= $pro_list['city'] . " " . $pro_list['state'] . ", " . $pro_list['zip']; ?><br />
                <?= $pro_list['phone']; ?><br />
                <? if ( $pro_list['email'] <> NULL ) {?> <a href="mailto:<?= $pro_list['email']; ?>">Email</a><br /> <? } ?>
                <? if ( $pro_list['website'] <> NULL ) {?> <a target="_blank" href="http://<?= $pro_list['website']; ?>">Website</a> <? } ?>
                </td>
              </tr>
         
              <tr>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
              </tr>
              
			 <? } ?>

              
			</table>
            
            <div style="clear:both;">&nbsp;</div>
            
            <!-- InstanceEndEditable -->
            
            </div>
    
        </div>
    
    <img style="float:right;" src="images/content-footer.gif" alt=""/>    </div>

    </div>
<!-- Body End-->





<!-- Footer Start-->

<div id="footer">

<form id="searchform" action="site_search.php" method="get">
  <br />
  <div style="margin: 0px 0px 20px 40px; background-image:url(images/search_box.jpg); width:346px; height:53px;"> <a style="margin: 0px 0px 0px 0px; color:#908989; font-size:15.5px; font-weight:600; text-decoration:none;" onclick="searchform.submit();" href="#">SEARCH</a>
      <input style="background:transparent; border:none; width:210px; height:18px; padding-left:4px; margin:14px 10px 0px 15px;" name="search" type="text" />
  </div>
</form>

<br /><br />Copyright &copy; All Rights Reserved Collaborative Family Law Group | Website Designed by <a style="color:black; text-decoration:none;" href="http://www.creativetechniques.biz">Creative Techniques</a> | <a style="color:black; text-decoration:none;" href="professional-profile.php">Professional Login
    
    </a><br />
    <br /><br />
    
</div>

<!-- Footer End-->




</div>




</body>
<!-- InstanceEnd --></html>

Open in new window

Avatar of nahime
nahime
Flag of Italy image
The HTML is right, maybe you have some refresh problem.
Try to do Control+F5 to force the reload of all the page resource by the browser.
I've tried your website with:
Internet Explorer
Firefox
Chrome
Safari

And it works good. I've also tried to refresh a lot, but no errors were displayed.
Avatar of swtwebdesign
swtwebdesign

ASKER

The link to the site is: http://www.cfl-cfl.com/
Avatar of swtwebdesign
swtwebdesign

ASKER

Sometimes I can't seem to get it to display the error, but often it takes 5-10 clicks on a page to get it. If I force a refresh, it displays fine, but then after several more clicks I will see it again. It baffles me. The client is seeing it on Mac Safari and I see it on PC Chrome.
Avatar of nahime
nahime
Flag of Italy image
I've refreshed, clicked on "directory" link,several several times,  but nothing, no errors :(
Avatar of swtwebdesign
swtwebdesign

ASKER

That's the killer, it is not consistent. What could cause that? I once was developing a web application and embedding a PHP function within another PHP function in a certain instance was causing a similar issue, however I do not believe I have done that here.
Avatar of Mark Franz
Mark Franz
Flag of United States of America image
It might be nothing, but check out the W3 Validator on your site, http://validator.w3.org/check?uri=http%3A%2F%2Fwww.cfl-cfl.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Also, set the pages to "no-cache" to see if it can be a caching issue.  This is a VBScript example, but I think PHP uses something similar;

<%
Response.Expires = 0
Response.ExpiresAbsolute = Now() - 1
Response.AddHeader "pragma", "no-cache"
Response.AddHeader "cache-control", "private, no-cache, no-store, must-revalidate"
%>
Avatar of Richard Quadling
Richard Quadling
Flag of United Kingdom of Great Britain and Northern Ireland image
@mgfranz, yes there is - header(). See http://docs.php.net/manual/en/function.header.php for details.

Avatar of Rob
Rob
Flag of Australia image
You're right there's nothing wrong with your code and the html conforms with w3 standards so really it's about Safari and Chrome handling the flash object.  What versions of the browsers are you using that experience this error?

Have you considered replacing the flash object with javascript??  I'm sure you can achieve the same result mootools or equivalent javascript animation library.  The TinyMCe editor control you are using references jQuery so you'd use that
Avatar of Mark Franz
Mark Franz
Flag of United States of America image
< RQuadling.  So there is!  

<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
?>

I'm thinking this has something to do with the way the SWF is being embeded/called...
Avatar of nahime
nahime
Flag of Italy image
try to remove the flash object to see if the error disappear.
Avatar of Rob
Rob
Flag of Australia image
@nahime the error is the flash object not appearing
Avatar of nahime
nahime
Flag of Italy image
No, the error is the flash obkect not appearing and a string on top of the page that seems "broken html". But I've tested the website with IE, FFOX, Chrome, Safari and I see the flash object without error.
Also the Author see the flash object only that sometimes it disappear (every 5/6 refresh) on chrome and safari.
You can try by yourself going on: http://www.cfl-cfl.com/directory.php.
I suggested to remove the flash object to see if the html error on top of the page disapper: If so the problem is the flash movie.
Avatar of swtwebdesign
swtwebdesign

ASKER

Thanks for the responses!

Attempting to remove the Flash object now to see if the issue ceases. Will update.
Avatar of swtwebdesign
swtwebdesign

ASKER

I removed the Flash object and am still getting the error. Scratch that one.
Avatar of Ray Paseur
Ray Paseur
Flag of United States of America image
It looks like the first example showed this string in error...

ctiveContent.js" type="text/javascript">

... and that is from line 254 in the code snippet.  It says in full this...

<script src="AC_RunActiveContent.js" type="text/javascript"></script>

... and that is located inside the <head> of the HTML document.  It almost certainly should be part of the <body> so that would be my first suggestion - move it into the body and see if the failure disappears.

HTH, ~Ray
Avatar of nahime
nahime
Flag of Italy image
Really strange.
If I do a lot of refresh the only error I see sometimes is a ">" character  before the "Legal" label.

I attach a screenshot showing you the html code generated. I don't know if can be a server error that sometimes doesn't send the content correctly to the client.

Cattura.JPG
ASKER CERTIFIED SOLUTION
Avatar of Ray Paseur
Ray Paseur
Flag of United States of America image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Avatar of Mark Franz
Mark Franz
Flag of United States of America image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Rob
Rob
Flag of Australia image
Again I have to ask what version of chrome are you running?
Avatar of Rob
Rob
Flag of Australia image
When you get the error can you view the page source and post that?  that will answer whether it's a hosting problem or a browser issue
Avatar of Mark Franz
Mark Franz
Flag of United States of America image
The fact that the error is being displayed as a javascript issue, pretty much concludes that this is a client side issue.  You can effectively comment out the .js function calls and verify the fact that this is not a server-side issue.
Avatar of Rob
Rob
Flag of Australia image
@mgfranz - it doesn't look like a javascript issue to me more like a html parsing issue hence part of the code displayed at the top.
often found when inverted commas haven't been closed etc
Avatar of Mark Franz
Mark Franz
Flag of United States of America image
Could be, I'm betting on an issue with Safari and the way the browser detection is being called via .js.  Old code can be brutal, and the AC_RunActiveContent.js file is dated 2006.
SOLUTION
Avatar of Rob
Rob
Flag of Australia image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Mark Franz
Mark Franz
Flag of United States of America image
Or... like I said before, use straight Object and Embed tags.
Avatar of swtwebdesign
swtwebdesign

ASKER

Thanks so much! Looks like I need to make sure I am using a newer file then my current AC_RunActiveContent.js.

I am using the following version of Chrome: 5.0.375.127.

Looks like the issue was in my PHP for the CMS I am using, which is a custom build. Apparently somewhere in there I had some code that was causing this, because I upgraded it to a newer version of it that I recently built and the problem ceased. I am baffled as to what part of my code was the culprit.

Any ideas of what kind of code issue would cause this?
Avatar of Mark Franz
Mark Franz
Flag of United States of America image
I don't know why you would simply close the Q when a number of experts posted possible solutions and ideas to solve this issue.  
Avatar of swtwebdesign
swtwebdesign

ASKER

I am relatively new to Experts Exchange. The issue was not solved by their comments, although they were greatly appreciated and I learned from them. Should I have awarded points for the good suggestions anyways?

Forgive me for my ignorance of how the system works.
Avatar of Mark Franz
Mark Franz
Flag of United States of America image
The fact that the error was isolated to the AC_RunActiveContent.js file should be enough to award points, if it was me, I would split the points across the baord to Ray, Tagit and myself.  But if you think that the experts suggestions were not enough to solve the issue then go ahead and close it.
Avatar of swtwebdesign
swtwebdesign

ASKER

Although my javascript file was outdated and that was valuable information, the problem was actually in my PHP content management system... which is why I did not away points. You all did, however help me greatly in other areas, so I will award points as you suggested.
Avatar of swtwebdesign
swtwebdesign

ASKER

I would prefer to award some points to those who came close. How do I do this now that I have started closing it?
Avatar of swtwebdesign
swtwebdesign

ASKER

Thank you guys!