Need some help with Tic Tac Toe game!

1

Hi I am currently working on the tic tac toe game for the advanced projects section and I have a question I can’t seem to figure out how to solve through google searching. Here is the link to the project.

The JavaScript portion isn’t done, that’s not what the question is on. You see, after you pick X or O and get to the tic tac toe board. You can start clicking on each space, the X or O is placed, and the border of each button begins moving around by a few pixels or so. I figured this was a padding issue so I added padding: 0; to each of the button:active elements on CSS but still no luck on them staying in place after they are clicked.

How can I go about fixing this issue?

-Thank you for the help!

1 Like
2

put in your css:

td {
  line-height: 0;
}

basically the text is stretching the box. There are a couple of other ways to fix it, but this is the simplest.

1 Like
3

Oh okay. Thanks a lot man. Glad it was a simple fix.

4

You have awesome design

1 Like
5

Thanks a lot I appreciate that. I think I have a better eye for design than the mind for the js logic right now. The advanced projects really take a lot of thinking and can be frustrating at times. :smile: