java script photoshuffler displaying in front of css drop down menu

[animalraw]

Hello All,
I've pretty much almost finished the new website for the college I work at, and am aiming to go live on Monday the 12th of Jan - but I seem to be having a real problem with my photoshuffler in firefox.

Here is a screenshot:
http://www.asfc.ac.uk/adam1/firefoxwebsiteproblems.jpg

As you should be able to see, the photoslide show is displaying in front of the css drop down menu. This doesn't happen in ie though.

Doing some research around the issue I've fouond out that this tends to happen with flash videos and the solution is to use the wmode attribute and set it to transparent - thats a fantastic solution - but how do I apply it to my situation?

Does anyone have any ideas??

You can see the site here: http://vle.asfc.ac.uk/newinternet (http://vle.asfc.ac.uk/newinternet)
until Monday, where you will be able to find it here: http://www.asfc.ac.uk

Thank you very much in advance,
Kind regards,
Adam

[jscheuer1]

In your dropdownmenu.css file, add the highlighted:


#nav li ul { /*The dropdown section details */
position:relative;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 14.3em;
font-weight: normal;
border-width: 0em;
margin: 0;
line-height:20px;
text-align: center;
z-index: 10;
}

[animalraw]

Argggghhhhh John!
It worked!!
Thank you, thank you very much!! :) :)

p.s. you wouldn't happen to know how to fix the dropdown menus as well?? Did you notice how when you rolled over under the main links the drop down menu appeared even though you didn't rollover the main buttons?? Just wondering! Thanks in advance.

adam

[jscheuer1]

Same file, make the the highlighted changes:


#MainImageContainer ul ul
{
display:none;
}
#MainImageContainer li:hover ul, #MainImageContainer a:hover ul
{
display:block;
}

Tested only in FF, but should work out for most others, perhaps even IE.

One other thing I noticed was that the menu.js file is a 404 not found. This may or may not matter for IE less than 7. All others should be able to work off of the styles alone.

[animalraw]

Ahh John!
You have no idea how happy you've just made me!
I was in one of those situations where I thought this never could get fixed and then you go and solve both of my problems within an afternoon :D
I'm really greatful of your help and feel very confident about the site going live on Monday morning!
I'll have a look into that missing file and see what it all means :)
Thanks again
Kind regards,
Adam

[jscheuer1]

One other thing, in Opera, the slide show constantly jumps up and down about 1ex (half of the default font size in effect for that element). This is due most likely to the way Opera interprets inline display (default for images) with your DTD for the page. Adding:


#photoimg {
display: block;
}

to any of your stylesheets should take care of this and not harm others.

IE 6 appears to be a lost cause though. There isn't enough width in the main section so there is a lot of undesirable wrapping of content. Using IE conditional comments may be able to salvage it for that browser by inserted styles only it will use. And the menu (as I expected) appears not to work in that browser. As I also said, perhaps with the script added back, it will overcome IE 6's deficiencies in interpreting the :hover pseudo class.