CODEWITHSUNDEEP
javascripthtmlcssfirefox
Julian Lachniet
Julian Lachniet

Reputation: 323

Firefox cutting off bottom of table

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?

Upvotes: 0

Views: 944

Answers (1)

Alex Kudryashev
Alex Kudryashev

Reputation: 9470

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;
    }

Upvotes: 2

Related Questions