background color in ie

Hi
i have this style
#td1{
      border:1px solid #000;
        background-color:#fff;
        font-size:90%;
         
}      
echo"<td id='td1'>$unit<b> has not reported in for</b> :$days $day</td>";

in firefox it works perfect but in ie it shows a black banner
it is like this style not working in IE
ANY help please
asaidiAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kim WalkerWeb Programmer/TechnicianCommented:
Do you have any other elements with the same id (td1)? Can you post the full page? We need to see if anything else is interfering or if the cascade is being applied differently in IE.
0
Tony van SchaikFront-end Web developerCommented:
I can't see any issues with your code it works in all IE versions the same. Do you have the full HTML source code of your page so that i can view it?
0
asaidiAuthor Commented:
Hi
please find attached page source from browser
  </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=windows-1252' />
<title>CAMPION The Power Behind The Water</title>
<style type="text/css"  >
#fixed {
    position: absolute;
    top: 0;
    left: 0;
    width: 10em;
    height: 100%;
}
@media print {
input#btnPrint {
display: none;
}
}    
@media screen{
    .imgs1 {
       position:absolute;
       width:30%;
       height:15%;
       top:-6px;
       left:0;
      }
  } 
#table2 {
     
 border:1px ;
      border-collapse:collapse;
      font-family:arial,sans-serif;
      font-size:90%;
        width:100%;      
        height:100%;
       background-color:#9de;

}

#tab{
       position:relative;
        top:-90px;  
        left: 580px;
	border=0;
	background-color:#FFF;
        font-size:70%;
        border:0px ;
}
#table4{
        border:3px solid #fff;
        position:relative;
        top:-5px;  
        
}
table {
	border:1px solid #000;
	border-collapse:collapse;
	font-size:70%;
}
#td1{
	border:1px solid #000; 
        background-color:#fff;
        font-size:90%;
         
}	
#td11{
	 
        background-color:#fff;
}

#td3{
        position:relative;
        top:1450px;
        border:0  ;
	border-collapse:collapse;
	padding:5px; 
        background-color:#fff;
}

#td2{
	 background-color: rgb(255,255,0); /* Needed for IEs */

        -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
        -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
        box-shadow: 5px 5px 5px rgba(68,68,68,0.6);

	
}	

td,th{
	 
	border-collapse:collapse;
	padding:5px;
         
}	
#fn,#dp,#ar{width:110px;font-weight:normal;}
#fr,#to{width:90px;font-weight:normal; }
caption{
	background:#ccc;
	font-size:100%;
	border:1px solid #000;
	border-bottom:none;
	padding:20px 0 0 0;
	text-align:left;
}
thead th{
	background-color:#9cf;
	text-align:left;
}
tbody th{
	text-align:left;
	background:#69c;
}
 

tfoot td{
	text-align:left;
	font-weight:bold;
	background:#08ABF6;
          
}

tbody td{
	background:#fff;	
        
}
tbody tr.odd td{
	background:#ccc;
        
}
div.ex
{
top:-40px;
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
} 
</style>
<script language='JavaScript'>
DA = (document.all) ? 1 : 0
 
function HandleError()
{
alert('\nNothing was printed. \n\nIf you do want to print this page, then\nclick on the printer icon in the toolbar above.')
return true;
}
</script>
</head>  
<body>
<img src="campion.png" alt="Campion the power in the water"></img>    
<!-- The outter table to contain the form and the instruction panel -->

<h2>Welcome Screen</h2>  

<table id='table2'><summary="Welcome screen.">
  <thead>

<tr>
      <td> Welcome : <b>PatTreacy</b> </td>
       
      <td>Last Login : <b>14-03-2012</b></td><td>No of logs:<b>112</b></td> </tr>

<tr> 
      <td>User Type : <b>Account Customer</b></td>  
      <td>User Status : <b>Suspended</b></td> </tr> 
<tr>  <td>Valid Until : <b>12-12-2031</b></td></tr>  
 

<tr><td>User Message </td></tr>
<tr><td><TEXTAREA name="data" ROWS=3 COLS=30 readonly="yes">Test Message For Pat</TEXTAREA></td></tr>
    

<th>System</th>
<tr>
      <td>No of systems :<b>1</b></td>   
      <td>No of Meters :<b>18</b></td> </tr>
<tr>
     
      <td>No of Accounts :<b>1</b></td> </tr>  

<tr>  <td>No of Customers :<b>1</b></td> </tr>      
  
