Firefox cutting off bottom of table

Question

Edit: Updated the code slightly based on your comments.

Edit 2: Live example: lachniet.com/chessboard

I'm trying to use a combination of HTML, CSS, and JS to draw out an empty chessboard. My code with CSS and JS inline is this:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>TitaniumChess</title>
  <style>

html,body {
  margin: 0;
  padding: 0;
}

#board {
  border: 1px solid #000;
  border-collapse: collapse;
  float: left;
  height: 50vw;
  width: 50vw;
}

.tile-white {
  height: 12.5%;
  width: 12.5%;
}

.tile-black {
  background-color: #000;
  color: #fff;
  height: 12.5%;
  width: 12.5%;
}

  </style>
</head>
<body>
<table id="board"></table>
<script>

var board = document.getElementById('board');
var draw = '';
var letters = 'abcdefgh';
for (var column = 8; column > 0; column--) {
  draw += '<tr id="' + column + '">';
  for (var row = 0; row < 8; row++) {
    draw += '<td id="' + letters.charAt(row) + column + '" class="';
    if ((row + column) % 2 == 1) {
      draw += 'tile-black';
    } else {
      draw += 'tile-white';
    }
    draw += '">test</td>';
  }
  draw += '</tr>';
}
board.innerHTML = draw;

</script>
</body>
</html>

Now, this code works perfectly fine for me in Chrome 52. However, in Firefox 47, the bottom row is cut off. Surprisingly, this code works fine even in IE 11, and Edge 12 (All on Windows 10 Enterprise 64-Bit).

This seems to be a problem specific to Firefox. Does anyone have any idea why?

`document.body.style.margin = '0px';`? why not CSS `body{margin:0;}` Also, if not necessary don't use `document.write`. http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — Roko C. Buljan, Aug 07 '16 at 19:23
Like @RokoC.Buljan's this is a note about slimming your js by using css instead: you could do `#board {border-collapse: collapse;height: 40vw;width: 40vw;} #board td {border: 1px solid #000;height: 12.5%;} #board tr:nth-child(odd) td:nth-child(even), #board tr:nth-child(even) td:nth-child(odd) {background: #000;color: #fff;}` and then simply `for (var row = 0; row < 8; row++) {draw += '';}` — henry, Aug 07 '16 at 19:46
Could you give us a screenshot of the problem? Those that can't use FF for whatever reason could still give their best guess, or suggest things to try. — Whothehellisthat, Aug 07 '16 at 20:15
Also, here's a jsFiddle for anyone who wants to run it. https://jsfiddle.net/zxy5fh6a/ — Whothehellisthat, Aug 07 '16 at 20:16

score 2 · Accepted Answer · answered Aug 07 '16 at 22:05

The problem is in hidden borders and paddings. Also browser recalculates height if the sum less than 100%. This is css which works for me in Edge, FF, and GC.

    html, body {
        margin: 0;
        padding: 0;
    }
    #board {
        float: left;
        height: 50vw;
        width: 50vw;
        border: 1px solid #000;
        border-collapse: collapse;
        padding:0;
    }
    #board td{ /*All td are created equal*/
        height: 10%; /*Let browser recalculate*/
        width: 12.5%;
        border:none 0px; /*remove borders explicitly */
        padding:0;
    }
    .tile-white {
    }
    .tile-black {
        background-color: #000;
        color: #fff;
    }

As a bonus, you don't need .tile-black and .tile-white classes.

    /*Odd td in even tr and even td in odd tr*/
    #board tr:nth-child(2n) td:nth-child(2n+1),
    #board tr:nth-child(2n+1) td:nth-child(2n)
    {
        background-color: #000;
        color: #fff;
    }

Firefox cutting off bottom of table

1 Answers1