This is the content of my HTML document.
<BODY>
<button id="b1" onclick="load()">Play</button>
<canvas id="c1" onclick="f_clicked(this.id,1)">
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="c2" onclick="f_clicked(this.id,2)">
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="c3" onclick="f_clicked(this.id,3)">
Your browser does not support the HTML5 canvas tag.
</canvas>
<br>
<canvas id="c4" onclick="f_clicked(this.id,4)">
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="c5" onclick="f_clicked(this.id,5)">
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="c6" onclick="f_clicked(this.id,6)">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
Here is the CSS code:
body{
background - color: gray;
}
button {
height: 40px;
width: 40px;
}
canvas {
width: 100px;
height: 100px;
border: 1px solid #000000; display:none; }
The desired layout should be as follows: The first row contains the first 3 canvas elements and the second row contains the next 3. There should be a gap of 20px between each canvas element.
Browser Behavior: In Chrome, there is a collapse between the second row elements, while Firefox displays the expected results for both rows.
Can anyone explain why Chrome behaves differently in this case?