We help IT Professionals succeed at work.

background color in ie

asaidi
asaidi asked
on
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
Comment
Watch Question

Kim WalkerWeb Programmer/Technician

Commented:
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.
Tony van SchaikFront-end Developer
CERTIFIED EXPERT

Commented:
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?

Author

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

Kim WalkerWeb Programmer/Technician

Commented:
This is incomplete. It doesn't include the td you're asking about.

Author

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

Front-end Developer
CERTIFIED EXPERT
Commented:
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