Why is IE9 messing with the table border colors?

Okay, the code in question is below. IE9 is screwing with the border colors, showing one side of the borders in bright orange and another side of the borders in grey. I have NO idea why this is happening, and I’ve tried a number of solutions. Bordercolorlight/bordercolordark doesn’t work. My most recent potential solution is declaring the border colors with CSS, which also hasn’t worked. It’s all supposed to be a green/black border combination but IE9 continues to screw it up and make one side of the borders bright orange (and I have no idea why). This one has me stumped, and I would appreciate some help on this.

<!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=utf-8" />
<title>Red Crowned Parrots</title>

<style type="text/css">
<!--
body {
	background-repeat: repeat;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.style1 {font-family: arial, verdana, sans-serif;
	color: #ffffff;
}

a {
	color: #e099c1;
	text-decoration: none;
}

a:visited {
	color: #3C3;
	text-decoration: none;
}

a:hover {
	color: #fc6c03;
	text-decoration: none;
}
.style2 {	font-family: arial, verdana, sans-serif;
	color: #ffffff;
	font-size: 10pt;
}

.style3 { font-family: arial, verdana, sans-serif;
	color: #ffffff;
	font-size: 12pt;
}

.style4 { font-family: arial, verdana, sans-serif;
color: #ffffff;
font-size: 12pt;
}

.style5 { font-family: arial, verdana, sans-serif;
color: #ff0000;
font-size: 13pt;
}

.style6 { font-family: arial, verdana, sans-serif;
color: #fdcb4e;
font-size: 13pt;
}

.style7 { font-family: arial, verdana, sans-serif;
color: #ffffff;
font-size: 12pt;
}

.style8 { font-family: arial, verdana, sans-serif;
color: #ffffff;
font-size: 10pt;
}

.style9 { font-family: arial, verdana, sans-serif;
color: #ffffff;
font-size: 9pt;
}

.style10 { font-family: arial, verdana, sans-serif;
color: #fdcb4e;
font-size: 7pt;
}


body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #FFCC49;
}
a:link {
	color: #3F3;
}
.style4 table tr td center p .style5 {
	font-family: Arial, Helvetica, sans-serif;
}

.style17 {
	font-family: Arial, Helvetica, sans-serif;
	color: #CCF;
	font-size: 13pt;
}



.tablestyle1 {
	border-bottom-color: #035401;
	border-left-color: #035401;
	border-top-color: #035401;
	border-right-color: #035401;
	border-color: #035401;
}



-->
</style>

</head>

<body>
<table width="836" border="5" class="tablestyle1" cellspacing="2" cellpadding="2" bgcolor="#000000">
  <tr>
    <td width="370" valign="top" class="style4"><table width="200" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><center>
          <p><img src="gallery_title.jpg" width="150" height="68" alt="Gallery" /><br />
            <span class="style5"><strong>Red-crowned Parrot</strong></span><br />
            <span class="style10">(Some photos may include hybrids)

            </span></p>
</center></td>
      </tr>
      <tr>
        <td align="center">
          <p class="style5"><span class="style8">1 of 100</span></p>
          <p class="style5"><strong class="style6">&quot;Spotlight&quot;</strong><br />
            <span class="style9">RCP-01-24H9728</span></p>
          <p class="style5">&nbsp;</p>
          <p class="style8"><img src="paypal_btn_cart_LG.gif" width="120" height="26" alt="PayPal" /></p>
  <p class="style8"><a href="http://thisistheurl.com"><strong class="style8"><</strong></a><a href="galleries_all.html"> All Galleries</a> <strong>|</strong> <a href="RCP-02-24H8581.html">Next Photo</a><a href="http://thisistheurl.com"> <strong class="style8">></strong></a><br />
    <a href="galleries_all.html"></a></p>
  <p class="style7">&nbsp;</p>
  <p class="style8">© Name of photographers - (this is the URL)</p></td>
      </tr>
    </table></td>
    <td width="475"><img src="RCP-01-24H9728.jpg" width="610" height="471" alt="Red-crowned Parrot" /></td>
  </tr>
</table>
</body>
</html>

Looks much the same in FF and IE9 to me.

The cell with the orange border is picking it up from this rule

body, td, th {
  [COLOR="Red"]color: #FFCC49;[/COLOR]
  font-family: Arial,Helvetica,sans-serif;
  font-size: 24px;
}

The other cell has this overridden by

