[Kruithne]

Wasn't sure if I should post this in the CSS or Javascript section so I just went with Javascript as it's what the code is in.

Made a small Javascript game, when the player looses it will populate a table which is set to display: none; with the scores and then using the code below show the table...

document.getElementById('scoresTable').style.display = 'table';

This works fine for me in Opera, Google Chrome and Safari .. but not Firefox or IE.

Any suggestions for this would be greatly appreciated.

[forest51690]

try display block?

[Kruithne]

Sorry for taking so long to get back to you, I was out for a few days. I have tried using display block, table, inline and even just setting it to '', but none seem to be working.

[Munawwar]

The code seems to be right. Post the HTML/CSS of the table.

[CTphpnwb]

Yet another reason to encourage users to drop IE: innerHTML is set to read-only for, among other things, styles and tables.

This post has been edited by CTphpnwb: 09 October 2010 - 07:45 AM

[Munawwar]

CTphpnwb, on 09 October 2010 - 05:44 PM, said:

Yet another reason to encourage users to drop IE: innerHTML is set to read-only for, among other things, styles and tables.

Didn't know that. Anyway, he never mentioned he is using innerHTML.

[CTphpnwb]

No, but he is using style, and if IE screws that up with one thing, it's likely to do it with another. Best to simply discourage its use.

[Kruithne]

Thanks for the replies...

About IE and innerHTML - I am using innerHTML in my script but IE handles it fine, another problem IE is having is not changing the background color of table cells using JS, but I don't plan to go to many extents to work around IE, which is just a pile of crap.

Anyway back to the problem at hand.. below is the HTML/CSS/JS involved in the problem ...

HTML:

<h1>High Scores</h1><br/>
<center>
    <table id="scoresTable">
        <tr>
            <td>1.</td>
            <td id="scoreNameSlot1"></td>
            <td id="scoreSlot1"></td>

            <td class="scoreTableDivider"></td>

            <td>11.</td>
            <td id="scoreNameSlot11"></td>
            <td id="scoreSlot11"></td>
        </tr>
        <tr>
            <td>2.</td>
            <td id="scoreNameSlot2"></td>
            <td id="scoreSlot2"></td>

            <td class="scoreTableDivider"></td>

            <td>12.</td>
            <td id="scoreNameSlot12"></td>
            <td id="scoreSlot12"></td>
        </tr>
        <tr>
            <td>3.</td>
            <td id="scoreNameSlot3"></td>
            <td id="scoreSlot3"></td>
            
            <td class="scoreTableDivider"></td>
            
            <td>13.</td>
            <td id="scoreNameSlot13"></td>
            <td id="scoreSlot13"></td>
        </tr>
        <tr>
            <td>4.</td>
            <td id="scoreNameSlot4"></td>
            <td id="scoreSlot4"></td>

            <td class="scoreTableDivider"></td>

            <td>14.</td>
            <td id="scoreNameSlot14"></td>
            <td id="scoreSlot14"></td>
        </tr>
        <tr>
            <td>5.</td>
            <td id="scoreNameSlot5"></td>
            <td id="scoreSlot5"></td>

            <td class="scoreTableDivider"></td>
            
            <td>15.</td>
            <td id="scoreNameSlot15"></td>
            <td id="scoreSlot15"></td>
        </tr>
        <tr>
            <td>6.</td>
            <td id="scoreNameSlot6"></td>
            <td id="scoreSlot6"></td>

            <td class="scoreTableDivider"></td>

            <td>16.</td>
            <td id="scoreNameSlot16"></td>
            <td id="scoreSlot16"></td>
        </tr>
        <tr>
            <td>7.</td>
            <td id="scoreNameSlot7"></td>
            <td id="scoreSlot7"></td>
            
            <td class="scoreTableDivider"></td>
            
            <td>17.</td>
            <td id="scoreNameSlot17"></td>
            <td id="scoreSlot17"></td>
        </tr>
        <tr>
            <td>8.</td>
            <td id="scoreNameSlot8"></td>
            <td id="scoreSlot8"></td>

            <td class="scoreTableDivider"></td>
            
            <td>18.</td>
            <td id="scoreNameSlot18"></td>
            <td id="scoreSlot18"></td>
        </tr>
        <tr>
            <td>9.</td>
            <td id="scoreNameSlot9"></td>
            <td id="scoreSlot9"></td>
            
            <td class="scoreTableDivider"></td>
            
            <td>19.</td>
            <td id="scoreNameSlot19"></td>
            <td id="scoreSlot19"></td>
        </tr>
        <tr>
            <td>10.</td>
            <td id="scoreNameSlot10"></td>
            <td id="scoreSlot10"></td>
            
            <td class="scoreTableDivider"></td>
            
            <td>20.</td>
            <td id="scoreNameSlot20"></td>
            <td id="scoreSlot20"></td>
        </tr>
    </table>
