Checkers in XHTML/CSS

[Man In Tan]

I'm having issues with a checkerboard I'm working on <label /> tags are getting stretched for no good reason. Any idea on how to fix this would be greatly appreciated! Oddly enough, it looks right in a friend's Internet Explorer, but not in my Safari.Sorry, I would use the [img/] tags, but this site is complaining about bad file extensions. Why does it care? Who knows.Should look like:http://0gb.us/?temp1Instead looks like:http://0gb.us/?temp2

div.tr {display: table-row;} /* Checkers: */div#checkers {display: table;background-color: DarkOliveGreen;width: 450px;height: 450px;margin: auto;border: 1px solid black;border-collapse: collapse;} div.checkerboard-red {display: table-cell;background-color: DarkKhaki;color: black;width: 50px;height: 50px;} label.checkerboard {display: table-cell;padding: 0px;width: 50px;height: 50px;overflow: hidden;} input.checkerboard-black {display: block;margin: 0px;color: red;width: 50px;height: 50px;background-color: DarkOliveGreen;border: none;} div.checkerboard-vborder {display: table-cell;width: 25px;height: 50px;text-align: center;background-color: SaddleBrown;} div.checkerboard-hborder {display: table-cell;width: 50px;height: 25px;text-align: center;background-color: SaddleBrown;} div.checkerboard-cborder {display: table-cell;width: 25px;height: 25px;background-color: SaddleBrown;} input.checker-red {display: block;margin: 0px;color: red;width: 50px;height: 50px;background-image: url(/Miscellaneous/png.php?png=Red+Checker);background-attachment: scroll;background-repeat: no-repeat;background-position: center;background-color: DarkOliveGreen;border: none;} input.checker-black {display: block;margin: 0px;color: red;width: 50px;height: 50px;background-image: url(/Miscellaneous/png.php?png=Black+Checker);background-attachment: scroll;background-repeat: no-repeat;background-position: center;background-color: DarkOliveGreen;border: none;} input.selected, input#movefrom, input#moveto {display: block;margin: 0px;background-color: LightSeaGreen;}

<div id="checkers"><div class="tr"><div class="checkerboard-cborder"></div><div class="checkerboard-hborder">1</div><div class="checkerboard-hborder">2</div><div class="checkerboard-cborder"></div></div><div class="tr"><div class="checkerboard-vborder">A</div><div class="checkerboard-red"></div><label class="checkerboard"><input type="button" class="checker-red" onclick="us_0gb__checkers_capture(0)" name="0" /></label><div class="checkerboard-red"></div><label class="checkerboard"><input type="button" class="checker-red" onclick="us_0gb__checkers_capture(1)" name="1" /></label><div class="checkerboard-vborder">A</div></div><div class="tr"><div class="checkerboard-vborder">B</div><label class="checkerboard"><input type="button" class="checker-red" onclick="us_0gb__checkers_capture(4)" name="4" /></label><div class="checkerboard-red"></div><label class="checkerboard"><input type="button" class="checker-red" onclick="us_0gb__checkers_capture(5)" name="5" /></label><div class="checkerboard-vborder">B</div></div><div class="tr"><div class="checkerboard-cborder"></div><div class="checkerboard-hborder">1</div><div class="checkerboard-hborder">2</div><div class="checkerboard-cborder"></div></div></div>

Edited March 30, 2012 by Man In Tan