.style4 {
  [COLOR="Red"]color: #FFFFFF;[/COLOR]
  font-family: arial,verdana,sans-serif;
  font-size: 12pt;
}

Okay, that worked…I’ve removed the offending code and made some modifications just for IE9 and these got rid of the orange border. However, now IE9 still shows a grey border on the inside table (I want all borders green). I’ve tried a few more things, and I’ve even looked up the hex code of the border, but it doesn’t show up anywhere in the files I’m using to load this page. It doesn’t show up anywhere in the code for this page either. How can a grey border be showing up anyway when I have no code that’s applying it? That I know of anyway…


<!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=utf-8" />
<title>Red Crowned Parrots</title>

<style type="text/css">
<!--
body {
	background-repeat: repeat;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

.style1 {font-family: arial, verdana, sans-serif; 
	color: #ffffff;
}

a {
	color: #e099c1;
	text-decoration: none;
}

a:visited {
	color: #3C3;
	text-decoration: none;
}

a:hover {
	color: #fc6c03;
	text-decoration: none;
}
.style2 {	font-family: arial, verdana, sans-serif; 
	color: #ffffff;
	font-size: 10pt;
}

.style3 { font-family: arial, verdana, sans-serif; 
	color: #ffffff;
	font-size: 12pt;
}

.style5 { font-family: arial, verdana, sans-serif; 
color: #ff0000;
font-size: 13pt; 
}

.style6 { font-family: arial, verdana, sans-serif; 
color: #fdcb4e;
font-size: 13pt; 
}

.style7 { font-family: arial, verdana, sans-serif; 
color: #ffffff;
font-size: 12pt; 
}

.style8 { font-family: arial, verdana, sans-serif; 
color: #ffffff;
font-size: 10pt; 
}

.style9 { font-family: arial, verdana, sans-serif; 
color: #ffffff;
font-size: 9pt; 
}

.style10 { font-family: arial, verdana, sans-serif; 
color: #fdcb4e;
font-size: 7pt; 
}

a:link {
	color: #3F3;
}



-->
</style>

</head>

<body>

<table width="836" border="5" bordercolor="#035401" bordercolorlight="#035401" bordercolordark="#035401" cellspacing="2" cellpadding="2" bgcolor="#000000">
  <tr>
    <td width="370" valign="top"><table width="200" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><center>
          <p><img src="gallery_title.jpg" width="150" height="68" alt="Gallery" /><br />
            <span class="style5"><strong>Red-crowned Parrot</strong></span><br />
            <span class="style10">(Some photos may include hybrids)
            
            </span></p>
</center></td>
      </tr>
      <tr>
        <td align="center">
          <p class="style5"><span class="style8">1 of 100</span></p>
          <p class="style5"><strong class="style6">&quot;Spotlight&quot;</strong><br />
            <span class="style9">RCP-01-24H9728</span></p>
          <p class="style5">&nbsp;</p>
          <p class="style8"><img src="paypal_btn_cart_LG.gif" width="120" height="26" alt="PayPal" /></p>
  <p class="style8"><a href="http://websiteurl.com/"><strong class="style8"><</strong></a><a href="galleries_all.html"> All Galleries</a> <strong>|</strong> <a href="RCP-02-24H8581.html">Next Photo</a><a href="http://websiteurl.com/"> <strong class="style8">></strong></a><br />
    <a href="galleries_all.html"></a></p>
  <p class="style7">&nbsp;</p>
  <p class="style8">© Name of photographers - websiteurl.com</p></td>
      </tr>
    </table></td>
    <td width="475"><img src="RCP-01-24H9728.jpg" width="610" height="471" alt="Red-crowned Parrot" /></td>
  </tr>
</table>
</body>
</html>

The problem is in Firefox as well. It is because you are giving all the cells in the table a border by using the “border” attribute on the table instead of using CSS. The light color that you are seeing is made when IE/Firefox/Other-Browser tries to make an offset border style, the top is lighter then the bottom or vise versa. Use CSS not HTML attributes to style the borders.

Agreed with logic_earth… I’ll add to it that you don’t need border=0 in the markup either. You can deal with all borders purely in CSS.

I see a lot sites using CSS who still have “border=0” in their markup, for no good reason.

Thank you all!! I wrote brand-new code for the tables (without border=0) via CSS and it works splendidly on all browsers.

Thanks again.

Another convert to the cult! halleluja brotha amen

welcome to the Web Standards Evangelical Movement