How to make sure my CSS drop down menu appears above content on Internet Explorer?

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I have created a drop down CSS menu (code is in the header) and placed it using an html widget. I have then used the margins to place a banner I created outside of the content area.

The problem is when you view the site in IE explorer the drop down menu falls behind the banner, meaning you can't view or click certain items in the menu.

I have tried to add a parameter code to the banner html to make it transparent as well as assigning z-index in the css for the header and content, though still can't get it to work. Maybe I'm doing it incorrectly?

Any suggestions and help would be much appreciated.

The site is: www.veteransexercise.com.au
Photo of veteransexercise

veteransexercise

  • 8 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
I have a good deal of knowledge (years) on using Bannersnack and it is notorious for being a pain to layer. I need to know which style you are using to try a work around first...
Photo of veteransexercise

veteransexercise

  • 8 Posts
  • 0 Reply Likes
Oh ok, is it easier to use a service other than bannersnack? When I have more time (if ever) I think I will just work out how to create my own banners.

The original Yola style I used is Monsters, using CSS override to get rid of the stuff I didn't need.

The bannersnack is a custom size 880x200, using default alpha transition between jpeg images.

Thanks for your help.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Bannersnack is awesome and I have endorsed them often in the forums... But as I look in Internet Explorer, Firefox and Chrome at your website I see:

Firefox: The banner and menu work just fine
Internet Explorer: The menu works fine but the banner fails to go through the cycle of images
Chrome: The banner works just fine but the menu is as you stated layered behind the banner.

With custom menus there are at times issues that arise when you also use flash or iframes in close proximity to or under the menu.

It is important to ensure that your website looks the same from browser to browser and to remedy it there are a few steps that you will need to take.

1) Instead of publishing your Bannersnack banner as an iframe go back and do it the old way as an object. It has less chance of bugging out on you as an object. (see image)



2) Copy the object embed code from Bannersnack for your banner <!--

3) Paste the code in the place of the iframe script that was already on your website

4) Locate the place in the script that has the following:

<param name="allowScriptAccess" value="always" />

and directly after it paste:

<param value="transparent" name="wMode">

So it will look like this:

<param name="allowScriptAccess" value="always" /><param value="transparent" name="wMode">

5) Click the "Save" button -->

6) Re-publish your website again to verify that your menu is on top of your flash Bannersnack banner in FF, IE and Chrome.

Keep in mind that you will need to clear your cache and click refresh a time or two to clear out the old pages content and scripts. IE is well known to take a few minutes at times to show the updated changes.

That should fix your website up and ensure that your banner always transitions and your menu is always on top...

As a former US Marine and a VA patient... Semper Fi... See, you help vets and a vet helped you. ;)

Happy site building
Ed

If the lady bears don’t find you handsome they should at least find you handy...Don't forget to share the bear....

Honey Bear Playhomes Tips and Favs in one place... A Honey bear Playhomes Tip ;)
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Must be okay as the source for your site is now exactly what I wrote above. Just checked in all the browsers and sure enough the menu is on top of the flash banner and the banner transitions as it should...

Mark this one as answered... ;)

By the way... Double check your CSS overrides editor because you added some HTML into it as I see the following in your source code:

WARNING

Yola had to strip some HTML it found the last time you saved your CSS.

This may have changed your formatting.

To avoid unwanted formatting changes in the future please don't include any HTML in your CSS.

Photo of Francois

Francois, Employee

  • 282 Posts
  • 19 Reply Likes
Awesome job as usual Ed! Thanks for the assistance.
Photo of veteransexercise

veteransexercise

  • 8 Posts
  • 0 Reply Likes
Great thanks so much for your help Ed. It did the trick perfectly!

The vets are great people, we make sure we take care of them.

I will check my CSS, I fear it is quite messy at the moment, and I need to go through it all as my fonts are appearing differently across browsers.

Cheers!