3 replies [Last post]
modernclassic
modernclassic's picture
Offline
newbie
Sydney, Australia
Last seen: 10 years 40 weeks ago
Sydney, Australia
Timezone: GMT+11
Joined: 2010-01-13
Posts: 7
Points: 9

I'm using a navigation drop-down menu (chrome.js) from Dynamic Drive and for some reason the submenu does not appear on hover when I test the layout in Safari 4.0.4.

The menu works fine in IE 6,7,8; Firefox 3.5.7 and Opera 10.10.

I added a 5px top margin to the banner that sits underneath the menu to check whether the banner was overlapping the submenu, but the submenu doesn't render on hover at all.

There are no errors when I validate the markup.

By way of background, I'm upgrading a website that uses table design to CSS. The nav menu previously worked in the table layout. The only change I've made to the menu code is to remove the tr and td tags for the menu bar.

Thanks in advance for your help. I've been searching many hours for a solution on Google without success.

HTML code:

<!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=utf-8" />
<title>Spark &amp; Cannon - Transcription</title>
<link href="../css/sandc-cssversion2.css" rel="stylesheet" type="text/css" media="screen" />
 
<!-- JS for collapsible sections -->
<script type="text/javascript" language="JavaScript" src="../javascript/motionpack.js"></script>
</head>
<body>
 
<!-- WRAPPER -->
<div id="wrapper">
 
<!-- LOGO HEADER -->
<div id="logoheader"><img src="../images/SandC_logo.gif" width="128" height="78" alt="Spark &amp; Cannon Logo" /></div>
 
<!-- NAVIGATION --!>
<div id="navigation">
<script type="text/javascript" src="javascript/chrome.js">
 
<!-- <script language="JavaScript" src="../javascript/quotes.js" type="text/JavaScript">
 
 </script> 
<body onload="preloadImgs();randomImages();">
<img src="http://www.sparkandcannon.com.au/javascipt/images/SandC.gif" name="rotator" id="rotator"> 
 
<strong>
<!-- Menu bar and graphic table-->
<script type="text/javascript" src="../javascript/chrome.js"></strong>
 
/***********************************************
* Chrome CSS Drop Down Menu- © Dynamic Drive DHTML code library (<a href="http://www.dynamicdrive.com" rel="nofollow">www.dynamicdrive.com</a>)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at <a href="http://www.dynamicdrive.com/" rel="nofollow">http://www.dynamicdrive.com/</a> for full source code
***********************************************/
 
</script>
 
<div class="chromestyle" id="chromemenu" align="center">
<ul>
<li><a href="http://www.sparkandcannon.com.au">Home</a></li>
<li><a href="http://www.sparkandcannon.com.au/aboutus/aboutus.aspx" rel="dropmenu1">&nbsp;About Us&nbsp;</a></li>
<li><a href="http://www.sparkandcannon.com.au/transcription/default.aspx" rel="dropmenu3">Transcription Services</a></li>
<li><a href="http://www.sparkandcannon.com.au/recording/default.aspx" rel="dropmenu4">Digital Recording Solutions</a></li>
<li><a href="http://www.sparkandcannon.com.au/news/news.aspx">News</a></li>
<li><a href="http://www.sparkandcannon.com.au/careers/careers.aspx" rel="dropmenu2">Careers</a></li>	
<li><a href="http://www.sparkandcannon.com.au/contact.aspx">Contact </a></li>
</ul> 
</div>
 
<!--1st drop down menu - About Us-->                                                   
<div id="dropmenu1" class="dropmenudiv" style="width: 220px ">
<a href="http://www.sparkandcannon.com.au/aboutus/why.aspx">Reasons to Choose Spark &amp; Cannon</a>
<a href="http://www.sparkandcannon.com.au/aboutus/clientlist.aspx">Our Clients</a>
<a href="http://www.sparkandcannon.com.au/aboutus/managementteam.aspx">Management Team</a>
<a href="http://www.sparkandcannon.com.au/aboutus/history.aspx">Company History</a>
<a href="http://www.sparkandcannon.com.au/aboutus/viqsolutions.aspx">VIQ Solutions Inc.</a>
</div>
 
