0

I have this horizontal space, that for the life of me; I cannot remove. It's to canvas in their own rows. I've tried multiple configurations, this is my most recent. Any ideas what I am doing wrong?

enter image description here

    <center>
    <table style="border-collapse: collapse;" cellspacing="0%" cellpadding="0">
        <tbody>
        <tr style="border-collapse: collapse">
            <td style="border-collapse: collapse">&nbsp;</td>
            <td style="border-collapse: collapse"><canvas id="gameHud"><</td>
            <td style="border-collapse: collapse">&nbsp;</td>
        </tr>
        <tr>
            <td >&nbsp;</td>
            <td><canvas id="worldMap"></td>
            <td style="vertical-align: top;">&nbsp;<textarea id="log" rows="20" cols="50"></textarea></td>
        </tr>
        <tr  style="border-collapse: collapse">
            <td  style="border-collapse: collapse">&nbsp;</td>
            <td  style="border-collapse: collapse">
                <div>
                    <button onclick="hostGame()">Host Game</button>
                    &nbsp;Host ID: <input id="hostID" type="text" readonly></input>
                    &nbsp;<button onclick="copyGameID()">Copy to Clipboard</button>
                </div>
                <div>&nbsp;</div>
                <div>
                    Host ID: <input id="joinHostID" type="text"></input>
                    &nbsp;<button onclick="join(document.getElementById('joinHostID').value)">Join Game</button>
                </div>
                <div>
                    <input id="chatInput" type="text" size="100"></input>&nbsp;<button onclick="sendMsg(document.getElementById('chatInput').value)">Say</button>
                </div>
                <div>
                    <br>&nbsp;Debug Options:
                    &nbsp;<input type="checkbox" id="green" checked>
                    &nbsp;<label for="green">Green</label>                        
                    &nbsp;<input type="checkbox" id="red">
                    &nbsp;<label for="red">Red</label>
                    &nbsp;<input type="checkbox" id="blue">
                    &nbsp;<label for="blue">Blue</label>   
                                        
                    &nbsp;<input type="checkbox" id="debugMode" onclick="toggleDebug();" checked>
                    &nbsp;<label for="debugMode">Show Grid</label>
                </div>           
            </td>
        <td  style="border-collapse: collapse">&nbsp;</td>
        </tr>
        </tbody>
    </table>
</center>
user10802005
  • 13
  • 3
  • You might like to put your HTML through a validator just to eliminate any possibility that the problem is in the basic code. For example, the center tag is now deprecated and canvas tags should be closed. Could you then make your code into a runnable snippet which shows the problem at the same time getting rid of anything that isn't relevant - to help us help you. See https://stackoverflow.com/help/minimal-reproducible-example – A Haworth Apr 25 '22 at 03:48
  • Did you tried this CSS code? *{margin:0px; padding:0px;} – Vishal Kalansooriya Apr 25 '22 at 05:12
  • Thank you A.Haworth, and Vishal.K for the advice on the HTML validator, and the margin/padding. Although they did not fix the issue at-hand, they helped fix other issues. Much appreciated. – user10802005 Apr 25 '22 at 12:06
  • It seems my post as auto-closed, altough the provided solution was not the same issue that I was having. Too bad... But, I found the answer, and I still want to share it for anyone else who has the same issue in the future. Adding canvas { display:block; } resolved the issue. – user10802005 Apr 25 '22 at 12:22

0 Answers0