</center>
<span id="scoresError"></span><br/><br/><br/>
<ol class="optionsPanel">
    <li onclick="openGameMenu(0)">Return to Main Menu</li>
</ol>

The CSS for the above elements:

#scoresTable { text-align: center; display: none; font-size: 1.5em; margin: 0 auto; }
#scoresTable td { padding: 1px 20px 1px 20px; }
#scoreTableDivider { width: 40px; }
#scoresError { font-size: 1.5em; text-align: center; display: none; }

Finally the Javascript triggered to show the highscores:

//The varible here was added in to simulate what is populated from a server HTTP request, checked and that part works fine.
highScores = "test1:1000#test2:340#FireFoxTest:280#test:60#Test:40#test:20#test5:10#- - - - - - - - - -:0#- - - - - - - - - -:0#- - - - - - - - - -:0#- - - - - - - - - -:0#- - - - - - - - - -:0#- - - - - - - - - -:0#- - - - - - - - - -:0#- - - - - - - - - -:0#- - - - - - - - - -:0#- - - - - - - - - -:0#- - - - - - - - - -:0#- - - - - - - - - -:0#- - - - - - - - - -:0"


function populateHighScores()
{
    if(highScores == null)
    {
        document.getElementById('scoresTable').style.display = 'none';
        scoresError = document.getElementById('scoresError');
        scoresError.innerHTML = "Sorry, there was an error loading high scores";
        scoresError.style.display = 'inline';
    }
    else
    {
        scoresError.style.display = 'none';
        scores = highScores.split("#");
        for(gs=0; gs<scores.length; gs++)
        {
            score = scores[gs].split(":");
            nextSlot = gs+1;
            document.getElementById('scoreNameSlot' + nextSlot).innerHTML = score[0];
            document.getElementById('scoreSlot' + nextSlot).innerHTML = score[1];
        }
        document.getElementById('scoresTable').style.display = 'block';
    }
}

I think that's everything required, please tell me if something above doesn't match up.

This post has been edited by Kruithne: 10 October 2010 - 05:12 PM

[Munawwar]

display: table; and document.getElementById('scoresTable').style.display = 'table'; works on firefox 3.6. Which ff version you using?
And yes, it doesn't work on IE 8.

[Kruithne]

Using Firefox 3.5.9, hope this doesn't mean it's only supported in 3.6+?

I'm just going to have to loose IE users, the problem being most people who don't even know what a web browser is use the one they get on their computer, which most of the time is Windows with IE, so it's a lot of people.

[Munawwar]

It should work on ff 3.5. Maybe it's something that you are doing wrong.
For IE, the value of display does change to 'table', but IE shows nothing on screen.

Here's the complete code I put into a html file:

<html>
<head>
	<script type="text/javascript">
	//The varible here was added in to simulate what is populated from a server HTTP request, checked and that part works fine.
	highScores = "test1:1000#test2:340#FireFoxTest:280#test:60#Test:40#test:20#test5:10#- - - - - - - - - -:0#- - - - - - - - - -:0#- - - - - - - - - -:0#- - - - - - - - - -:0#- - - - - - - - - -:0#- - - - - - - - - -:0#- - - - - - - - - -:0#- - - - - - - - - -:0#- - - - - - - - - -:0#- - - - - - - - - -:0#- - - - - - - - - -:0#- - - - - - - - - -:0#- - - - - - - - - -:0"

	function populateHighScores()
	{
		if(highScores == null)
		{
			document.getElementById('scoresTable').style.display = 'none';
			scoresError = document.getElementById('scoresError');
			scoresError.innerHTML = "Sorry, there was an error loading high scores";
			scoresError.style.display = 'inline';
		}
		else
		{
			scoresError.style.display = 'none';
			scores = highScores.split("#");
			for(gs=0; gs<scores.length; gs++)
			{
				score = scores[gs].split(":");
				nextSlot = gs+1;
				document.getElementById('scoreNameSlot' + nextSlot).innerHTML = score[0];
				document.getElementById('scoreSlot' + nextSlot).innerHTML = score[1];
			}
			document.getElementById('scoresTable').style.display = 'table';
		}
	}
	</script>
	<style type="text/css">
	#scoresTable { text-align: center; display: none; font-size: 1.5em; margin: 0 auto;}
	#scoresTable td { padding: 1px 20px 1px 20px; }
	#scoreTableDivider { width: 40px; }
	#scoresError { font-size: 1.5em; text-align: center; display: none; }
	</style>
