HTML and CSS

Border problems. Not working in Firefox

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Jan 2008

Posts: 3,818

Reputation: VernonDozier has a reputation beyond repute

Solved Threads: 501

VernonDozier VernonDozier is offline

Offline

Senior Poster

Border problems. Not working in Firefox

Jan 17th, 2009

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.

 Help with Code Tags 
 HTML Syntax (Toggle Plain Text) 
<!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>
<!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>

Attached Images

	iecapture.bmp (868.7 KB, 4 views)
	firefoxcapture.bmp (822.5 KB, 3 views)

•

Join Date: Jan 2009

Posts: 1,326

Reputation: almostbob has a spectacular aura about

Solved Threads: 162

almostbob

Online

Nearly a Posting Virtuoso

Re: Border problems. Not working in Firefox

Jan 18th, 2009

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<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>
<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

Last edited by almostbob; Jan 18th, 2009 at 1:47 am.

Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved

•

Join Date: Nov 2007

Posts: 45

Reputation: colweb is an unknown quantity at this point

Solved Threads: 1

colweb

Offline

Light Poster

Re: Border problems. Not working in Firefox

Jan 18th, 2009

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

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<td style="border:thin solid #33ff00; border-bottom:thick solid #CC3333">&nbsp;</td>
<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.

•

Join Date: Jan 2008

Posts: 3,818

Reputation: VernonDozier has a reputation beyond repute

Solved Threads: 501

VernonDozier VernonDozier is offline

Offline

Senior Poster

Re: Border problems. Not working in Firefox

Jan 18th, 2009

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.