<hr>
<th>System Overview</th>

<tr><td>Water Recorded Yesterday:==><b></b> </td></tr>
 
<tr><td>This Week:==><b>1817510</b> </td></tr>

<tr><td>This Month :==><b>1817510</b></td></tr>  
<tr><td bgcolor='#69c'><b> Any Issues</b></td></tr>
 <h4 align="center">Any Issues</h4> 
<td><select name=student size='4'>Any Issues </option><option><b>Knockadeen Lane Freneystown Bulk 2</b> has not reported in for :<b>1</b> day</option><option><b>Barnafae Line Bulk 3</b> has not reported in for :<b>11</b> days</option><option><b>Break Tank</b> has not reported in for :<b>1</b> day</option><option><b>Castlewarren Bulk 5 On Main Line</b> has not reported in for :<b>13</b> days</option><option><b>Ossory Hill Bulk 2</b> has not reported in for :<b>10</b> days</option><option><b>Freneystown Bulk 2</b> has not reported in for :<b>23</b> days</option><option><b>Flagmount Bulk 3</b> has not reported in for :<b>29</b> days</option><option><b>Reevanagh Bulk Meter</b> has not reported in for :<b>23</b> days</option><option><b>Garthhill Freneystown</b> has not reported in for :<b>23</b> days</option><option><b>Reservoir Unit 1</b> has not reported in for :<b>19</b> days</option><option><b>Bulk Meter Upper Coolgreaney</b> has not reported in for :<b>23</b> days</option><option><b>Knockadeen Bulk 6 on Main Line</b> has not reported in for :<b>4</b> days</option><option><b>Castlewarren Bulk 4 on Main Line</b> has not reported in for :<b>23</b> days</option><option><b>Castlewarren Bulk 3 on Main Line</b> has not reported in for :<b>1</b> day</option><option><b>Barnafae Line Bulk 2</b> has not reported in for :<b>1</b> day</option><option><b>Coolmarks Bulk 2 On Main Line</b> has not reported in for :<b>1</b> day</option><option><b>Reservoir Unit 2</b> has not reported in for :<b>1</b> day</option></select></td>  

<tr><td>Alarms detected this Month :</td></tr>

 
  </thead>

 
 </table> 
<input type="button" id="btnPrint"onclick="window.location.href='menu.php?auto_id=1'" value='Enter'disabled = "disabled">
<input type="button" id="btnPrint"onclick="window.location.href='loging.php?>'" value='Exit'>

Open in new window

0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Kim WalkerWeb Programmer/TechnicianCommented:
This is incomplete. It doesn't include the td you're asking about.
0
asaidiAuthor Commented:
Hi
check the internet one maybe in my localhost i have changed a bit of my code
  </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=windows-1252' />
<title>CAMPION The Power Behind The Water</title>
<style type="text/css"  >
#fixed {
    position: absolute;
    top: 0;
    left: 0;
    width: 10em;
    height: 100%;
}
@media print {
input#btnPrint {
display: none;
}
}    
@media screen{
    .imgs1 {
       position:absolute;
       width:30%;
       height:15%;
       top:-6px;
       left:0;
      }
  } 
#table2 {
     
 border:1px ;
      border-collapse:collapse;
      font-family:arial,sans-serif;
      font-size:90%;
        width:100%;      
        height:100%;
       background-color:#9de;

}

#tab{
       position:relative;
        top:-90px;  
        left: 580px;
	border=0;
	background-color:#FFF;
        font-size:70%;
        border:0px ;
}
#table4{
        border:3px solid #fff;
        position:relative;
        top:-5px;  
        
}
table {
	border:1px solid #000;
	border-collapse:collapse;
	font-size:70%;
}
#td1{
	border:1px solid #000; 
        background-color:#fff;
        font-size:90%;
         
}	
#td11{
	 
        background-color:#fff;
}

#td3{
        position:relative;
        top:1450px;
        border:0  ;
	border-collapse:collapse;
	padding:5px; 
        background-color:#fff;
}

#td2{
	 background-color: rgb(255,255,0); /* Needed for IEs */

        -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
        -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
        box-shadow: 5px 5px 5px rgba(68,68,68,0.6);

	
}	

td,th{
	 
	border-collapse:collapse;
	padding:5px;
         
}	
#fn,#dp,#ar{width:110px;font-weight:normal;}
#fr,#to{width:90px;font-weight:normal; }
caption{
	background:#ccc;
	font-size:100%;
	border:1px solid #000;
	border-bottom:none;
	padding:20px 0 0 0;
	text-align:left;
}
thead th{
	background-color:#9cf;
	text-align:left;
}
tbody th{
	text-align:left;
	background:#69c;
}
 

