HTML - Dropdown Hidden Behind My Flash - Param Opaque Doesnt Work
Hi Guys,
I have a problem where my dropdown menu is hidden behind a flash element. Google tells me this is common problem. If founds a few solutions that recommended adding <param name="wmode" value="opaque" /> or <param name="wmode" value="transparent" /> ...to my parameters. but this doesnt work. im using a super accessible type dropdown... the menu is essentially a list <li> with some JS behind it. Heres my link http://www.roxywebdesign.com/gateway/ Any suggestion are be welcome. If i cant get this fixed then my backup plan is the use JSCookMenu which apparently does work. But ive already completely chanded the code for my menu once and would like to avoid that this time. Thanks guys!! Similar TutorialsWebsite: http://the1337arcade.com/pt/ Problems: I Got the Dropdown Menu Fixed like i want it, The only problem is the 1px at the end of the navigation, if i add a extra px to the padding it drops that and makes the last button go down to the next row... i want it all to be in the same line HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title>Pine Tree High School - Theatre Department</title> <meta name="description" content="The Homepage for the Pine Tree High School Theatre Department."> <meta name="keywords" content="Pine Tree High School,Pine Tree High School Theater,Theatre,Anup Patel,The1337Arcade"> <link href="style.css" type="text/css" rel="stylesheet"> <script type="text/javascript"> var timeout = 500; var closetimer = 0; var ddmenuitem = 0; // open hidden layer function mopen(id) { // cancel close timer mcancelclosetime(); // close old layer if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; // get new layer and show it ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; } // close showed layer function mclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; } // go close timer function mclosetime() { closetimer = window.setTimeout(mclose, timeout); } // cancel close timer function mcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null; } } // close layer when click-out document.onclick = mclose; </script> </head> <body style="background-image: url('bg.jpg')"> <table align="center" cellpadding="0" cellspacing="0" class="container"> <tr><td><div id="header"><a href=index.htm><img border=0 src="logo.jpg" class="logo" alt="PTHS Theatre"></a></div></td></tr> <tr><td> <table align="center" cellpadding="0" cellspacing="0" class="main"> <tr><td> <ul id="sddm"> <li><a target=I1 href="home.htm">Home</a></li> <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Theatre Productions</a> <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a target=I1 href="#">2008-2009</a> <a target=I1 href="#">2007-2008</a> <a target=I1 href="#">2006-2007</a> <a target=I1 href="#">2005-2006</a> </div> </li> <li><a target=I1 href="about.htm">About The Director</a></li> <li><a target=I1 href="contact.htm">Contact The Theatre </a></li> <li><a target=I1 href="contact.htm">Links</a></li> <li><a target=_blank href="http://ptisd.org">District Home Page</a></li> </ul> <div style="clear:both"></div> </td></tr> <tr><td> <center><DIV STYLE="margin-top:10px;"> <iframe name="I1" width="100%" height="400" src="home.htm" border="0" frameborder="0"> Your browser does not support inline frames or is currently configured not to display inline frames. </iframe> <br> </p> </td></tr><tr><td> <div id="blackfooter"> <span style="float:right;"> p: 903.295.5031. e: <a href=mailto:mgoodding@ptisd.org> <span style="text-decoration: none"><font color="#FFFFFF">mgoodding@ptisd.org</font></span></a><font color="#FFFFFF"> </font> </span> 1001 Fairmont Street | Longview, Texas 75605</div> </td></tr> </table> </td></tr> <tr><td> </td></tr> </table> </body> </html> CSS: Code: /* CSS */ html { height: 100%; margin-bottom: 1px; } body { margin: 15px 0px 15px 0px; background: url(/images/bg.jpg); } table.container { width: 750px; background: #FFFFFF; border: solid 1px #000000; } table.main { width: 700px; background: #FFFFFF; border: solid 1px #000000; } ul { margin-top: 5px; } /* header */ #header img.logo { margin: 20px 0px 0px 20px; border: 0; } #header .login { margin: 20px 25px 0px 0px; width: 198px; height: 20px; float: right; font-size: 13px; } #header .login form { margin: 0px; } /* main nav */ #nav { width: 100%; background: #000000; color: #000000; text-align: center; line-height: 25px; } #nav a { margin: 0px 15px 0px 15px; color: #FFFFFF; text-decoration: none; } #nav a:hover { margin: 0px 15px 0px 15px; color: #0026b9; text-decoration: none; } /* footer */ #blackfooter { width: 100%; background: #000000; font-size: 13px; color: #FFFFFF; text-align: left; line-height: 23px; } #footer { width: 700px; background: #FFFFFF; margin: 10px 0px 10px 25px; font-size: 11px; color: #444444; text-align: center; } #footer a { margin: 0px 3px 0px 3px; color: #444444; text-decoration: underline; } #sddm { margin: 0; padding: 0; z-index: 10} #sddm li { margin: 0; padding: 0; list-style: none; float: left; font: bold 11px arial} #sddm li a { display: block; margin: 00px 0 0; padding: 4px 17px 4px 16px; width: auto; background: #000000; color: #FFF; text-align: center; text-decoration: none} #sddm li a:hover { background: #0026b9} #sddm div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #000000; border: 0px solid #5970B2} #sddm div a { position: relative; display: block; margin: 0; padding: 0px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; background: #000000; color: #FFFFFF; font: 11px arial} #sddm div a:hover { background: #0026b9; color: #000} Thanks for all Help.. Hi everyone, How diffecult is the code where it checks if user has Flash Player installed on their computer before directing them to the appropriate web page. i.e. I want to build a site in Flash but dnt want people who cant view Flash to see nothing, so will also build a more basic version in HTML. I know its possible, just not sure how. Any help will be gratefully appreciated. Regards, liam I am developing my new website at the moment and ran into some trouble. I was trying to make a opaque box with non opaque text. I found some code on the internet that works but theirs one problem. I want to set my box a certain size in a certain position - the code does the opaque side of the problem but its position (bottom and right sides) are relative to the size of your browser window. So the box looks larger when you resize. I want a box that stays x by y. Here's the code and thanks for reading this. div class="container"> <div class="content"> CONTENT GOES HERE <br /> </div> <div class="background"></div> </div> <style type="text/css"> .container { position:static; } .content { position:static; color:White; z-index:5; } .background { position:fixed; top:200px; left:500px; right:30px; bottom:50px; background-color:Black; z-index:1; /* These three lines are for transparency in all browsers. */ -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity:.5; } </style> I tried changing the position tag to absolute, fixed and static from relative but none fixed the problem. Thanks in advance for your help. sorry i fixed the problem as soon as i posted so i deleted it im pat btw I have put this together but I don't know why it doesn't work. the link is: http://www.throughtheconcreterecords...tojournal.html if anyone could take a look at the page source, see what is there and what ISN'T showing up on the actual site and tell me why that would be so nice and awesome! anyone? -kevin throughtheconcrete@hotmail.com On one of my web pages im currently writing one Image wont show up and i have no idea why here is an extract of the code Quote: <table width='100%' border='0'> <td width='33.333%'></td> <td width='33.333%'> <img scr='http://chaos-realm.servegame.org/images/under-construction.gif' align='center' alt="Error... Unable to load Picture"> </td> <td width='33.333%'></td> </table> And it always shows the Alt text not the picture i have practically the same code in a different area Quote: <table width='100%' border='0'> <td width='33.333%'> </td> <td width='33.333%'> <img scr='http://chaos-realm.servegame.org/images/under-construction.gif' align='center' alt="Error... Unable to load Picture"> </td> <td width='33.333%'> </td> </table> And that one works, so im wondering why wont the first one work, ive tried it as a BMP and JPG image aswell. If you visit the website in the first code youll see the mage does exist Any Help would be amazning, Thanks in advance, Eldara Heej ppl. Ik maked a inlogpage with html with a kinda keylogger in it for testing, after i completed the Html document and opend from my documents the Keylogger works great! but if i am uploading the html code's on Freewebs.com i get this www.freewebs.com/iffsow he say's The Form is unoprational!. I dont understand it, its the same code. but he doesnt work? Maybe you could help me. cheers I have a dropdown menu on a website. I just put this flash music player on one of the pages: http://www.flashmp3player.org/ The problem is the dropdown displays under the flash player. Another problem is, the script to display the player is not flash, it's javascript, so I can't add Code: <param name="wmode" value="opaque"></param> to push the flash player behind. Anyone know of a way to force the dropdown menu on top? Anyone know what the problem is. My website works perfect in internet explorer. But when I type in the web address in safari, the page loads all the code, not the website. I'm guessing it has something to do with this code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> Any suggestions? Is it this or something else maybe? hi, I have built a web site but have had to change the way products will be viewed so I looked up the image text feature which was brilliant. it works fine in all browser except for explorer. My code is below for people to view as I know that I have made a mistake but cant see where the problem is, I have highlighted the image text feature in red <HTML> <HEAD> <TITLE>DecTec - Suppliers of quality paint applicators</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <META NAME="keywords" CONTENT=" dectec, dec, tec, dec-tec, contractors, decorating, sundries, equipment, supplies, items, sales, seller,"> <META NAME="description" CONTENT="DecTec is a leading supplier of quality paint application and associated products to speacialist contractors and applicators of paints and coatings."> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> <script src="js/dw_event.js" type="text/javascript"></script> <script src="js/dw_viewport.js" type="text/javascript"></script> <script src="js/dw_tooltip.js" type="text/javascript"></script> <script src="js/dw_tooltip_aux.js" type="text/javascript"></script> <script type="text/javascript"> dw_Tooltip.defaultProps = { wrapFn: dw_Tooltip.wrapImageOverText } dw_Tooltip.content_vars = { L1: { img: 'images/paste_table.jpg', txt: '', w: 100 // width }, L2: { img: 'images/pole_sander_head.jpg', txt: '', w: 100 }, L3: { img: 'images/ladder_rack_tites.jpg', txt: '', w: 100 } } </script> </HEAD> Hi guys, As a person with VERY little HTML knowledge I getting very frustrated with a situation "I'm sure its a simple fix" that I hope you can help me with - there are 2 issues:- 1 - when you click on the Orange button on my website in IE the link doesnt work "it works when you right click - open link in a new tab" 2 - when you click on the Orange button on my website in Firefox - 2 tabs open instead of 1?? Any help would be very much appreciated - the link is http://www.twessential.com/newhome.html. If any files are need please let me know Many thanks hello I wanted to make a pop up window for a link: so i put this btw <head> and </head> Code: <script language="javascript" type="text/javascript"> <!-- var win=null; onerror = stopError; function stopError(){ return true; } function o1281309901(){ myleft=(screen.width)?(screen.width-874)/2:100;mytop=(screen.height)?(screen.height-622)/2:100; settings="width=874,height=622,top=" + mytop + ",left=" + myleft + ",scrollbars=no,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no,dependent=no"; win=window.open("http://www.christianwalser.com/videoplayer","",settings); win.focus(); } // --> </script> and then this btw <body> and </body> for the link to open the pop up: Code: <a href="javascript:o1281309901();">LINK It works fine with IE but not with other browser like Safari and FF: --> Its then resizable and the height and wheight arent correct anymore Thank you very much for your help Hello all, I just got a job working for a school and noticed their website was pretty much unorganized. So yesterday i took up dreamweaver and created this page(the rest of the site is pending acceptance/working of this main page): http://pratt.broward.edu/colejw/Attucks/ However, it did come with problems. In IE it displays fine, everything seems to work. But.. Firefox doesn't seem to like my menu bar and flash scroller combo. In firefox the flash scroller appears over the drop down menu, below is a picture of what i mean. Everything below the menu bar is in a table, so its not the table itself since the drop down appears over the pictures and other text. The only thing overriding it is the flash scroller. Anyone have any ideas? i played with Z-index and such but no luck and in one instance it moves everything from the menu down over to the right of the menu, i could also be placing the z-index's in the wrong place. If anyone has any fixes please let me know. www.allontheside.com The flash video works fine in safari, and firefox but internet explorer doesn't even recognize it as a flash file.. any1 have any suggestions? Hi everyone, On this website I've built I have one last issue with it. Making the dropdown menus to work in Internet Explorer 6. The site: http://bit.ly/aSh3L6 (Just used bit.ly) I'm using IE Tester. This is where I'm trying to fix it then apply it to the main index page: http://bit.ly/aqTdyg I'm editing the css for the dropdown menus in styles1.css. The live verison is styles.css. I'm using this method: http://www.htmldog.com/articles/suckerfish/dropdowns/ I just can't seem to get mine to work like it does on that site. If you look at: http://bit.ly/aqTdyg You'll notice the #main is being pulled to the far right side of the screen. Any help at all would be appreciated. I just can't get my head around it and I need another pair of eyes to see what I'm not seeing. Thanks. I have a jailbroken iPhone 4 and I am trying to get a flash embed to display on it but I am having a lot of trouble. i have successfully used and enabled different flash objects elsewhere but this is the only one that wont run. so I know it will work. HTML Code: <head> <title>iSwim</title> </head> <body> <div style="width: 320px; height: 356px; margin-top: 80px; margin-bottom: 44px;"> <object width="320" height="356"> <param name="movie" value="http://listen.grooveshark.com/widget.swf" /> <param name="wmode" value="opaque" /> <param name="allowScriptAccess" value="always" /> <param name="flashvars" value="hostname=cowbell.grooveshark.com&widgetID=22770693&style=metal&bbg=000000&bfg=046cc7&bt=FFFFFF&bth=000000&pbg=FFFFFF&pbgh=046cc7&pfg=000000&pfgh=FFFFFF&si=FFFFFF&lbg=FFFFFF&lbgh=046cc7&lfg=000000&lfgh=FFFFFF&sb=FFFFFF&sbh=046cc7&p=0" /> <embed src="http://listen.grooveshark.com/widget.swf" type="application/x-shockwave-flash" width="320" height="356" flashvars="hostname=cowbell.grooveshark.com&widgetID=22770693&style=metal&bbg=000000&bfg=046cc7&bt=FFFFFF&bth=000000&pbg=FFFFFF&pbgh=046cc7&pfg=000000&pfgh=FFFFFF&si=FFFFFF&lbg=FFFFFF&lbgh=046cc7&lfg=000000&lfgh=FFFFFF&sb=FFFFFF&sbh=046cc7&p=0" allowScriptAccess="always" wmode="opaque" /></object> </div> </body> Can anyone help me to make sure the flash displays right? what happens is the player loader displays at the top instead of the center and the control buttons are present before it loads. then after the loader fails it shows a "cannot connect" error. so I think the flash object is resizing inside its self. can anyone help me clean up this script so it will display correctly in iPhone safari (with flash enabled)? website is he smalldotdesign.zxq.net/iSwim.html that is where the HTML file is located that I am trying to get corrected. thanks in advance. i have a feeling this is going to be a tough fix. Hi, I am using css to create a dropdown menu. It works fine in all browsers except IE6. In IE6 a dropdown list covers the dropdown menu. please see the atachment/screenshot. Here is the html/css code I am using. HTML Code: { position: relative; z-index: 1;}*/ ul.dropdown, ul.dropdown li, ul.dropdown ul { list-style: none; margin: 0; padding: 0; } ul.dropdown { position: relative; z-index: 597; float: left; } ul.dropdown li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; z-index: 599; } ul.dropdown li.hover, ul.dropdown li:hover { position: relative; z-index: 599; cursor: default; } ul.dropdown ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; } ul.dropdown ul li { float: none; z-index: 598; } ul.dropdown ul ul { top: 1px; left: 99%; z-index: 598; } ul.dropdown li:hover > ul { visibility: visible; z-index: 598; } HTML Code: <div id="header" class="header" style="background-image: url(./images/blue-curve.jpg); background-position: top;"> <h1> Finance and Risk </h1> <ul class="dropdown dropdown-horizontal noPrint"> <li><a href="#" class="dir">Data Management</a> <ul> <?php echo '<li><a href="main.php?PageName=import3' . SID . '">Upload Data</a></li>'; ?> <?php echo '<li><a href="main.php?PageName=list' . SID . '">Download Data</a></li>'; ?> <?php echo '<li><a href="main.php?PageName=delete' . SID . '">Delete Data</a></li>'; ?> <?php echo '<li><a href="main.php?PageName=assetupdate' . SID . '">Update Data</a></li>'; ?> </ul> </li> <li><a href="#" class="dir">Reports</a> <ul> <?php echo '<li><a href="main.php?PageName=reports' . SID . '">BS Overview</a></li>'; ?> <?php echo '<li><a href="main.php?PageName=CDO' . SID . '">CDOs</a></li>'; ?> <?php echo '<li><a href="main.php?PageName=impairment' . SID . '">Impairments</a></li>'; ?> <?php echo '<li><a href="main.php?PageName=fvecapreport' . SID . '">FairValue and Risk</a></li>';?> <?php echo '<li><a href="main.php?PageName=creditrisk' . SID . '">Credit Default Risk</a></li>';?> <?php echo '<li><a href="main.php?PageName=securitydata' . SID . '">MarketData</a></li>';?> </ul> </li> <li><a href="#" class="dir">Files & Manuals</a> <ul> <?php echo '<li><a href="magnitude.pdf" target="_blank">Product Codes</a></li>';?> <?php echo '<li><a href="uploadmanual.pdf" target="_blank">Upload Manual</a></li>';?> <?php echo '<li><a href="main.php?PageName=osmdocs' . SID . '">OSM Files</a></li>'; ?> </ul> </li> <li><a href="#" class="dir">Miscellaneous</a> <ul> <?php echo '<li><a href="main.php?PageName=creditcrises' . SID . '">Credit Crises</a></li>'; ?> </ul> </li> <?php if ($_SESSION['Admin'] == "Yes") { ?> <li><a href="#" class="dir">Admin </a> <ul> <?php echo '<li><a href="main.php?PageName=message' . SID . '">Flash Alerts</a></li>'; ?> <?php echo '<li><a href="testmarcel1.php?' . SID . '">Test Marcel1</a></li>'; ?> <?php echo '<li><a href="testmarcel2.php?' . SID . '">Test Marcel2</a></li>'; ?> <?php echo '<li><a href="testmarcel3.php?' . SID . '">Test Marcel3</a></li>'; ?> <?php echo '<li><a href="main.php?PageName=testajay1' . SID . '">Test Ajay1</a></li>'; ?> <?php echo '<li><a href="testajay2.php?' . SID . '">Test Ajay2</a></li>'; ?> <?php echo '<li><a href="testajay3.php?' . SID . '">Test Ajay3</a></li>'; ?> </ul> </li> <?php } ?> <li><a class="dir" href="main.php?PageName=menu">Menu</a> <ul> <?php echo '<li><a href="logout.php">Logout</a></li>'; ?> <?php echo '<li><a href="#">Change password</a> </li>'; ?> </ul> </li> <li><a class="dir" href="javascript:window.print()" color="green">Print</a> </li> </ul> </div> Any one has an idea how to get the css menu on top of the dropdown list? Thanks in advance http://www.ofm07.com/clubpages/2/index.html why dont my iframes reach the top of the frame help please, thanks Hi, I'm kinda new to Html. I just started, and my brother installed easy php so I can see what my website will look like when I put it up. How come images show up as an X? is there anyway to fix this? please anyone know? Hi all Firstly I’m a repeat newbie... I had a brief spell with a mate doing web things in 2000, playing comand and conquer most of the time over a network, we were poor but we had fun...blimey things have changed, in many ways!! I've put together a web site using a trial version of dreamweaver but the problem is that although it displays fine on all my machines at work and at home, the client (friend really) gets a muddled view on her laptop... Like the screen shot. !! I’ve run the compatibility and validator on dreamweaver and it seems ok. I’ve also run the address through w3.org validator and it seems ok. The adress is www.julietbidwell.co.uk Any help will be much appreciated. Thanks Phil PS – note to self I must stop saying I’ll have a go at stuff for people!! |