<!--2nd drop down menu - Digital Recording Systems-->                                                 
<div id="dropmenu4" class="dropmenudiv" style="width: 200px ">
<a href="http://www.sparkandcannon.com.au/recording/default.aspx">Solutions Overview</a>
<a href="http://www.sparkandcannon.com.au/recording/transfer.aspx">Secure Transfer of Digital Audio Files</a>
<a href="http://www.sparkandcannon.com.au/recording/consulting.aspx">Recording Consulting Service</a>
<a href="http://www.sparkandcannon.com.au/recording/training.aspx">Training and Support</a>
</div>  
 
<!--3rd drop down menu - Services -->                                                 
<div id="dropmenu3" class="dropmenudiv" style="width: 190px">
<a href="http://www.sparkandcannon.com.au/transcription/default.aspx">Transcription Overview</a>
<a href="http://www.sparkandcannon.com.au/transcription/audiotranscription.aspx">Transcription</a>
<a href="http://www.sparkandcannon.com.au/transcription/recording.aspx">Recording and Transcription</a>
<a href="http://www.sparkandcannon.com.au/transcription/realtime.aspx">Real Time Writers</a>
</div>
 
 
<!--4th drop down menu - Careers -->                                                 
<div id="dropmenu2" class="dropmenudiv" style=" width: 150px " >
<a href="http://www.sparkandcannon.com.au/careers/careers.aspx">Opportunities</a>
<a href="http://www.sparkandcannon.com.au/careers/positions.aspx">Our Positions</a>
</div>
 
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
<!-- End JS for collapsible sections -->
 
<!-- BANNER -->
<div id="banner"><img src="../images/banner2.jpg" width="800" height="210" alt="Banner" /></div>
 
<!-- MAIN CONTENT -->
<div id="maincontent">
<h1>Transcription</h1><br />
<p>Spark &amp; Cannon can prepare a timely transcript from recordings contained on digital or analogue media, including <b>DVD, CD, VHS</b> and <b>standard and mini cassette tape</b>; and accept all digital file formats. </p>
 
<p>We take great care to ensure the highest quality transcript possible.  All transcripts are prepared by experienced transcriptionists and are comprehensively sound-checked for accuracy.</p>
<p>Our transcription service is suitable for the following: </p>
<ul class="VIQBullet">
 
<li>
<a href="javascript:;" onmousedown="toggleSlide('div1');" class="collapsible" title="Click for more information">Extensive experience</a>...<br />
<div id="div1" style="display:none; overflow:hidden; height:85px; padding-top:12px">
After 46 years of providing recording and transcription services throughout Australasia, we have developed </span>and streamlined detailed systems and procedures to produce quality transcript on-time.  Spark &amp; Cannon maintain significant transcription contracts to courts throughout Australasia, including the Family Court of Australia, Hansard and the Department of the Attorney General.</div>
</li>
 
<li>
<a href="javascript:;" onmousedown="toggleSlide('div2');" class="collapsible" title="Click for more information">We offer a range of transcript delivery options</a>...<br />
<div id="div2" style="display:none; overflow:hidden; height:65px; padding-top:12px">
 
Spark &amp; Cannon can provide transcription services with delivery time frames ranging from; close to immediately after the spoken word, twice daily, daily, next day or two to five business days after the spoken word.
</div>
</li>
 
 
<li>
<a href="javascript:;" onmousedown="toggleSlide('div3');" class="collapsible" title="Click for more information">Our commitment to accurate transcript</a>...<br />
<div id="div3" style="display:none; overflow:hidden; height:65px; padding-top:12px">
At Spark &amp; Cannon we dedicate more resources to staff training and transcript checking than any other transcription company.  On a recent audit of one of our contracts our accuracy was considered to be 99.81%.
</div>
</li>
</ul>
</div>
 
 
<!-- SIDEBAR -->
<div id="sidebar">
<h1>Links...</h1>
<p><a href="clientlist.aspx" class="sidebar">Our Clients</a><br />
  View a list of our satisfied clients</p>
<p><a href="casestudies.aspx" class="sidebar">Case Studies</a><br />
View our case studies</p>
<p><a href="testimonials.aspx" class="sidebar">Testimonials</a><br />
  View our client testimonials
</p>
</div>
 
 
<!-- FOOTER -->
<div id="footer">
&nbsp;<a href="http://www.sparkandcannon.com.au/privacy.aspx" class="linkfooter">Security &amp; Privacy</a> &nbsp;
<font color="#FFFFFF" size="-2"> | </font>
&nbsp;<a href="http://www.sparkandcannon.com.au/sitemap.aspx" class="linkfooter">Site Map</a>&nbsp;
<font color="#FFFFFF" size="-2">| </font>
&nbsp;<a href="http://www.sparkandcannon.com.au/terms.aspx" class="linkfooter">Terms of Use</a>&nbsp;
<font color="#FFFFFF" size="-2">| 
&nbsp; &copy;  Spark &amp; Cannon Australasia Pty Limited. 2009 ABN 37 007 916 056 </font></div>
</div>
 
