Results 1 to 6 of 6

Thread: java script photoshuffler displaying in front of css drop down menu

  1. #1
    Join Date
    Jan 2009
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default java script photoshuffler displaying in front of css drop down menu

    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:


    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
    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
    Last edited by animalraw; 01-12-2009 at 03:39 PM. Reason: problem resolved

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    In your dropdownmenu.css file, add the highlighted:

    Code:
    #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;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    animalraw (01-12-2009)

  4. #3
    Join Date
    Jan 2009
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by animalraw; 01-08-2009 at 02:24 PM. Reason: added another question

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Same file, make the the highlighted changes:

    Code:
    #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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    animalraw (01-12-2009)

  7. #5
    Join Date
    Jan 2009
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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
    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

  8. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    #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.
    Last edited by jscheuer1; 01-08-2009 at 04:42 PM. Reason: add IE 6 info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    animalraw (01-12-2009)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •