I've been designing a Tic-Tac-Toe game using a 3 x 3 table. Different cells will have different borders: border-right will exist for left two columns cells, border-bottom will exist for top two rows of cells. It's working the way I think it should in Internet Explorer, but not in Firefox. There is a red line in the Internet Explorer table, which is what I want (I made a single red line just to demonstrate here), but not int Firefox. Please see the code and the two photos. The relevant line is line 26. The border-bottom appears to have no effect in Firefox.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>




<body>
<table width="586" height="493" border="15" cellpadding="0" cellspacing="0" bordercolor="#9933CC">
  <tr>
    <td bordercolor="#6666FF">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td style="border-bottom:thick #CC3333" bordercolor="#33FF00">&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

Recommended Answers

All 3 Replies

<table rules='all' border='0'>
<tr><td>X<td>&nbsp;<td>&nbsp;
<tr><td>&nbsp;<td>X<td>&nbsp;
<tr><td>O<td>O<td>X
</table>

theres no need for anything fancy, table has a rules property that does what you ask

Just change line 26 to this: (tested in Firefox 3.0.5 under Linux)

<td style="border:thin solid #33ff00; border-bottom:thick solid #CC3333">&nbsp;</td>

This gives a cell with green borders and a thicker red bottom border.

Thanks guys. Those suggestions are both useful. Thanks, colweb. I was banging my head against the wall. Perhaps Internet Explorer let me get away with something it shouldn't have and Firefox was a bit more picky? Anyway, it was driving me crazy. Thanks again.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.