</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */
 
body {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 0.75em;
	/* background-color: #FFFFFF; this is the background colour behind the website*/
	margin-top: 0px;
	background-image: url(../images/Gradient3.gif);
	background-repeat:repeat-x;
	margin-right: auto;
	margin-left: auto;
	padding-top: 0px;
	width: 800px;
	height: 100%
	text-align: justify;
}
 
/* Headings	*/ 
h1:first-child {margin-top: 0;}/*starts first h1 in TD flush top*/
h2:first-child {margin-top: 0;}/*starts first h2 in TD flush top*/
 
 
h1 {
	font-size: 1.35em;
	color: #000000;
	font-family: "Myriad", "Myriad Roman", "Arial", sans-serif;
	font-weight: normal;
}
h2 {
	font-size: 1.6em;
	color: #822433;
}
h3 {
	font-size: 1.3em;
	font-weight:bold;
	color: #822433;
	margin-bottom: 0px;
	padding-bottom: 10px;
	border-spacing: 0px;
	border-bottom-width:thin;
	border-bottom-color: #D2D1D2;
}
h4 {
	font-size: 1em;
	font-weight:bold;
	color: #822433;
	margin: 0px;
}
 
subheading { 
font-size:14px; 
color: #822433;
}
 
caption { 
font-size:75%; 
color: #736F6E;
}
 
/* WRAPPER */
#wrapper {
	background-image: url(../images/repeaty-background.PNG); 
	background-repeat: repeat-y; /* Extends the sidebar column height to reach the footer in IE6,7,8; Firefox 3.5.7 	    and Safari 4.0.4 BUT NOT OPERA*/
}                                
 
#margin {
	margin-left:auto;
	margin-right:auto;
}
 
/* LOGO HEADER */
#logoheader {
	border:1px solid #822433;
	width:788px;
	align:center;
	background-color:#FFF;
	padding: 5px;
}
 
/* NAVIGATION BAR*/
/* ######### Styles for Menu Bar ######### */
.chromestyle{ 
font-weight: bold;
font-size:12px
background-color: #822433;
width: 799px;
border: none;
} 
 
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
/*content: "."; */
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}
 
.chromestyle ul{
border-left: 1px solid #822433;
width: 100%;
background: url(/images/chromebg3.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 5px 0;
margin: 0;
text-align: left; /*set value to "left", "center", or "right"*/
font:bold 12px "Arial", "Helvetica", sans-serif;
}
 
.chromestyle ul li{
display: inline;
}
 
.chromestyle ul li a{
color: #FFFFFF;
padding: 4px 7px; 
margin: 0;
text-decoration: none;
border-right: 1px solid #FFFFFF; /*THEME CHANGE HERE  This is the line between tabs*/
}
 
.chromestyle ul li a:visited{
color: #FFFFFF;
text-decoration:none;
}
 
.chromestyle ul li a:hover{
/*background: url(/images/chromebg3-over.gif) center center repeat-x; THEME CHANGE HERE*/
background-color: #FFFFFF;
color: #822433;
}
 
 
/*a.sidebar:link {color: black; text-decoration: none; }
	a.sidebar:visited {color: black; text-decoration: none; }
	a.sidebar:hover {color: black; text-decoration: none; font-weight:bold }
	a.sidebar:active {color: black; } */
 
 
.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
/* content: " v";*/
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}
 
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position: absolute;
top: 0;
border: 1px solid #822433; /*THEME CHANGE HERE*/
border-bottom-width: 1px;
font:normal 12px Arial;
line-height:18px;
z-index:100;
background-color: #FFF;
width: 160px;
visibility: hidden;
text-decoration: none;
/*filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); Add Shadow in IE. Remove if desired*/
}
 
.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px; 
border: 1px solid #822433; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
/*font-weight: bold; */
color: #822433;
}
 
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color:#822433;
color:#FFFFFF;
font-weight: bold;
text-decoration: none;
}
 
