Different HTML rendering on Chrome/Firefox - tic tac toe

1

Hi FCC,

I’ve have essentially finished up my tic-tac-toe logic. While the game is complete I would like to make it look a little better.

My game has a menu (.config-menu) that allows the user to select, 1 or 2 player mode and X or O. I’ve noticed that in chrome the menu is horizontally and vertically displayed to the user (this is what I intend). However in Firefox, this is not the case. In Firefox the menu is floated off to the right for some reason and I am not sure why? I’ve used flexbox for my simple layout and I was under the impression that Firefox supported Flexbox fully?

Could anyone shed some insight? Thanks so much! You can view my pen here:

2

FLEXBOX is not full supported in all browsers, as you supposed.
I suggest you to go to http://caniuse.com/ and see what thing, property or value you are using that is not working.

3

Looks like adding the following properties to your .config-menu element fixes the issue in Chrome and Firefox

left: 0;
right: 0;
margin: auto;

1 Like
4

Sorry does this site not say it is supported? Am I reading it wrong?

5

Thanks for the quick fix @vdineva!