Hi

I have a Javascript drop down menu that has a Javascript scrolling ticker below it. The drop down menu is appearing on top of the scrolling ticker (as I want it to) in Firefox. The drop down menu is appearing "behind" the scrolling ticker (not what I want!) in IE8, Chrome, Safari and Opera. I've been researching this all morning and it appears that many people have resolved similar problems by setting the z-index for the desired "top" element to a higher number (eg, z-index: 100) than the "bottom" element (eg, z-index: -100). As far as I can see, I've done this and it isn't helping. My drop down menu is defined in CSS (as below):

#tdmenu{
margin: 0;
padding: 0;
position:relative;
z-index: 100;
}

#tdmenu li{
margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial;
}

#tdmenu li a{
display: block;
margin: 2px 2px 0 0;
padding: 4px 10px;
color: #FFFFFF;
text-align: center;
text-decoration: none;
}

#tdmenu li a:hover{
color: #39F600;
}

#tdmenu div{
position:absolute;
visibility: hidden;
margin: 0;
padding: 0;
background-color: #031458;
}

#tdmenu div a{
position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
color: #FFFFFF;
font: bold 11px arial;
}

#tdmenu div a:hover{
color: #39F600;
}

The scrolling ticker class is defined in my css file as:

.qmticker{
  position:relative;
  z-index:-100;
}

And implemented in the HTML as:

<td height="30" class="qmticker">
<script LANGUAGE="javascript" type="text/javascript" src="http://app.quotemedia.com/quotetools/twoRowTicker.go?webmasterId=500&toolWidth=970&toolHeight=30&speedtop=25&speedbottom=20&symbols=SIRI,QCOM,MSFT,YRCW,INTC,ORCL,BRCD,EBAY,CSC0,ETFC,C,BAC,FAZ,BSX,ABK,F,GE,S,PFE,JPM&indices=^DJI,^DJT,^DJU,^NYSE,^NASD,^NDX,^SP500,^SP100,^SP400,^SP600,^RUS1K,^RUS2K,^RUA&eastbutton=no&westbutton=no&border=no&direction=LEFT&uparrowcolor=00ff00&downarrowcolor=ff0000&bgbtn=cccccc&fgbtn=000000&bgtop=ffffff&bgbottom=ffffff&fgbottom=0822a3&fgtop=000a2f"></script>
</td>

Any help would be greatly appreciated. You can see the error at:

http://test.traderdata.com/

Ryan

Recommended Answers

All 4 Replies

You dont set the z-index, the remote site does somewhere in their javascript, they want to be ontop. when you sign up and agree to the terms of their script, you got their script, however they wrote it.
this is the css accessed by the javascript embedded