#maintable tr #maincontent p {
	line-height: 12pt;
}
#maintable tr #maincontent #contable1 tbody tr td a img {
	border-top-color: #822433;
	border-right-color: #822433;
	border-bottom-color: #822433;
	border-left-color: #822433;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;	
}
 
/* BANNER */
 
 
/* MAIN CONTENT */
#maincontent {
	border-left: 1px solid #822433;
	font-size: 1em; /* Check the em conversion - 0.625em appears too small - previously 12px*/
	background-color:#FFF;
	background-image:url(../images/contentheader.PNG);
	background-repeat: no-repeat;
	line-height:1.5em;
	margin-right:auto;
	margin-left:auto;
	float: left;
	width: 619px;
	padding: 15px;
 
}
 
 /* Link behaviour*/
a.maincontent:link {color: #822433; text-decoration: underline; }
a.maincontent:visited {color: #736F6E; text-decoration: underline; }
a.maincontent:hover {color: #736F6E; text-decoration: underline; }
a.maincontent:active {color: #736F6E; text-decoration: underline;  } 
 
/* Link behaviour - Collapsible */
a.collapsible:link {color: #822433; text-decoration: underline; }
a.collapsible:visited {color: #822433; text-decoration: underline; }
a.collapsible:hover {color: #736F6E; text-decoration: underline; }
a.collapsible:active {color: #736F6E; text-decoration: underline; } 
 
/* Bullets */
ul.VIQBullet {
	list-style-image: url('../images/sandc_bullet.gif');
}
ul.GreyBullet {
  list-style-image: url('../images/sandc_bullet_grey.gif')
}
 
/* SIDEBAR */
 
/* Right column for links*/
#sidebar {
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 20px;
	padding-bottom: 0px;
	border-right: 1px solid #822433;
	border-left: 1px solid #822433;
	text-align:left;
	table-layout: fixed;
	background-color:#FFFFFF;
	float: right;
	width: 118px;
}				
 
 
#sidebar .ul {
	 	padding-left: 1em;
 		margin-left: 1em;
 		list-style-type: none; 
}
 
#sidebar .li {
 		margin: 0px 0px 6px 0px; 
} 
 
 /* Sidebar link behaviour*/   
a.sidebar:link {color: #822433; text-decoration: underline; font-weight: bold; }
a.sidebar:visited {color: #822433; text-decoration: underline; font-weight: bold;}
a.sidebar:hover {color: #736F6E; text-decoration: underline; font-weight: bold;}
a.sidebar:active {color: #822433; font-weight: bold;} 
 
/*a.sidebar:link {color: black; text-decoration: none; }
  a.sidebar:visited {color: black; text-decoration: none; }
  a.sidebar:hover {color: black; text-decoration: none; font-weight:bold }
  a.sidebar:active {color: black; } */
 
 
/* FOOTER */
#footer {
	width:800px;
	height:22px;
	align: centre;
	background-image:url(../images/Footer.gif);
	clear: both;
}
 
/* Footer behaviour */
a.linkfooter:link {color: #E6E7E8; text-decoration:none; text-decoration:underline; font-weight:bold; font-size: 75%}
a.linkfooter:visited {color: #E6E7E8; text-decoration:none; text-decoration:underline; font-weight:bold; font-size: 75% }
a.linkfooter:hover {color: black; text-decoration:none; text-decoration:underline; font-weight:bold; font-size: 75% }
a.linkfooter:active {color: #E6E7E8; text-decoration:none; text-decoration:underline; font-weight:bold; font-size: 75%} 
 
#footer .footertext { 
font-size:75%; 
color: #E6E7E8;
padding:200px;

Chrome.js code is here:

/Chrome Drop Down Menu v2.01- Author: Dynamic Drive (<a href="http://www.dynamicdrive.com" rel="nofollow">http://www.dynamicdrive.com</a>)
//Last updated: November 14th 06- added iframe shim technique
 
var cssdropdown={
disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
disablemenuclick: false, //when user clicks on a menu item with a drop down menu, disable menu item's link?
enableswipe: 1, //enable swipe effect? 1 for yes, 0 for no
enableiframeshim: 1, //enable "iframe shim" technique to get drop down menus to correctly appear on top of controls such as form objects in IE5.5/IE6? 1 for yes, 0 for no
 
//No need to edit beyond here////////////////////////
dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, swipetimer: undefined, bottomclip:0,
 
getposOffset:function(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
},
 
swipeeffect:function(){
if (this.bottomclip<parseInt(this.dropmenuobj.offsetHeight)){
this.bottomclip+=10+(this.bottomclip/10) //unclip drop down menu visibility gradually
this.dropmenuobj.style.clip="rect(0 auto "+this.bottomclip+"px 0)"
}
else
return
this.swipetimer=setTimeout("cssdropdown.swipeeffect()", 10)
},
 
showhide:function(obj, e){
if (this.ie || this.firefox)
this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
if (this.enableswipe==1){
if (typeof this.swipetimer!="undefined")
clearTimeout(this.swipetimer)
obj.clip="rect(0 auto 0 0)" //hide menu via clipping
this.bottomclip=0
this.swipeeffect()
}
obj.visibility="visible"
}
else if (e.type=="click")
obj.visibility="hidden"
},
 
iecompattest:function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
},
 
clearbrowseredge:function(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=this.ie && !window.opera? this.iecompattest().scrollLeft+this.iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure)  //move menu to the left?
edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=this.ie && !window.opera? this.iecompattest().scrollTop : window.pageYOffset
var windowedge=this.ie && !window.opera? this.iecompattest().scrollTop+this.iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
},
 
dropit:function(obj, e, dropmenuID){
if (this.dropmenuobj!=null) //hide previous menu
this.dropmenuobj.style.visibility="hidden" //hide menu
this.clearhidemenu()
if (this.ie||this.firefox){
obj.onmouseout=function(){cssdropdown.delayhidemenu()}
obj.onclick=function(){return !cssdropdown.disablemenuclick} //disable main menu item link onclick?
this.dropmenuobj=document.getElementById(dropmenuID)
this.dropmenuobj.onmouseover=function(){cssdropdown.clearhidemenu()}
this.dropmenuobj.onmouseout=function(e){cssdropdown.dynamichide(e)}
this.dropmenuobj.onclick=function(){cssdropdown.delayhidemenu()}
this.showhide(this.dropmenuobj.style, e)
this.dropmenuobj.x=this.getposOffset(obj, "left")
this.dropmenuobj.y=this.getposOffset(obj, "top")
this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
this.positionshim() //call iframe shim function
}
},
 
positionshim:function(){ //display iframe shim function
if (this.enableiframeshim && typeof this.shimobject!="undefined"){
if (this.dropmenuobj.style.visibility=="visible"){
this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
this.shimobject.style.height=this.dropmenuobj.offsetHeight+"px"
this.shimobject.style.left=this.dropmenuobj.style.left
this.shimobject.style.top=this.dropmenuobj.style.top
}
this.shimobject.style.display=(this.dropmenuobj.style.visibility=="visible")? "block" : "none"
}
},
 
hideshim:function(){
if (this.enableiframeshim && typeof this.shimobject!="undefined")
this.shimobject.style.display='none'
},
 
contains_firefox:function(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
},
 
dynamichide:function(e){
var evtobj=window.event? window.event : e
if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
this.delayhidemenu()
else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
this.delayhidemenu()
},
 
delayhidemenu:function(){
this.delayhide=setTimeout("cssdropdown.dropmenuobj.style.visibility='hidden'; cssdropdown.hideshim()",this.disappeardelay) //hide menu
},
 
clearhidemenu:function(){
if (this.delayhide!="undefined")
clearTimeout(this.delayhide)
},
 
startchrome:function(){
for (var ids=0; ids<arguments.length; ids++){
var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
var relvalue=menuitems[i].getAttribute("rel")
menuitems[i].onmouseover=function(e){
var event=typeof e!="undefined"? e : window.event
cssdropdown.dropit(this,event,this.getAttribute("rel"))
}
}
}
}
if (window.createPopup && !window.XmlHttpRequest){ //if IE5.5 to IE6, create iframe for iframe shim technique
document.write('<IFRAME id="iframeshim"  src="" style="display: none; left: 0; top: 0; z-index: 90; position: absolute; filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)" frameBorder="0" scrolling="no"></IFRAME>')
this.shimobject=document.getElementById("iframeshim") //reference iframe object
}
}
 
}

Any help you could offer would be very appreciated!

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Despite the name, I think

Despite the name, I think this wasn't built for Safari's JS engine. You'll only get it debugged if you have a debugger in Safari and can see where things are going wrong.

That said, I think you're choosing for more hair loss doing a DHTML menu. I don't know where your CSS level is but personally I find it much easier (to build, to maintian, to debug) a working, accessible CSS menu with a bit of JS sugar on top for things like extra keyboard-friendliness and mouseoff delay hover.

Safari had an upgrade in JS engines between versions 3 and 4. This script was written in 2006 or earlier. If this/these developer(Drunk didn't have a Mac, it's possible Safari was never tested, as Saffy-for-Windows wasn't out then.

I see it's using an iFrame shim. Is this dropdown menu sitting over a Flash object?

*edit what the hell, no "DISABLE SMILIES" button here??? I friggin HATE smilies, they fux0r with my teXt0rz. > : (

Usenet smilies FTW. Down with th' goofy yeller ones.

I'm no expert, but I fake one on teh Internets

modernclassic
modernclassic's picture
Offline
newbie
Sydney, Australia
Last seen: 10 years 40 weeks ago
Sydney, Australia
Timezone: GMT+11
Joined: 2010-01-13
Posts: 7
Points: 9

Hi Stomme pos, thanks for

Hi Stomme pos, thanks for your reply. The drop menu isn't sitting over any flash elements, it's sitting over a banner div.

The interesting thing is that the nav menu works in the old version of the website (when viewed in Safari).

The only change I've made to the nav menu javascript code (a cut and paste job from the old site to the new site) was to remove the nav menu table elements (cell padding, table width etc). I'm thinking the problem must lie there somehow?

modernclassic
modernclassic's picture
Offline
newbie
Sydney, Australia
Last seen: 10 years 40 weeks ago
Sydney, Australia
Timezone: GMT+11
Joined: 2010-01-13
Posts: 7
Points: 9

Hi everyone, I managed to fix

Hi everyone,

I managed to fix this problem. I'm not sure how exactly I pulled it off, but the submenu now renders in Safari. Thanks for your help!

In case anyone else experiences this problem, I deleted the following lines of HTML code and this fixed the problem:

<body onload="preloadImgs();randomImages();">
<img src="http://www.sparkandcannon.com.au/javascipt/images/SandC.gif" name="rotator" id="rotator"> 

The complete HTML code now looks as follows:

<!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=utf-8" />
<title>Spark &amp; Cannon - Transcription</title>
<link href="../css/sandc-cssversion2.css" rel="stylesheet" type="text/css" media="screen" />
 
<!-- JS for collapsible sections -->
<script type="text/javascript" language="JavaScript" src="../javascript/motionpack.js"></script>
</head>
<body>
 
<!-- WRAPPER -->
<div id="wrapper">
 
<!-- LOGO HEADER -->
<div id="logoheader"><img src="../images/SandC_logo.gif" width="128" height="78" alt="Logo" /></div>
 
<strong><!-- NAVIGATION -->
<div id="navigation">
<script type="text/javascript" src="javascript/chrome.js">
 
<!--<script language="JavaScript" src="../javascript/quotes.js" type="text/JavaScript">--></strong>
 
 
</script>
 
<!-- menu bar and graphic table-->
<script type="text/javascript" src="../javascript/chrome.js">
 
/***********************************************
* Chrome CSS Drop Down Menu- © Dynamic Drive DHTML code library (<a href="http://www.dynamicdrive.com" rel="nofollow">www.dynamicdrive.com</a>)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at <a href="http://www.dynamicdrive.com/" rel="nofollow">http://www.dynamicdrive.com/</a> for full source code
***********************************************/
 
</script>
 
<div class="chromestyle" id="chromemenu" align="center">
<ul>
<li><a href="http://www.sparkandcannon.com.au">Home</a></li>
<li><a href="http://www.sparkandcannon.com.au/aboutus/aboutus.aspx" rel="dropmenu1">&nbsp;About Us&nbsp;</a></li>
<li><a href="http://www.sparkandcannon.com.au/transcription/default.aspx" rel="dropmenu3">Transcription Services</a></li>
<li><a href="http://www.sparkandcannon.com.au/recording/default.aspx" rel="dropmenu4">Digital Recording Solutions</a></li>
<li><a href="http://www.sparkandcannon.com.au/news/news.aspx">News</a></li>
<li><a href="http://www.sparkandcannon.com.au/careers/careers.aspx" rel="dropmenu2">Careers</a></li>	
<li><a href="http://www.sparkandcannon.com.au/contact.aspx">Contact </a></li>
</ul> 
</div>
 
<!--1st drop down menu - About Us-->                                                   
<div id="dropmenu1" class="dropmenudiv" style="width: 220px ">
<a href="http://www.sparkandcannon.com.au/aboutus/why.aspx">Reasons to Choose Spark &amp; Cannon</a>
<a href="http://www.sparkandcannon.com.au/aboutus/clientlist.aspx">Our Clients</a>
<a href="http://www.sparkandcannon.com.au/aboutus/managementteam.aspx">Management Team</a>
<a href="http://www.sparkandcannon.com.au/aboutus/history.aspx">Company History</a>
<a href="http://www.sparkandcannon.com.au/aboutus/viqsolutions.aspx">VIQ Solutions Inc.</a>
</div>
 
<!--2nd drop down menu - Digital Recording Systems-->                                                 
<div id="dropmenu4" class="dropmenudiv" style="width: 200px ">
<a href="http://www.sparkandcannon.com.au/recording/default.aspx">Solutions Overview</a>
<a href="http://www.sparkandcannon.com.au/recording/transfer.aspx">Secure Transfer of Digital Audio Files</a>
<a href="http://www.sparkandcannon.com.au/recording/consulting.aspx">Recording Consulting Service</a>
<a href="http://www.sparkandcannon.com.au/recording/training.aspx">Training and Support</a>
</div>  
 
<!--3rd drop down menu - Services -->                                                 
<div id="dropmenu3" class="dropmenudiv" style="width: 190px">
<a href="http://www.sparkandcannon.com.au/transcription/default.aspx">Transcription Overview</a>
<a href="http://www.sparkandcannon.com.au/transcription/audiotranscription.aspx">Transcription</a>
<a href="http://www.sparkandcannon.com.au/transcription/recording.aspx">Recording and Transcription</a>
<a href="http://www.sparkandcannon.com.au/transcription/realtime.aspx">Real Time Writers</a>
</div>
 
 
<!--4th drop down menu - Careers -->                                                 
<div id="dropmenu2" class="dropmenudiv" style=" width: 150px " >
<a href="http://www.sparkandcannon.com.au/careers/careers.aspx">Opportunities</a>
<a href="http://www.sparkandcannon.com.au/careers/positions.aspx">Our Positions</a>
</div>
 
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
<!-- End JS for collapsible sections -->
 
<!-- BANNER -->
<div id="banner"><img src="../images/banner2.jpg" width="800" height="210" alt="Banner" /></div>
 
<!-- MAIN CONTENT -->
<div id="maincontent">
<h1>Transcription</h1><br />
<p>Spark &amp; Cannon can prepare a timely transcript from recordings contained on digital or analogue media, including <b>DVD, CD, VHS</b> and <b>standard and mini cassette tape</b>; and accept all digital file formats. </p>
 
<p>We take great care to ensure the highest quality transcript possible.  All transcripts are prepared by experienced transcriptionists and are comprehensively sound-checked for accuracy.</p>
<p>Our transcription service is suitable for the following: </p>
 
<ul class="VIQBullet">
 
<li>
<a href="javascript:;" onmousedown="toggleSlide('div1');" class="collapsible" title="Click for more information">Legal transcription</a>
<div id="div1" style="display:none; overflow:hidden; height:25px; padding-top:12px">
Suitable for court hearings, affidavits and depositions
</div>
</li>
 
<li>
  <a href="javascript:;" onmousedown="toggleSlide('div2');" class="collapsible" title="Click for more information">Market research transcription</a>
  <div id="div2" style="display:none; overflow:hidden; height:25px; padding-top:12px">
Suitable for focus groups, qualitative research, recorded telephone and one-on-one interviews
</div>
</li>
 
<li>
  <a href="javascript:;" onmousedown="toggleSlide('div3');" class="collapsible" title="Click for more information">Conference transcription</a>
<div id="div3" style="display:none; overflow:hidden; height:25px; padding-top:12px">
Suitable for seminars, forums, corporate meetings and presentations
</div>
</li>
 
<li>
  <a href="javascript:;" onmousedown="toggleSlide('div4');" class="collapsible" title="Click for more information">Interview transcription</a>
  <div id="div4" style="display:none; overflow:hidden; height:25px; padding-top:12px">
Suitable for police, insurance, workplace investigations and disciplinary hearings
</div>
</li>
</ul> 
 
<p>Further information about our transcription services is provided below:</p>
<ul class="VIQBullet">
 
 
  <li>
<a href="javascript:;" onmousedown="toggleSlide('div5');" class="collapsible" title="Click for more information">Turnaround times</a>
<div id="div5" style="display:none; overflow:hidden; height:120px; padding-top:12px">
Our transcription services are available at a range of delivery times and prices to meet your requirements: 
  <table cellpadding="0px" align="center">
    <tr>
      <td><h4>Transcript Order Type</h4></td>
      <td><h4>Delivery</h4></td>
    </tr>
    <tr>
      <td>Same Day Priority Service</td>
      <td>Same day delivery by close of business</td>
    </tr>
    <tr>
      <td>Next Business Day Priority Service &nbsp;  &nbsp; &nbsp; </td>
      <td> Within 24 hours</td>
    </tr>
    <tr>
      <td>Standard 2-5 Business Days</td>
      <td> Between 2 and 5 business days</td>
    </tr>
    <tr>
      <td>Delayed &gt; 5 Business Days</td>
      <td>Within 5 or more business days</td>
    </tr>
  </table>
</div><p></p>
</li>
  <li>
    <a href="javascript:;" onmousedown="toggleSlide('div6');" class="collapsible" title="Click for more information">Pricing</a>
    <div id="div6" style="display:none; overflow:hidden; height:90px; padding-top:12px">
      Our transcription rates vary depending on the delivery turnaround required and are calculated per folio (100 words transcribed).  As a guide, on average 1 hour of recording produces approximately 64 folios.
  <p>For a tailored quote, please complete our online Quote Request Form and we will contact you within one business day with our pricing information.</p>
  </div><p></p>
</li>
 
  <li>
    <a href="javascript:;" onmousedown="toggleSlide('div7');" class="collapsible" title="Click for more information">How to order</a>
    <div id="div7" style="display:none; overflow:hidden; height:130px; padding-top:12px">
      If you would like to order a transcript, please complete our online Order Form or <a href="../contact.aspx" class="maincontent">contact</a> our friendly staff direct.
      <p>We will contact you within one business day to confirm receipt of your order.</p>
      <p>On confirmation of your order, please organise delivery of your audio and a copy of your order form to your nearest <a href="../contact.aspx" class="maincontent">Spark &amp;  Cannon office</a>. </p>
</div><p></p>
</li>
 
  <li>
    <a href="javascript:;" onmousedown="toggleSlide('div8');" class="collapsible" title="Click for more information">Security and confidentiality</a>
    <div id="div8" style="display:none; overflow:hidden; height:250px; padding-top:12px">
      Spark &amp;  Cannon values the requirement for all client records and information to be treated with the highest level of security and confidentiality.  Our clients trust our service which is fully backed up by the integrity of our management and staff.
      <p>All employees are required to sign and acknowledge our internal confidential information policy which clearly outlines the protocol in respect of all such material and its appropriate treatment.  Throughout our proud 46-year history we have never had a breach of this strict policy.</p>
      <p>Under the requirements of many of our government contracts the majority of our employees also have state and federal police clearances as well as vetted clearances to an in-confidence and highly protected level. At Spark &amp; Cannon the security of records is paramount.  Each of our offices is located within a secure building with separate tenancy lockable areas.  In addition, all data stored on computers is protected via password access.</p>
  </div>
</li>
</ul>
</div>
 
 
<!-- SIDEBAR -->
<div id="sidebar">
<h1>Links...</h1>
<p><a href="clientlist.aspx" class="sidebar">Our Clients</a><br />
  View a list of our satisfied clients</p>
<p><a href="casestudies.aspx" class="sidebar">Case Studies</a><br />
View our case studies</p>
<p><a href="testimonials.aspx" class="sidebar">Testimonials</a><br />
  View our client testimonials
</p>
</div>
 
 
<!-- FOOTER -->
<div id="footer">
&nbsp;<a href="http://www.sparkandcannon.com.au/privacy.aspx" class="linkfooter">Security &amp; Privacy</a> &nbsp;
<font color="#FFFFFF" size="-2"> | </font>
&nbsp;<a href="http://www.sparkandcannon.com.au/sitemap.aspx" class="linkfooter">Site Map</a>&nbsp;
<font color="#FFFFFF" size="-2">| </font>
&nbsp;<a href="http://www.sparkandcannon.com.au/terms.aspx" class="linkfooter">Terms of Use</a>&nbsp;
<font color="#FFFFFF" size="-2">| 
&nbsp; &copy;  Spark &amp; Cannon Australasia Pty Limited. 2009 ABN 37 007 916 056 </font></div>
 
</div>
</div>
</body>
</html>