tfoot td{
	text-align:left;
	font-weight:bold;
	background:#08ABF6;
          
}

tbody td{
	background:#fff;	
        
}
tbody tr.odd td{
	background:#ccc;
        
}
div.ex
{
top:-40px;
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
} 
</style>
<script language='JavaScript'>
DA = (document.all) ? 1 : 0
 
function HandleError()
{
alert('\nNothing was printed. \n\nIf you do want to print this page, then\nclick on the printer icon in the toolbar above.')
return true;
}
</script>
</head>  
<body>
<img src="campion.png" alt="Campion the power in the water"></img>    
<!-- The outter table to contain the form and the instruction panel -->

<h2>Welcome Screen</h2>  

<table id='table2'><summary="Welcome screen.">
  <thead>

<tr>
      <td> Welcome : <b>PatTreacy</b> </td>
       
      <td>Last Login : <b>14-03-2012</b></td><td>No of logs:<b>17</b></td> </tr>

<tr> 
      <td>User Type : <b>Account Customer</b></td>  
      <td>User Status : <b>Normal</b></td> </tr> 
<tr>  <td>Valid Until : <b>12-12-2031</b></td></tr>  
 

<tr><td>User Message </td></tr>
<tr><td><TEXTAREA name="data" ROWS=3 COLS=30 readonly="yes">Test Message For Pat</TEXTAREA></td></tr>
    

<th>System</th>
<tr>
      <td>No of systems :<b>1</b></td>   
      <td>No of Meters :<b>18</b></td> </tr>
<tr>
     
      <td>No of Accounts :<b>1</b></td> </tr>  

<tr>  <td>No of Customers :<b>1</b></td> </tr>      
  
<hr>
<th>System Overview</th>

<tr><td>Water Recorded Yesterday:==><b>908770</b> </td></tr>
 
<tr><td>This Week:==><b>3771310</b> </td></tr>

<tr><td>This Month :==><b>11867670</b></td></tr>  
<tr><td bgcolor='#69c'><b> Any Issues</b></td></tr>
 
<td id='td1'>Barnafae Line Bulk 3<b> has not reported in for</b> :6 days</td><td id='td1'>Bulk Meter Upper Coolgreaney<b> has not reported in for</b> :7 days</td></tr><tr><td id='td1'>Knockadeen Bulk 6 on Main Line<b> has not reported in for</b> :7 days</td><td id='td1'>Barnafae Line Bulk 2<b> has not reported in for</b> :6 days</td>  

<tr><td>Alarms detected this Month :</td></tr>

 
  </thead>

 
 </table> 
<input type="button" id="btnPrint"onclick="window.location.href='menu.php?auto_id=1'" value='Enter'>
<input type="button" id="btnPrint"onclick="window.location.href='loging.php?>'" value='Exit'>

Open in new window

0
Tony van SchaikFront-end Web developerCommented:
It seems that IE doesn't like your short hex code if i change that it works like it should:

<td bgcolor='#69c'>

Change that to:
<td bgcolor='#6699cc'>

Open in new window


And 1 other thing your code doesn't seem to be valid i get a lot of errors in Dreamweaver, unclosed HTML and so on, this can also be an issue, especially when you want to have this working cross-browser.

Also note that you use a XHTML doctype and you also use HTML4 code in it, like the <b> tag, use <strong> instead. Validate your HTML http://validator.w3.org/

You are also using multi #td1, use an ID once on an element, use class if you want to add it on multiple elements, otherwise this will cause issues in several browsers. Same goes for you input buttons both have the same ID Btnprint, add a .class instead use that ID only once, it can happen that things get submitted twice.

Here is your HTML but valid:

<!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>CAMPION The Power Behind The Water</title>
<style type="text/css"  >
#fixed {
	position: absolute;
	top: 0;
	left: 0;
	width: 10em;
	height: 100%;
}
@media print {
input#btnPrint {
	display: none;
}
}
@media screen {
.imgs1 {
	position:absolute;
	width:30%;
	height:15%;
	top:-6px;
	left:0;
}
}
#table2 {
	border:1px;
	border-collapse:collapse;
	font-family:arial, sans-serif;
	font-size:90%;
	width:100%;
	height:100%;
	background-color:#9de;
}
#tab {
	position:relative;
	top:-90px;
	left: 580px;
 border=0;
	background-color:#FFF;
	font-size:70%;
	border:0px;
}
#table4 {
	border:3px solid #fff;
	position:relative;
	top:-5px;
}
table {
	border:1px solid #000;
	border-collapse:collapse;
	font-size:70%;
}
.td1 {
	border:1px solid #000;
	font-size:90%;
}
#td11 {
	background-color:#fff;
}
#td3 {
	position:relative;
	top:1450px;
	border:0;
	border-collapse:collapse;
	padding:5px;
	background-color:#fff;
}
#td2 {
	background-color: rgb(255,255,0); /* Needed for IEs */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
}
td, th {
	border-collapse:collapse;
	padding:5px;
}
#fn, #dp, #ar {
	width:110px;
	font-weight:normal;
}
#fr, #to {
	width:90px;
	font-weight:normal;
}
caption {
	background:#ccc;
	font-size:100%;
	border:1px solid #000;
	border-bottom:none;
	padding:20px 0 0 0;
	text-align:left;
}
thead th {
	background-color:#9cf;
	text-align:left;
}
tbody th {
	text-align:left;
	background:#69c;
}
tfoot td {
	text-align:left;
	font-weight:bold;
	background:#08ABF6;
}
tbody td {
}
tbody tr.odd td {
	background:#ccc;
}
div.ex {
	top:-40px;
	width:220px;
	padding:10px;
	border:5px solid gray;
	margin:0px;
}
strong {
	font-weight:bold;
}
</style>
<script language='JavaScript' type="text/javascript">
DA = (document.all) ? 1 : 0
 
function HandleError()
{
alert('\nNothing was printed. \n\nIf you do want to print this page, then\nclick on the printer icon in the toolbar above.')
return true;
}
</script>
</head>
<body>
<img src="campion.png" alt="Campion the power in the water" /> 
<!-- The outter table to contain the form and the instruction panel -->

<h2>Welcome Screen</h2>
<table id='table2' summary="Welcome Screen">
  <thead>
    <tr>
      <td> Welcome : <strong>PatTreacy</strong></td>
      <td>Last Login : <strong>14-03-2012</strong></td>
      <td>No of logs:<strong>17</strong></td>
    </tr>
    <tr>
      <td>User Type : <strong>Account Customer</strong></td>
      <td>User Status : <strong>Normal</strong></td>
    </tr>
    <tr>
      <td>Valid Until : <strong>12-12-2031</strong></td>
    </tr>
    <tr>
      <td>User Message </td>
    </tr>
    <tr>
      <td><textarea name="data" rows="3" cols="30" readonly="readonly">Test Message For Pat</textarea></td>
    </tr>
  </thead>
  <tr>
    <th>System</th>
  </tr>
  <tr>
    <td>No of systems :<strong>1</strong></td>
    <td>No of Meters :<strong>18</strong></td>
  </tr>
  <tr>
    <td>No of Accounts :<strong>1</strong></td>
  </tr>
  <tr>
    <td>No of Customers :<strong>1</strong></td>
  </tr>
  <tr>
    <td><hr /></td>
  </tr>
  <tr>
    <th>System Overview</th>
  </tr>
  <tr>
    <td>Water Recorded Yesterday:==&gt;<strong>908770</strong></td>
  </tr>
  <tr>
    <td>This Week:==&gt;<strong>3771310</strong></td>
  </tr>
  <tr>
    <td>This Month :==&gt;<strong>11867670</strong></td>
  </tr>
  <tr>
    <td bgcolor='#6699cc'><strong> Any Issues</strong></td>
  </tr>
  <tr>
    <td class='td1'>Barnafae Line Bulk 3<strong> has not reported in for</strong> :6 days</td>
    <td class='td1'>Bulk Meter Upper Coolgreaney<strong> has not reported in for</strong> :7 days</td>
  </tr>
  <tr>
    <td class='td1'>Knockadeen Bulk 6 on Main Line<strong> has not reported in for</strong> :7 days</td>
    <td class='td1'>Barnafae Line Bulk 2<strong> has not reported in for</strong> :6 days</td>
  </tr>
  <tr>
    <td>Alarms detected this Month :</td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>
<input type="button" id="btnPrint1" onclick="window.location.href='menu.php?auto_id=1'" value='Enter' />
<input type="button" id="btnPrint2" onclick="window.location.href='loging.php?&gt;'" value='Exit' />
</body>
</html>

Open in new window


Good luck
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.