11 Replies - 1548 Views - Last Post: 12 October 2010 - 05:42 AM

#1 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Displaying a table in Firefox or IE...

Posted 30 September 2010 - 03:55 PM

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. :P

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.

Is This A Good Question/Topic? 0
  • +

Replies To: Displaying a table in Firefox or IE...

#2 forest51690  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 58
  • View blog
  • Posts: 340
  • Joined: 20-March 09

Re: Displaying a table in Firefox or IE...

Posted 30 September 2010 - 05:06 PM

try display block?
Was This Post Helpful? 0
  • +
  • -

#3 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: Displaying a table in Firefox or IE...

Posted 08 October 2010 - 04:10 PM

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.
Was This Post Helpful? 0
  • +
  • -

#4 Munawwar  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 162
  • View blog
  • Posts: 457
  • Joined: 20-January 10

Re: Displaying a table in Firefox or IE...

Posted 08 October 2010 - 10:38 PM

The code seems to be right. Post the HTML/CSS of the table.
Was This Post Helpful? 0
  • +
  • -

#5 CTphpnwb  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 2993
  • View blog
  • Posts: 10,342
  • Joined: 08-August 08

Re: Displaying a table in Firefox or IE...

Posted 09 October 2010 - 07:44 AM

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

Was This Post Helpful? 1
  • +
  • -

#6 Munawwar  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 162
  • View blog
  • Posts: 457
  • Joined: 20-January 10

Re: Displaying a table in Firefox or IE...

Posted 09 October 2010 - 07:55 AM

View PostCTphpnwb, 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.
Was This Post Helpful? 0
  • +
  • -

#7 CTphpnwb  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 2993
  • View blog
  • Posts: 10,342
  • Joined: 08-August 08

Re: Displaying a table in Firefox or IE...

Posted 09 October 2010 - 08:16 AM

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.
Was This Post Helpful? 0
  • +
  • -

#8 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: Displaying a table in Firefox or IE...

Posted 10 October 2010 - 05:10 PM

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. :P

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

Was This Post Helpful? 0
  • +
  • -

#9 Munawwar  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 162
  • View blog
  • Posts: 457
  • Joined: 20-January 10

Re: Displaying a table in Firefox or IE...

Posted 11 October 2010 - 04:16 AM

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.
Was This Post Helpful? 0
  • +
  • -

#10 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: Displaying a table in Firefox or IE...

Posted 11 October 2010 - 06:35 AM

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.
Was This Post Helpful? 0
  • +
  • -

#11 Munawwar  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 162
  • View blog
  • Posts: 457
  • Joined: 20-January 10

Re: Displaying a table in Firefox or IE...

Posted 11 October 2010 - 09:36 AM

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.
Was This Post Helpful? 1
  • +
  • -

#12 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: Displaying a table in Firefox or IE...

Posted 12 October 2010 - 05:42 AM

*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 :P
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1