menus overlapping content

[sambo80]

Hi

I've just added in a newsletter (javascript coded) and css positioned it into top right section. But now my menus are not overlapping the news ticker. When you drop down a menu, it always is overlapped by the news ticker.

To see it screw up have a look at

http://www.pertmaster.com/indexTEST.htm

and drop down the About Risk menu.

Please let me know which code you wish to see. (I've put some below anyway)

News Ticker code in head tags:

<style type="text/css">  
#divUpControl{position:absolute; width:20; left:730px; top:313px; z-index:1; text-align: right} 
#divDownControl{position:absolute; width:20; left:695px; top:314px; z-index:1; text-align: right} 
#divContainer{position:absolute; width:150; height:164; overflow:hidden; top:135; left:620; clip:rect(0,320,240,0); visibility:hidden} 
#divContent{position:absolute; top:0; left:0} 
</style>
<script language="JavaScript">// begin absolutely positioned scrollable area object scripts 
/*
Extension developed by David G. Miles ([URL unfurl="true"]www.z3roadster.net/dreamweaver)[/URL]
Original Scrollable Area code developed by Thomas Brattli 
To add more shock to your site, visit [URL unfurl="true"]www.DHTML[/URL] Shock.com
*/

function verifyCompatibleBrowser(){ 
    this.ver=navigator.appVersion 
    this.dom=document.getElementById?1:0 
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; 
    this.ie4=(document.all && !this.dom)?1:0; 
    this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
 
    this.ns4=(document.layers && !this.dom)?1:0; 
    this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5) 
    return this 
} 
bw=new verifyCompatibleBrowser() 
 
 
var speed=100
 
var loop, timer 
 
function ConstructObject(obj,nest){ 
    nest=(!nest) ? '':'document.'+nest+'.' 
    this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0; 
    this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0; 
    this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight 
    this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight 
    this.up=MoveAreaUp;this.down=MoveAreaDown; 
    this.MoveArea=MoveArea; this.x; this.y; 
    this.obj = obj + "Object" 
    eval(this.obj + "=this") 
    return this 
} 
function MoveArea(x,y){ 
    this.x=x;this.y=y 
    this.css.left=this.x 
    this.css.top=this.y 
} 
 
function MoveAreaDown(move){ 
	if(this.y>-this.scrollHeight+objContainer.clipHeight){ 
    this.MoveArea(0,this.y-move) 
    if(loop) setTimeout(this.obj+".down("+move+")",speed) 
	} 
} 
function MoveAreaUp(move){ 
	if(this.y<0){ 
    this.MoveArea(0,this.y-move) 
    if(loop) setTimeout(this.obj+".up("+move+")",speed) 
	} 
} 
 
function PerformScroll(speed){ 
	if(initialised){ 
		loop=true; 
		if(speed>0) objScroller.down(speed) 
		else objScroller.up(speed) 
	} 
} 
 
function CeaseScroll(){ 
    loop=false 
    if(timer) clearTimeout(timer) 
} 
var initialised; 
function InitialiseScrollableArea(){ 
    objContainer=new ConstructObject('divContainer') 
    objScroller=new ConstructObject('divContent','divContainer') 
    objScroller.MoveArea(0,0) 
    objContainer.css.visibility='visible' 
    initialised=true; 
} 
// end absolutely positioned scrollable area object scripts 

</script>

positioning code for news ticker in body tags:

...
<td width="146">
<p class="tableHeaderGrey" style="position:absolute; width:145; left:625; top:110; z-index:1; text-align: left; visibility:collapse;"><font size="-1">Announcements</font></p>
				
<!-- begin absolutely positioned scrollable area object--> 

<p class="mainCopyNews" style="position:absolute; width:57px; left:633px; top:315px; z-index:1; text-align: left;"><a href="company/newsUPDATED.htm">more news</a></p>

<div id="divDownControl"><a href="javascript:;" onMouseOver="PerformScroll(-5)" onMouseOut="CeaseScroll()">up</a> </div>

<div id="divUpControl"> <a href="javascript:;" onMouseOver="PerformScroll(5)" onMouseOut="CeaseScroll()">down</a> </div>

<div id="divContainer"> 
<div id="divContent"> 
<table vspace="0" width="100%" height="66%">
<tr>
<td valign="top" height="197">

<p class="mainCopyNews">2nd January, 2006<br>

<span class="mainCopyNews"><a href="events/rmworkshop2006.htm">How to Manage Projects that Succeed - New 2006 Workshops!</a></span></p>

<p class="mainCopyNews">1st December, 2005<br>
<span class="mainCopyNews"><a href="company/newsUPDATED.htm">Business Management Magazine published an article titled 'Beyond Number Crunching' in their recent issue.</a></span> </p>

<p class="mainCopyNews">30 November, 2005 <br>
<span class="mainCopyNews"><a href="company/newsUPDATED.htm">Pertmaster UK Comes in #7 in Deloitte's London &amp; Southern Region Fast 50 and #81 in Deloitte's EMEA Fast 500.</a></span></p>

<p class="mainCopyNews">7th November, 2005<br>
<span class="mainCopyNews"><a href="company/newsUPDATED.htm">Pertmaster announces the beta release of the new risk register, part of Pertmaster Risk Expert.</a></span>
						
</td>
</tr>
</table>
	
</div>
</div>
<!-- end absolutely positioned scrollable area object -->
...

Thanks in advance

 

[kaht]

The news ticker items on the page have a z-index of 1 to ensure that they stand above other items on the page. If it's important for other items to display above the news ticker, they have to have a z-index greater than the news ticker. In this instance anything greater than 1 will suffice. So, each of your menus that drops down needs to have a z-index of 2 or more. If we view the css for your menus we find the class for your dropdowns - add the following code:

in [URL unfurl="true"]http://www.pertmaster.com/inc/layoutStyles.css[/URL]

.menuItem {
   [!]z-index:2;[/!]
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   text-transform: none;
   color: #FFFFFF;
   font-weight: normal;
   background-color: #BF131D;
   width: 79px;
   text-align: center;
   border-left-width: 1px;
   border-left-style: solid;
   border-left-color: #FFFFFF;
   line-height: normal;
}

-kaht

How much you wanna make a bet I can throw a football over them mountains?

 

[sambo80]

thanks a lot kaht!!!

I added to the 'submenu' style and it worked.

Cheers

 

[kaht]

You're welcome

-kaht

How much you wanna make a bet I can throw a football over them mountains?

 

[lovelyjob]

Hello

I have a similar situtation like this.

I am successfull to display my drop down menu over
an html page. But my menu is hiding back at an embedded
flash object area in an html page.

Kindly tell some suggestions to resolve this.