0

I've found this answer, but it doesn't cover my problem: Are empty divs bad?

I have a tic-tac-toe game illustration, which looks roughly like this:

    <div class="tic-tac-toe">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

And the CSS, relevant bits:

.tic-tac-toe {
    display: block;
    width: 109pt;
    height: 109pt;
    text-align: center;
    margin: auto;
}
.tic-tac-toe div {
    width: 32pt;
    height: 26pt;
    font-family: monospace;
    font-weight: bold;
    padding-top: 6pt;
    background-color: #555;
    float: left;
    margin: 0;
    -moz-box-shadow: 3px 3px 4px #909090;
    -webkit-box-shadow: 3px 3px 4px #909090;
    box-shadow: 3px 3px 4px #909090;
}
.tic-tac-toe div:nth-child(1),
.tic-tac-toe div:nth-child(4),
.tic-tac-toe div:nth-child(7) {
    margin-right: 6pt;
}
. . . /* for other sides */

There are some CSS at work here and a bit of JavaScript. Is there anything I could use instead of divs? I really need just a square block I can paint the background and put a letter "X" or "O" inside. What am I to do?

Community
  • 1
  • 1
  • It really doesn't *matter* what you use, so long as it makes sense to you (and is programatically compatible with whatever JavaScript, or other language, you're using). – David Thomas May 12 '13 at 15:54
  • The fact that the element is a div is irrelevant. Empty elements should be avoided (though they understandably exist at times due to dynamic content). If the elements are meant to be dynamically filled in at a later time, then they technically aren't empty elements anymore. One could argue that a tic-tac-toe board is tabular data, since its just a chess board on a smaller scale. – cimmanon May 12 '13 at 16:25

3 Answers3

1

Not necessarily bad per-se, but some browsers handle it differently. For example, old IE and Firefox used to make empty divs hidden. I remember a lot of &nbsp;s hanging around to keep a temporary div still visible until its content is replaced with something else.

casraf
  • 21,085
  • 9
  • 56
  • 91
0

You could easily implement this, by using classes for marking the divs with x's and o's.

Here is an example of how you could do that:

.tic-tac-toe > div.x:before {
    content: 'X';
}
.tic-tac-toe > div.o:before {
    content: 'O';
}

I made this short fiddle with a little javascript which tags the divs with x and o randomly on click, using the classes above.

Check out this fiddle: http://jsfiddle.net/En3DV/

JAM
  • 6,045
  • 1
  • 32
  • 48
0

Use a table and fill it with &nbsp; for each cell. (You will probably want to label the cells.)            

Qvcool
  • 460
  • 3
  • 10