Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Works in firefox but not Opera/IE? 1

Status
Not open for further replies.

PsalmBlaster

Technical User
Jul 27, 2002
18
0
0
CA
Hi, I'm making an online educational comntent management for a University Project using PHP and MySQL. I've been using Firefox (my default browser) to check results.. I never expect things to work in IE but when I checked out my latest script it displays nothing.. the source seems to be correct and the CSS and output HTML are all OK according to validator.w3.org.

Everything displays as intended in Firefox but all I get is a white screen and the below when I view source..

Just realisd that the testing data I put into the SQL table is about my girlfriend so.. ignore the fact that the word boobs is in there. She was sat there and I was sick of just spamming my keyboard - concentrate on the code!

Quick notes on what I've tried:

Thought it might be something to do with \n useage.. I'm using ConTEXT and got it to replace all \n with <custom/> this resulted in Opera displaying a fragment of the very last input checkbox in the last table row.

Also commented out all echos in PHP, leaving a plain HTML message in pre-PHP body, this displayed correctly.

When I un-commented the echos it wouldn't display the text after <body> I gradually worked my way through and narrowed the problem to the dov or table echoing regions, but other than that I can't see wht the problem is. I REALLY hope it isn't to do with ' and " differences any help is greatly appreciated.

It's not vital that it works on other browsers but I went to all the trouble of validating it it's a shame to waste it :)
(And it's just professionalism/curiosity I guess)

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<link rel="stylesheet" href="basic.css"/>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
<title>Create a new Module</title>
<link rel="stylesheet" type="text/css" href="hittastic.css" />
<script type="text/javascript" src="Project_Java.js"/>
</head>
<body>
FOR FUCKS SAKE
<div id='tablecont'><div id='leftcontainer'><form name='submodform' method='post' action='createmodule.php?sl=1'>
<table id='lefttable' class='lefttable1 tableedge1 '><tr><td colspan='3' class='headercell centered'> <span class='Header'>-Available Submodules-</span></td></tr>
<tr id='TR1' onmouseover="rowMOver('TR1','TD21','1','3')" onmouseout="rowMOut('TR1','TD21','1','3')" onclick="rowMClick2('3')"><td id='TD1' class='maxwidth20'><input onclick="rowMClick('TR1','TD21','1','3')" type='checkbox' id='CK3'/></td>
<td id='TD21' class='SmallHeader maxwidth30'>Shoes</td><td id='TDx1' class='greytable'>Girls like shoes, foot adornments</td></tr>
<tr id='TR2' onmouseover="rowMOver('TR2','TD22','2','2')" onmouseout="rowMOut('TR2','TD22','2','2')" onclick="rowMClick2('2')"><td id='TD2' class='maxwidth20'><input onclick="rowMClick('TR2','TD22','2','2')" type='checkbox' id='CK2'/></td>
<td id='TD22' class='SmallHeader maxwidth30'>Fake-up</td><td id='TDx2' class='greytable'>Cement for your face</td></tr>
<tr id='TR3' onmouseover="rowMOver('TR3','TD23','3','1')" onmouseout="rowMOut('TR3','TD23','3','1')" onclick="rowMClick2('1')"><td id='TD3' class='maxwidth20'><input onclick="rowMClick('TR3','TD23','3','1')" type='checkbox' id='CK1'/></td>
<td id='TD23' class='SmallHeader maxwidth30'>Boobs</td><td id='TDx3' class='greytable'>Well..</td></tr>
<tr id='TR4' onmouseover="rowMOver('TR4','TD24','4','4')" onmouseout="rowMOut('TR4','TD24','4','4')" onclick="rowMClick2('4')"><td id='TD4' class='maxwidth20'><input onclick="rowMClick('TR4','TD24','4','4')" type='checkbox' id='CK4'/></td>
<td id='TD24' class='SmallHeader maxwidth30'>Hair</td><td id='TDx4' class='greytable'>Long silky hair</td></tr>
<tr id='TR5' onmouseover="rowMOver('TR5','TD25','5','67')" onmouseout="rowMOut('TR5','TD25','5','67')" onclick="rowMClick2('67')"><td id='TD5' class='maxwidth20'><input onclick="rowMClick('TR5','TD25','5','67')" type='checkbox' id='CK67'/></td>
<td id='TD25' class='SmallHeader maxwidth30'>Eyes</td><td id='TDx5' class='greytable'>Big, Brown</td></tr>
<tr id='TR6' onmouseover="rowMOver('TR6','TD26','6','68')" onmouseout="rowMOut('TR6','TD26','6','68')" onclick="rowMClick2('68')"><td id='TD6' class='maxwidth20'><input onclick="rowMClick('TR6','TD26','6','68')" type='checkbox' id='CK68'/></td>
<td id='TD26' class='SmallHeader maxwidth30'>Thing1</td><td id='TDx6' class='greytable'>Desc1</td></tr>
<tr id='TR7' onmouseover="rowMOver('TR7','TD27','7','69')" onmouseout="rowMOut('TR7','TD27','7','69')" onclick="rowMClick2('69')"><td id='TD7' class='maxwidth20'><input onclick="rowMClick('TR7','TD27','7','69')" type='checkbox' id='CK69'/></td>
<td id='TD27' class='SmallHeader maxwidth30'>Thing2</td><td id='TDx7' class='greytable'>Desc2</td></tr>
<tr id='TR8' onmouseover="rowMOver('TR8','TD28','8','70')" onmouseout="rowMOut('TR8','TD28','8','70')" onclick="rowMClick2('70')"><td id='TD8' class='maxwidth20'><input onclick="rowMClick('TR8','TD28','8','70')" type='checkbox' id='CK70'/></td>
<td id='TD28' class='SmallHeader maxwidth30'>Thing3</td><td id='TDx8' class='greytable'>Desc3</td></tr>
<tr id='TR9' onmouseover="rowMOver('TR9','TD29','9','71')" onmouseout="rowMOut('TR9','TD29','9','71')" onclick="rowMClick2('71')"><td id='TD9' class='maxwidth20'><input onclick="rowMClick('TR9','TD29','9','71')" type='checkbox' id='CK71'/></td>
<td id='TD29' class='SmallHeader maxwidth30'>Thing4</td><td id='TDx9' class='greytable'>Desc4</td></tr>
<tr id='TR10' onmouseover="rowMOver('TR10','TD210','10','72')" onmouseout="rowMOut('TR10','TD210','10','72')" onclick="rowMClick2('72')"><td id='TD10' class='maxwidth20'><input onclick="rowMClick('TR10','TD210','10','72')" type='checkbox' id='CK72'/></td>
<td id='TD210' class='SmallHeader maxwidth30'>Thing5</td><td id='TDx10' class='greytable'>Desc5</td></tr>
<tr id='TR11' onmouseover="rowMOver('TR11','TD211','11','73')" onmouseout="rowMOut('TR11','TD211','11','73')" onclick="rowMClick2('73')"><td id='TD11' class='maxwidth20'><input onclick="rowMClick('TR11','TD211','11','73')" type='checkbox' id='CK73'/></td>
<td id='TD211' class='SmallHeader maxwidth30'>Thing6</td><td id='TDx11' class='greytable'>Desc6 373737373 737 37 373 73 3 73 7 37 37373 73 73 73 73 7373 73 73 7 7737373737 373 3 73 7 3737 7 6 73 73 73 73 3 7</td></tr>
<tr id='TR12' onmouseover="rowMOver('TR12','TD212','12','74')" onmouseout="rowMOut('TR12','TD212','12','74')" onclick="rowMClick2('74')"><td id='TD12' class='maxwidth20'><input onclick="rowMClick('TR12','TD212','12','74')" type='checkbox' id='CK74'/></td>
<td id='TD212' class='SmallHeader maxwidth30'>Thing7</td><td id='TDx12' class='greytable'>Desc7</td></tr>
<tr id='TR13' onmouseover="rowMOver('TR13','TD213','13','75')" onmouseout="rowMOut('TR13','TD213','13','75')" onclick="rowMClick2('75')"><td id='TD13' class='maxwidth20'><input onclick="rowMClick('TR13','TD213','13','75')" type='checkbox' id='CK75'/></td>
<td id='TD213' class='SmallHeader maxwidth30'>Thing8</td><td id='TDx13' class='greytable'>Desc8</td></tr>
<tr id='TR14' onmouseover="rowMOver('TR14','TD214','14','76')" onmouseout="rowMOut('TR14','TD214','14','76')" onclick="rowMClick2('76')"><td id='TD14' class='maxwidth20'><input onclick="rowMClick('TR14','TD214','14','76')" type='checkbox' id='CK76'/></td>
<td id='TD214' class='SmallHeader maxwidth30'>Thing9</td><td id='TDx14' class='greytable'>Desc9</td></tr>
</table></form></div>


</table></form></div></div>
</body>
</html>
 
Just noticed an extra link tag in there, removed it to no avail. (hittastic.css)
 
Its your javascript thats causing the problem.
If you remove this line:
Code:
<script type="text/javascript" src="Project_Java.js"/>

The HTML shows in IE, although the script debugger will complain about your javascript.

Let us know your results!

X
 
Fairly tempted to just uninstall Opera and pretend I saw nothing..

Well, thanks for that.. teh next step is figuring out why..

Code:
<!--
function rowMOver(myRow, colX, myNum, myId3)
	{
	var ckBox3  = "CK" +myId3;
	var col1 = "TD"  +myNum;
	var col2 = "TDx" +myNum;
	if (document.getElementById(ckBox3).checked==false)
		{
		document.getElementById(colX) .className = 'highlighter2';
		document.getElementById(myRow).className = 'highlighter';
		document.getElementById(col1).className  = 'highlighter2';
		document.getElementById(col2).className  = 'highlighter3';
		}
		else
			{
			document.getElementById(colX) .className = 'highlighterX SmallHeader';
			document.getElementById(myRow).className = 'highlighterX';
			document.getElementById(col1).className  = 'highlighter2X';
			document.getElementById(col2).className  = 'highlighter3X';
			}
	}

function rowMClick(myRow3, colX2, myNum3, myId)
	{
	var col111 = "TD"  +myNum3;
	var col222 = "TDx" +myNum3;
	var ckBox  = "CK"  +myId;
	var box = document.getElementById(ckBox);
	if (box.checked==true)
		{
		document.getElementById(colX2) .className = 'selected1';
		document.getElementById(myRow3).className = 'selected1';
		document.getElementById(col111).className  = 'selected2';
		document.getElementById(col222).className  = 'selected3';
		}
		else
			{
			document.getElementById(colX2) .className = 'restore1';
			document.getElementById(myRow3)	.className = 'restore1';
			document.getElementById(col111) .className = 'restore1';
			document.getElementById(col222) .className = 'greytable';
			}
	}

function rowMOut(myRow2, colX3, myNum2, myId2)
	{
	var ckBox1  = "CK" +myId2;
	var col11 = "TD"  +myNum2;
	var col22 = "TDx" +myNum2;
	if (document.getElementById(ckBox1).checked==false)
		{
		document.getElementById(myRow2).className = 'restore1';
		document.getElementById(col11) .className = 'restore1';
		document.getElementById(colX3).className = 'restore1 SmallHeader';
		document.getElementById(col22) .className = 'greytable';
		}
		else
			{			
			document.getElementById(colX3).className = 'selected2';
			document.getElementById(myRow2).className = 'selected1';
			document.getElementById(col11).className  = 'selected2';
			document.getElementById(col22).className  = 'selected3';

			}
	}

function rowMClick2(myIdx)
	{
	var ckBox2  = "CK"  +myIdx;
	var box2 = document.getElementById(ckBox2);
	if (box2.checked==true)
		{
		box2.checked=false;
		}
		else
			{
			box2.checked=true;
			}
	}


-->

.. is being rejected.

Something to do with DOMs I'm guessing but this is probably another problem I don't want to think about what it might be..

Javascript is a bit messy, just wanted to get pretty mouse-over effect working for tables - gives me a place to start Googling for problems though.
 
I tried adding a DOM check (using if(document.getElementById)) and that works in firefox.. in opera it still shows a balank page.. so I commented out all the script in the .JS file and it still refuses to do anything so..?

Its not actually the content of the code but something else?

<script blah/> is meant to go in the <head>
 
OK.. hilarity ensues.

<script src="blah"/> BAD
<script src="blah"></script> GOOD

Apparently.

Thanks for your help X, I can go back to doing actually useful stuff now (all of thise for a bloody minor GUI effect!)

 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top