.qmmt_main {
    background-color: #ffffff;
    border: 1px solid #999999; }
.qmmt_tab {
    font: 10px Tahoma, Arial, Helvetica, sans-serif;
  font-weight: bold;
    color: #000000;
    background-color: #dddddd;
    padding: 1px;
    padding-left: 2px;
    padding-right: 2px;
    text-align: center;
    border-left: 1px solid #999999;
    border-bottom: 1px solid #999999;
    border-top: 1px solid #999999;
    cursor: pointer;
    voice-family: "\"}\"";
    voice-family:inherit; }
.qmmt_tabactive {
    font: 10px Tahoma, Arial, Helvetica, sans-serif;
	font-weight: bold;
    color: #000000;
    background-color: #ffffff;
    padding: 1px;
    padding-left: 2px;
    padding-right: 2px;
    text-align: center;
    border-left: 1px solid #999999;
	cursor: pointer;
    voice-family: "\"}\"";
    voice-family:inherit; }

.qmmt_realtime_text {
    font: 9px Tahoma, Arial, Helvetica, sans-serif;
    color: #008000;
    font-weight: bold;
    font-style: italic; }
.qmmt_nonrt_text {
    font: 9px Tahoma, Arial, Helvetica, sans-serif;
    color: #465665;
    font-weight: bold;
    font-style: italic; }
.qmmt_messages { 
   background-color: #FFCCCC;
   font: 10px bold Tahoma, Arial, Helvetica, sans-serif;
   color: #000000;
   padding: 2px 0px 2px 0px; }
.qmmt_text {
    font: 10px Tahoma, Arial, Helvetica, sans-serif;
    color: #000000; }
.qmmt_text_bold {
    font: 10px Tahoma, Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #000000; }
.qmmt_text_up {     color: #009900; }
.qmmt_text_down {     color: #ff0000; }
.qmmt_text, .qmmt_text_up, .qmmt_text_down { padding-left: 4px;}
.qmmt_cycle {    background-color: #eeeeee; }
.qmmt_cycleup { 
    background-color: #eeffee; 
    color: #000000; }
.qmmt_cycledown {
    background-color: #ffeeee;
    color: #000000; }
.qmmt_header_text {
    font: 11px Tahoma, Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #000000;
    text-align: left;
    padding-left: 3px; }
a.qmmt_header_text {
    color: #0000aa;
    text-decoration: none; }
a:visited.qmmt_header_text {
    color: #0000aa;
    text-decoration: none; }
a:hover.qmmt_header_text {
    color: #ff0000;
    text-decoration: none; }
.qmmt_header_bar {
    background-color: #dddddd;
    border: 0px solid #999999;
    padding-left: 3px;
    padding-top: 1px;
    padding-bottom: 1px;
    text-align: left; }
.qmmt_sub_header_text {
    font: 11px Tahoma, Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #000000;
    text-align: left; }
.qmmt_sub_header_bar {
    background-color: #dddddd;
    border: 0px solid #999999;
    padding-left: 3px;
    text-align: left; }
.qmmt_input {     font: 10px Tahoma, Arial, Helvetica, sans-serif; }
a.qmmt {
    color: #0000aa;
    text-decoration: none; }
a:visited.qmmt { 
    color: #0000aa;
    text-decoration: none; }
a:hover.qmmt {
    color: #ff0000;
    text-decoration: none; }
.qmmt_options_in_money { 
  background-color: #FFFFCC;
  font: 10px Tahoma, Arial, Helvetica, sans-serif;
  color: #000000; }
/* CSS for Tools using Tree Menu/View */
.qmmt_tree { 
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	white-space: nowrap; }
.qmmt_tree img {
	border: 0px;
	vertical-align: middle; }
.qmmt_tree a {
	color: #000000;
	text-decoration: none; }
.qmmt_tree a.node, .qmmt_tree a.nodeSel {
	white-space: nowrap;
	padding: 1px 2px 1px 2px; }
.qmmt_tree a.node:hover, .qmmt_tree a.nodeSel:hover {
	color: #0000aa;
	text-decoration: underline;
}
.qmmt_tree a.nodeSel {
	background-color: #dddddd;
}
.qmmt_tree .clip { 	overflow: hidden; }

.qmmt_hovertext {
	position:absolute;
	width:210px;
	border-top:1px solid #cccccc;
	border-left:1px solid #cccccc;
	border-right:1px solid #000000;
	border-bottom:1px solid #000000;
	background-color:#eeeeee;
	padding:3px;
	display:none;
	font:normal 10px Tahoma, Arial, Helvetica, sans-serif;
	text-align:left;
	z-index:100; }
.qmmt_hoverword {
	text-decoration:underline;
	cursor:pointer;
	z-index:101; }
/* No Need to really edit this, for Market Depth / Level II row colors */
/* Level II Cycles */
.qmmt_L2_cycle1 {
   font: 10px Tahoma, Arial, Helvetica, sans-serif;
   background-color:           #FFFEEF;
   font-weight: normal;
   color:                      #000000; }
.qmmt_L2_cycle2 {
   font: 10px Tahoma, Arial, Helvetica, sans-serif;
   background-color:           #F0F7DE;
   font-weight: normal;
   color:                      #000000; }
.qmmt_L2_cycle3 {
	font: 10px Tahoma, Arial, Helvetica, sans-serif;
    background-color:           #F4F0E8;
	font-weight: normal;
    color:                      #000000; }
.qmmt_L2_cycle4 {
	font: 10px Tahoma, Arial, Helvetica, sans-serif;
    background-color:           #E0E0F7;
	font-weight: normal;
    color:                      #000000; }
.qmmt_L2_cycle5 {
	font: 10px Tahoma, Arial, Helvetica, sans-serif;
    background-color:           #F7F7F7;
	font-weight: normal;
    color:                      #000000; }
.qmmt_L2_cycle6 {
	font: 10px Tahoma, Arial, Helvetica, sans-serif;
    background-color:           #F5E8E8;
	font-weight: normal;
    color:                      #000000; }
.qmmt_L2_cycle7 {
	font: 10px Tahoma, Arial, Helvetica, sans-serif;
    background-color:           #F6EDDA;
	font-weight: normal;
    color:                      #000000; }
.qmmt_L2_cycle8 {
	font: 10px Tahoma, Arial, Helvetica, sans-serif;
    background-color:           #DCEAEE;
	font-weight: normal;
    color:                      #000000; }
.qmmt_L2_cycle9 {
	font: 10px Tahoma, Arial, Helvetica, sans-serif;
    background-color:           #E9E2F4;
	font-weight: normal;
    color:                      #000000; }
.qmmt_L2_cycle10 {
	font: 10px Tahoma, Arial, Helvetica, sans-serif;
    background-color:           #EEF2FA;
	font-weight: normal;
    color:                      #000000; }
.qmmt_L2_cycle11 {
	font: 10px Tahoma, Arial, Helvetica, sans-serif;
    background-color:           #E1E2FA;
	font-weight: normal;
    color:                      #000000; }
.qmmt_L2_cycle12 {
	font: 10px Tahoma, Arial, Helvetica, sans-serif;
    background-color:           #EEFAE1;
	font-weight: normal;
    color:                      #000000; }
.qmmt_L2_cycle13 {
	font: 10px Tahoma, Arial, Helvetica, sans-serif;
    background-color:           #EDFCFB;
	font-weight: normal;
    color:                      #000000; }
.qmmt_L2_cycle14 {
	font: 10px Tahoma, Arial, Helvetica, sans-serif;
    background-color:           #FBEBE8;
	font-weight: normal;
    color:                      #000000; }
.qmmt_L2_cycle15 {
	font: 10px Tahoma, Arial, Helvetica, sans-serif;
    background-color:           #EDEDED;
	font-weight: normal;
    color:                      #000000; }
.qmmt_L2_cycle16 {
	font: 10px Tahoma, Arial, Helvetica, sans-serif;
    background-color:           #F6EDDA;
	font-weight: normal;
    color:                      #000000; }
.qmmt_cycleup {
    background-color: #eeffee;
    font: 10px Tahoma, Arial, Helvetica, sans-serif;
    color: #000000;
	font-weight: normal; }
.qmmt_cycledown {
    background-color: #ffeeee;
    font: 10px Tahoma, Arial, Helvetica, sans-serif;
    color: #000000;
	font-weight: normal; }

.qmmt_cyclenochange {
    background-color: #ffffff;
    font: 10px Tahoma, Arial, Helvetica, sans-serif;
    color: #000000;
	font-weight: normal; }

.qmmt_tooltip  { 
	background : #ffe; 
	color : #000; 
	font: 11px Tahoma, Arial, Helvetica, sans-serif;
	border: 1px solid #000; 
	padding : 5px; }
.qmmt_date-day, .qmmt_date-month, .qmmt_date-year, .qmmt_news-title, .qmmt_provider, .qmmt_news-summary, .qmmt_summary, .qmmt_provider-label {
    font: 11px Tahoma, Arial, Helvetica, sans-serif;
    color: #000000;
    font-weight: normal; }
.qmmtOptionHelpHeaderMenuDropDown {
  float: none;
  z-index: 100;
  background: #ffffff;
  position: absolute;
  width: 300px;
  text-align: left;
  border: 1px solid #999999;
  padding: 2px; }
.qmmtOptionHelpIEPositioning { 	right: 380px; }
.qmmtOptionHelpFFPositioning { 	right: 390px; }
 .qmmt_exchangePopup_bg { 	background-color: #e1e1e1; }
 .qmmt_recentQuoteContainer {  background-color:#fff; }
  .qmmt_recentQuotesBox{ 
 text-align:left; 
 width:250px; 
 border:1px solid #cccccc; 
 padding:5px;
 margin-top:5px;
 position:absolute;
 clear:both;
 left: 50%;
 z-index: 150;
 background-color:#fff;  }
 .qmmt_recentQuotesBoxIEPositioning { 	top: 55px; }
.qmmt_customIndicesRowResults{ }
 .qmmt_customIndicesRowBg {
	background-color:#FFF4DB;
}

note: z-index-es defined in line 147, 151, 283,
it appears all you require of your page is z-index greater than 150

hth

its **expletive deleted** css, very unwieldy, (just for the exercise I optimised the css, got it down to 70 lines)
also **expletive deleted** javascript,
& it seems to work and be cross-browser stable,
function surpasses form,
all good

use a higher z-index, if you have flash, then it's a problem, try WMODE=Transparent (flash)

Thanks. I actually fixed the problem but forgot to post. I set the z-index in my menu to 1000 and the problem was resolved. Thanks for the helpful replies.

How did you access/view the CSS accessed by their script?

Ryan

How did you access/view the CSS accessed by their script?

Ryan

I read the javascript from the link in your code found the css ref

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.