Solved

background color in ie

Posted on 2012-03-14
6
431 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
Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

 
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

ScreenConnect 6.0 Free Trial

Want empowering updates? You're in the right place! Discover new features in ScreenConnect 6.0, based on partner feedback, to keep you business operating smoothly and optimally (the way it should be). Explore all of the extras and enhancements for yourself!

Question has a verified solution.

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

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.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

831 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