I cannot make dimming work in Chrome but it works fine in IE for some reason...I believe the offending section are the DIV's. If I remove all of them from the attached code, the dimming then works in chrome. The Div's and UL's are my top header menu.
I have included a link to the live version, and a copy of the code, very much simplified to illustrate the problem. If you open it in IE, it works great, in Chrome, no dimming.
The HS clickable link is the hand graphic in the center of the page right under the menu bar.
Thank you so much in advance for any advice you can provide.
Here is a link to a live page: http://www.ipec.com/inet/modules/techno ... e/test.asp
Here is the code (If I take out all of the DIVS, the dimming works):
Code: Select all
<!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" xml:lang="en" lang="en">
<title>IPEC Intranet </title>
<!-- Step 1 ToolTip Begin -->
<style type="text/css">
#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 99999;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
html,
body {
height:100%;
text-align: center;
min-width:800px;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
font-family:arial
font-size: 10px;
font-color: black;
}
#container {
padding:0px; min-height:100%;
min-width:800px;
max-width:1200px;
margin-left: auto;
margin-right: auto;
text-align:left;
border:1px solid #999999;
background-color:#B7CED3;
background-image:url('layout_private_begin_copy(1');
background-size: 100%
}
#header {
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
background-image:url('../../../../images/topbanner.png');
width:100%;
height:60px;
}
#leftcolumn {
float:left;
width: 300px;
height:60px;
}
#rightcolumn {
float:right;
width: 300px;
padding-top:35px;
text-align: right;
vertical-align:bottom;
height:auto;
}
#body {
padding:0px;
position:relative;
padding-bottom:20px; /* Height of the footer */
}
.Forms {
background-color: #DFFFDF;
font-size:10px;
font-family:Arial;
}
</style>
<!-- Step 1 ToolTip End -->
<style type="text/css">
#outside{
clear: both;
border:1px solid #0041B8;
background:#0041B8;
}
#navigation-1 {
padding: 1px 0;
margin: 0px;
list-style: none;
width: 100%;
height: 21px;
border-top: 1px solid #80ACFF;
border-bottom: 1px solid #80ACFF;
font: normal 8pt "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
font-weight: bold;
}
#navigation-1 li {
margin:0;
padding:0;
display:block;
float:left;
position:relative;
width:100px;
}
#navigation-1 li a:link, #navigation-1 li a:visited {
padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#0041B8;
color:#ffffff;
width:100px;
height:13px;
}
#navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {
padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#80ACFF;
color:#ffffff;
width:98px;
height:13px;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
}
#navigation-1 li ul.navigation-2 {
margin:0;
padding:1px 1px 0;
list-style:none;
display:none;
background:#ffffff;
width:98px;
position:absolute;
top:21px;
left:-1px;
border:1px solid #0041B8;
border-top:none;
}
#navigation-1 li:hover ul.navigation-2 {
display:block;
}
#navigation-1 li ul.navigation-2 li {
width:98px;
clear:left;
width:98px;
}
#navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {
clear:left;
background:#0041B8;
padding:4px 0;
width:98px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}
#navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover {
clear:left;
background:#80ACFF;
padding:4px 0;
width:98px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 {
display:none;
margin:0;
padding:0;
list-style:none;
position:absolute;
left:145px;
top:-2px;
padding:1px 1px 0 1px;
border:1px solid #0041B8;
border-left:1px solid #0041B8;
background:#80ACFF;
z-index:900;
}
#navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {
display:block;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited {
background:#0041B8;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active {
background:#80ACFF;
}
#navigation-1 li ul.navigation-2 li a span {
position:absolute;
top:0;
left:132px;
font-size:12pt;
color:#fe676f;
}
#navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {
position:absolute;
top:0;
left:132px;
font-size:12pt;
color:#ffffff;
}
</style>
<div id="header">
<div id="leftcolumn">
<a href="/inet/modules/common/misc/pages/default.asp">
<img src="../../../../images/theportal.png" border="0" /></a>
</div>
<div id="rightcolumn">
<a onMouseover="ddrivetip('Home', 'lightgreen', 70)"; onMouseout="hideddrivetip()" href="../../../../modules/common/misc/pages/default.asp"><img border="0" src="../../../../images/home.gif" width="22" height="22"></a>
<a onMouseover="ddrivetip('Control Panel', 'lightgreen', 120)"; onMouseout="hideddrivetip()" href="../../../../modules/common/misc/pages/controlpanel.asp"><img border="0" src="../../../../images/controlpanel.gif" width="22" height="22"></a>
<a onMouseover="ddrivetip('Submit IT Ticket', 'lightgreen', 120)"; onMouseout="hideddrivetip()" onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: '800', height: '600', align: 'center'} )" href="../../../../modules/technology/issues/code/issue_submission.asp"><img border="0" src="../../../../images/COMPUTER.gif" width="22" height="22"></a>
<a onMouseover="ddrivetip('Feedback', 'lightgreen', 80)"; onMouseout="hideddrivetip()" href="../../../../modules/common/misc/pages/feedback.asp"><img border="0" src="../../../../images/feedback.gif" width="22" height="22"></a>
<a onMouseover="ddrivetip('Logout', 'lightgreen', 70)"; onMouseout="hideddrivetip()" href="/inet/logout.asp"> <img border="0" src="../../../../images/EXIT.gif" width="22" height="22"></a>
</div>
</div>
<div id="outside">
<ul id="navigation-1">
<li><a href="#">Company</a>
<ul class="navigation-2">
<li><a href="../../../../modules/common/projects/code/project_home.asp" title="Projects" target="_self" >Projects</a></li>
<li><a href="../../../../modules/common/misc/pages/reports.asp" title="Reports" target="_self" >Reports</a></li>
</ul>
</li>
<li><a href="#" title="Quality" target="_self" >Quality</a>
<ul class="navigation-2">
<li><a href="../../../../modules/quality/issues/code/quality_issues_home.asp" title="Cases" target="_self" >Cases</a></li>
<li><a href="../../../../modules/quality/mca/code/mca_home.asp" title="MCA" target="_self" >MCA</a></li>
</ul>
</li>
<li><a href="#" title="Conversion" target="_self" >Conversion</a>
<ul class="navigation-2">
<li><a href="../../../../modules/fabrication/issues/code/fabrication_issues_home.asp" title="Tickets" target="_self" >Tickets</a></li>
<li><a href="../../../../modules/fabrication/quotes/code/quote_home.asp" title="Quotes" target="_self" >Quotes</a></li>
</ul>
</li>
<li><a href="#" title="Sales" target="_self" >Sales</a>
<ul class="navigation-2">
<li><a href="../../../../modules/sales/management/code/sales_management.asp" title="Management" target="_self" >Management</a></li>
<li><a href="../../../../modules/common/misc/pages/freightquote.asp" title="Freight Quote" target="_self" >Freight Quote</a></li>
</ul>
</li>
<li><a href="#" title="Finance" target="_self" >Finance</a>
<ul class="navigation-2">
<li><a href="../../../../modules/accounting/variance/code/variance_home.asp" title="Cost Variances" target="_self" >Cost Variance</a></li>
<li><a href="../../../../modules/metrics/variance/code/variance_home.asp" title="Metric Variances" target="_self" >Metric Variances</a></li>
</ul>
</li>
<li><a href="#" title="IT" target="_self" >IT</a>
<ul class="navigation-2">
<li><a href="../../../../modules/technology/issues/code/issue_home.asp" title="Tickets" target="_self" >Tickets</a></li>
<li><a href="../../../../modules/technology/cameras/code/camadmin.asp" title="Cameras" target="_self" >Cameras</a></li>
</ul>
</li>
<li><a href="#" title="Plasmas" target="_self" >Plasmas</a>
<ul class="navigation-2">
<li><a href="http://docs.google.com/gview?url=http://www.ipec.com/inet/modules/common/misc/Repository/Plasma/Corporate.pdf&embedded=false" title="Corporate" target="_blank" >Corporate</a></li>
<li><a href="http://docs.google.com/gview?url=http://www.ipec.com/inet/modules/common/misc/Repository/Plasma/New_Castle.pdf&embedded=false" title="New Castle" target="_blank" >New Castle</a></li>
<li><a href="http://docs.google.com/gview?url=http://www.ipec.com/inet/modules/common/misc/Repository/Plasma/Brewton.pdf&embedded=false" title="Brewton" target="_blank" >Brewton</a></li>
</ul>
</li>
<li><a href="#" title="Workplace" target="_self" >Workplace</a>
<ul class="navigation-2">
<li><a href="../../../../modules/common/misc/pages/birthdays.asp">BDays & Anniv.</a></li>
<li><a href="../../../../modules/common/misc/pages/policies.asp">Policies</a></li>
<li><a href="../../../../modules/common/misc/pages/employees.asp" >Emp. Directory</a></li>
<li><a href="../../../../modules/common/misc/pages/holidays.asp" >Holidays</a></li>
<li><a href="../../../../modules/common/misc/pages/marketing.asp">Marketing</a></li>
<li><a href="../../../../modules/common/misc/pages/newsletters.asp">Newsletters</a></li>
<li><a href="http://192.168.30.11/erequester/login.asp" target="_blank">eRequester</a></li>
<li><a href="https://server.expensable.com/auth" target="_blank">ExpensAble</a></li>
<li><a href="http://192.168.30.199/maintenancenet/" target="_blank" style="border-bottom-width: 0">MaintenanceNet</a></li>
</ul>
</li>
<li><a href="#" title="Benefits" target="_self" >Benefits</a>
<ul class="navigation-2">
<li><a href="http://www.principal.com/" target="_blank">401(k)</a></li>
<li><a href="http://www.aflac.com/" target="_blank">Aflac</a></li>
<li><a href="http://www.myflexonline.com/" target="_blank">Flexible Spending</a></li>
<li><a href="https://www.bcbsal.org/index.cfm" target="_blank">Health - Brewton</a></li>
</ul>
</div>
<head>
<!--
1 ) Reference to the files containing the JavaScript and CSS.
These files must be located on your server.
-->
<script type="text/javascript" src="../../../../libraries/highslide/highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="../../../../libraries/highslide/highslide/highslide.css" />
<!--
2) Optionally override the settings defined at the top
of the highslide.js file. The parameter hs.graphicsDir is important!
-->
<script type="text/javascript">
hs.graphicsDir = '../../../../libraries/highslide/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.dimmingOpacity = 0.75;
</script>
</head>
<a onMouseover="ddrivetip('Create a New Ticket', 'lightgreen', 150)" ; onMouseout="hideddrivetip()" onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: '800', height: '600', align: 'center'} )" href="issue_submission.asp" style="font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; color: #000000; text-decoration: none; font-size: 10">
<img border="0" src="../../../../images/MenuNewIssue.gif" width="32" height="32"></a>
