question on .tpl and <div id="board"

[Ditto11]

Hi, I'm working on a copy of the basic "Chess" game, as a learning sandbox .. just reading over code, changing things to see the effect, and .. well . learning. I've however, hit a snag in understanding something.

in the Chess game, we have the following snippet from chess.tpl:

Code: Select all

	<div id="board" class="{BOARD_TYPE}">
	

and in chess.css:

Code: Select all

#board {
   display: inline-block;
   margin: 1%;
   position: relative;
   border: 8px outset #663300;   
   margin-top: 20px;
}

There's also a reference in chess.js, however, I'm not too concerned about that one for now. My question pertains to the above.

as I understand <div id="xxx">
it defines a division, with a unique identifier of "xxx" .. so it can be referenced specifically later.

and the matching entry in .css provides formatting options ..

ok .. great ..

so I should be able to change the id name of it:
from: "board" to "board_0" (ultimate goal - I'm trying to display multiple boards at same time )

However, as soon as I update the .tpl to:

Code: Select all

	<div id="board_0" class="{BOARD_TYPE}">
	

and the .css to:

Code: Select all

#board_0 {
   display: inline-block;
   margin: 1%;
   position: relative;
   border: 8px outset #663300;   
   margin-top: 20px;
}

the board still displays .. however the formatting is gone: not centered .. no border ..etc.

For some reason, it seems to not match up with the .css entry ?

Am I doing this right ?

[thoun]

You propably forgot to force refresh (CtrlF5) for CSS, common mistake.

[Ditto11]

You propably forgot to force refresh (CtrlF5) for CSS, common mistake.

SON OF A ... O.o

I've been doing that quite regularly ... but for some reason, this particular time .. I forgot to do it ... *sigh*

Thank you!