</head>
<body>
	<h1>High Scores</h1><br/>
	
		<table id="scoresTable">
		<tbody>
			<tr>
				<td>1.</td>
				<td id="scoreNameSlot1"></td>
				<td id="scoreSlot1"></td>

				<td class="scoreTableDivider"></td>

				<td>11.</td>
				<td id="scoreNameSlot11"></td>
				<td id="scoreSlot11"></td>
			</tr>
			<tr>
				<td>2.</td>
				<td id="scoreNameSlot2"></td>
				<td id="scoreSlot2"></td>

				<td class="scoreTableDivider"></td>

				<td>12.</td>
				<td id="scoreNameSlot12"></td>
				<td id="scoreSlot12"></td>
			</tr>
			<tr>
				<td>3.</td>
				<td id="scoreNameSlot3"></td>
				<td id="scoreSlot3"></td>
				
				<td class="scoreTableDivider"></td>
				
				<td>13.</td>
				<td id="scoreNameSlot13"></td>
				<td id="scoreSlot13"></td>
			</tr>
			<tr>
				<td>4.</td>
				<td id="scoreNameSlot4"></td>
				<td id="scoreSlot4"></td>

				<td class="scoreTableDivider"></td>

				<td>14.</td>
				<td id="scoreNameSlot14"></td>
				<td id="scoreSlot14"></td>
			</tr>
			<tr>
				<td>5.</td>
				<td id="scoreNameSlot5"></td>
				<td id="scoreSlot5"></td>

				<td class="scoreTableDivider"></td>
				
				<td>15.</td>
				<td id="scoreNameSlot15"></td>
				<td id="scoreSlot15"></td>
			</tr>
			<tr>
				<td>6.</td>
				<td id="scoreNameSlot6"></td>
				<td id="scoreSlot6"></td>

				<td class="scoreTableDivider"></td>

				<td>16.</td>
				<td id="scoreNameSlot16"></td>
				<td id="scoreSlot16"></td>
			</tr>
			<tr>
				<td>7.</td>
				<td id="scoreNameSlot7"></td>
				<td id="scoreSlot7"></td>
				
				<td class="scoreTableDivider"></td>
				
				<td>17.</td>
				<td id="scoreNameSlot17"></td>
				<td id="scoreSlot17"></td>
			</tr>
			<tr>
				<td>8.</td>
				<td id="scoreNameSlot8"></td>
				<td id="scoreSlot8"></td>

				<td class="scoreTableDivider"></td>
				
				<td>18.</td>
				<td id="scoreNameSlot18"></td>
				<td id="scoreSlot18"></td>
			</tr>
			<tr>
				<td>9.</td>
				<td id="scoreNameSlot9"></td>
				<td id="scoreSlot9"></td>
				
				<td class="scoreTableDivider"></td>
				
				<td>19.</td>
				<td id="scoreNameSlot19"></td>
				<td id="scoreSlot19"></td>
			</tr>
			<tr>
				<td>10.</td>
				<td id="scoreNameSlot10"></td>
				<td id="scoreSlot10"></td>
				
				<td class="scoreTableDivider"></td>
				
				<td>20.</td>
				<td id="scoreNameSlot20"></td>
				<td id="scoreSlot20"></td>
			</tr>
		</tbody>
		</table>
	<span id="scoresError"></span><br/><br/><br/>
	<ol class="optionsPanel">
		<li onclick="">Return to Main Menu</li>
	</ol>
	<script type="text/javascript">
		populateHighScores();
	</script>
</body>
</html>

Note I removed <center> tag since it isn't rendering on ff. Added javascript line populateHighScores(); at the end of the body tag.

[Kruithne]

*punches self in the face*

I'm still not sure why this little bug didn't cause problems on the side-copy you made but it did on the actual working one, but it was down to "scoresError.style.display = 'none';" being called but scoresError not actually declared within scope.

Thanks for you help anyway - probably going to ditch IE support