Solved

background color in ie

Posted on 2012-03-14
6
432 Views
Last Modified: 2012-03-14
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
0
Comment
Question by:asaidi
  • 2
  • 2
  • 2
6 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 37719646
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
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 37719649
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
 

Author Comment

by:asaidi
ID: 37720289
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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 22

Expert Comment

by:Kim Walker
ID: 37720397
This is incomplete. It doesn't include the td you're asking about.
0
 

Author Comment

by:asaidi
ID: 37720467
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
 
LVL 12

Accepted Solution

by:
Tony van Schaik earned 500 total points
ID: 37722401
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

791 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question