After scratching my head a bit over this project, I managed to finish it!
This was one of the first times that I really worked to make something cross-browser-compatible. In my previous post I wrote about having problems with Firefox rounding up decimal places. Since the size of the squares changed when the user changed the number of squares in the grid, this quickly became a problem: squares were rounded up from 7.8125px wide to 8px, and squares which no longer fit on a single line inside of the 500px wide container were pushed onto the next line.
Originally, I had used jQuery to generate the total number of squares required for the grid, and used the dimensions of the container to arrange the squares into a square shape. The total area size of the grid wasn’t meant to change at all, but there appeared to me to be no way I could change the way browsers rounded decimals, so I ended up not using a width property on the container so that it could expand if the number of pixels was rounded up. Strictly speaking, this means that the total size of the grid does change, but given my [apparent lack of] options, I thought that this was the best way forward.
The problem made me recall an article I’d read recently on designing for responsive and cross-browser support. The author said that the goal wasn’t to make a website or element look exactly the same in every browser, but to make it function the way that it should. I took this to mean that instead of fighting Firefox to try to fit everything inside 500px, I should use the 500px dimension to calculate the size that each square should be, and then adjust my layout so that it can conform to the output.
I really enjoyed this project; there were a few challenges involved, so I really felt as though I’d accomplished something when I’d finished. I’m tempted to look out for similar ones, or I may just make this again, this time making it as efficient as I can. I’d love to hear from anyone who’s done this project, or something like it.