Dear all sifus,

Right now, I'm helping my mum with her website, all is well, until she asked me to add a drop down list for her navigation. The problem is, my navigation is nested under a div which I call header. Whenever I implemented the drop down list (through searches online on how to create one, I've tried both CSS and javascript btw), whenever the list expands out of the containing div, it is layered at the bottom of the remaining content and I am not able to click on the links which lie outside the div. I've also tried Z-index, which didn't work and did a search, apparently it doesn't work in IE7? Is there any fix for this?

Thanks!

you can use jquery plugin bgiframe http://plugins.jquery.com/project/bgiframe

Read the docs : http://docs.jquery.com/Plugins/bgiframe

pretty simple. should solve you IE overlay issue

Hi puaka_astro,
Thanks for the reply! I haven't used JQuery before and the description of how to use it is quite ambiguous for a newbie like me ,
so where should I plug in this code for it to work?

1. include jquery lib(download) here http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js

load the script , the bgiframe - you only need 1 file see the script tag below , link here http://plugins.jquery.com/files/bgiframe_2.1.1.zip


see.. easy eh ?

---

Added on October 29, 2009, 10:19 amNote :

1. $('#divid') - means your div id is "divid", just change to to you div id, dont forget the "#"

2. $('.divclass') - means, you use class name assigned to your div, use this if you need to have bgiframe on multiple div, just assign a class name to that div and use it here

This post has been edited by puaka_astro: Oct 29 2009, 10:19 AM

Hi puaka_astro,

I did exactly what you told me to, but unfortunately it didn't work for me No idea what went wrong there..
in the bgiframe zip file, there are 3 js scripts right? Is there any difference if I extract all 3 or if I only extract this jquery.bgiframe.min.js file? Or do I have to extract all stuff from there?

---

Added on October 29, 2009, 11:53 pmAnother question I would like to ask is, will this bgiframe script work to position my drop down menu on top of a video content as well?

This post has been edited by yun2: Oct 29 2009, 11:53 PM

Dude, just attach you css and html here so we can try and fix it. For the bgiframe like i said in previous post, you only need 1 file, as for now lets just ignore the other files, concentrate on your main reason, to fix layout issue on IE.

I haven;t had the time to test it over a video, but i did test it on some html elements, mostly on select box and divs. anyway post you CSS,you drop down script and HTML and point out which div that cause the problem.

Actually this is fully applicable with just XHTML and CSS. I got a tutorial I saved in my pendrive:




Attached File(s)
 CSS_Pop_Up_Menu___HTML_Tutorials_files.zip ( 114.27k ) Number of downloads: 9

Hi, sorry if I have made you frustrated with my problem here
Here, I tried it again today but it still didn't work. I have attached a zip file of my html and css.

---

Added on October 30, 2009, 2:45 pmM1X, I've tried yours as well, the problem doesn't lie with creating drop down menu though. It's about having to click it outside my div.. But I appreciate your contribution

This post has been edited by yun2: Oct 30 2009, 02:45 PM

did you forgot the file ? i didn' see any attachment lol

Oh oops! I didn't realise the upload failed. I put it in winrar before that


Attached File(s)
 Website.zip ( 215.53k ) Number of downloads: 8

Dude, i've fix your problem.. you dont need bgiframe for that.. made added z-index to you <li> (see the css #navigation li)

1. added param wmode="opaque" to flash video(this one is from google), see if its ok.

p/s : tested on chrome,firefox,ie7 and ie8

---

Added on October 30, 2009, 3:26 pmdamn, something wrong with my keyboard.. always missing letter "r" lol

This post has been edited by puaka_astro: Oct 30 2009, 03:26 PM


Attached File(s)
 Copy_of_Index.html ( 3.01k ) Number of downloads: 13
 copystyle.css ( 1.89k ) Number of downloads: 11

Hi puaka_astro,
Omg, that seriously did it! Thanks!! I thought I've tried the z-index as well but didn't work.. Maybe I placed it at the wrong element Anyways the param wmode opaque works well too, thank you so much !!