CSS image hiding menu

Dev Shed Forums Sponsor:

March 1st, 2013, 09:56 PM

~kdm

Registered User

Join Date: Mar 2013

Posts: 8

Time spent in forums: 1 h 33 m 14 sec
Reputation Power: 0

New Member - CSS image hiding menu

Ok, my site works fine in Firefox and Seamonkey but not with IE. What is happening: I have a banner, and a css menu that is on top of the banner. When in IE, and I mouse over the menu selections, the mouseover dropdown that the menu does, is hidden by the image.

I am not real familiar with css, so I was hoping to see if I could get some help in figuring this out.

March 2nd, 2013, 02:45 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 10 m 33 sec
Reputation Power: 4192

Welcome to DevShed Forums, ~kdm.

To be able to help you we'll need to see an example page. New users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.

Have you checked to make sure your pages don't contain errors (in order to rule out any errors as the cause for the problem)?
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/ (Under "more options", make sure it's set it to use "CSS level 3".)

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

March 2nd, 2013, 02:54 PM

~kdm

Registered User

Join Date: Mar 2013

Posts: 8

Time spent in forums: 1 h 33 m 14 sec
Reputation Power: 0

I have been looming through different sites, and trying different things, yet I am having difficulty figuring out why this is happening.

I did try to put the example, but was not able. it is at kitsaponline DOTCOM

March 2nd, 2013, 06:43 PM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 10 m 33 sec
Reputation Power: 4192

I'm not seeing the problem you describe in IE8, IE9, or IE10. Would you please post a screenshot of it? There is a policy that prevents users from posting attachments until they have 30 posts and have been a member for 30 days, so if needed http://imageshack.us/ can be used to host images.

For anyone else who wants to take a look, here's a link: http://kitsaponline.com/

Last edited by Kravvitz : March 2nd, 2013 at 07:21 PM. Reason: fixed the incorrect URL

March 2nd, 2013, 07:04 PM

~kdm

Registered User

Join Date: Mar 2013

Posts: 8

Time spent in forums: 1 h 33 m 14 sec
Reputation Power: 0

If you go to the same site, and go to the directory by adding to the address:

slash problem slash

you can see two screenshots, one in seamonkey, and one in IE.

March 2nd, 2013, 07:26 PM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 10 m 33 sec
Reputation Power: 4192

Oh. I was looking at the wrong page. You're using Flash. Plugins like Flash often have an infinite z-index. Fortunately, for Flash, you can set it's wmode attribute to overcome this.

March 2nd, 2013, 07:36 PM

~kdm

Registered User

Join Date: Mar 2013

Posts: 8

Time spent in forums: 1 h 33 m 14 sec
Reputation Power: 0

ok, not sure how to do that. I purchased the banner, and placed the code that the instructions told me to do to display it.:

Not sure if I would be able to place the code here, so I added it to the bottom of the image page I created so that you can see how the code calls the banner.

BTW: I appreciate your help & knowledge.

March 2nd, 2013, 09:37 PM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 10 m 33 sec
Reputation Power: 4192

Since you're using SWFObject, you add the wmode parameter like this:

Code:

      <!-- Graphic Banner Start -->
      <div id="banner2">
         <!-- Banner Elegant Graphics Rotator Start -->
         <div id="eg">
            <script type="text/javascript">
	       var flashvars = {
	       xml_path: "inc/slideshow.xml"
	       };
	       var params = {wmode:'opaque'};
	       var attributes = {};
	       swfobject.embedSWF("elegantbanner_externalxml.swf", "eg", "100%", "100%", "9.0.0",
	       "expressInstall.swf", flashvars, params, attributes);
            </script>

         </div>
         <!-- Banner Elegant Graphics Rotator End -->
      </div>
      <!-- Graphic Banner End -->

In the future, I would recommend that you use JavaScript for a slideshow instead of Flash. One reason is that Flash is not supported on iPad tablets.

March 2nd, 2013, 09:51 PM

~kdm

Registered User

Join Date: Mar 2013

Posts: 8

Time spent in forums: 1 h 33 m 14 sec
Reputation Power: 0

That worked! Yea!!!

Thank you so much.

I was using nivoSlider, but I also wanted a calendar, and started running into problems, as they needed 2 different versions of jquerry. I tried to solve that problem, and couldn't so I went looking for some other way to do what I wanted, and found the banner online and purchased it to use.

I didn't know that was happening until I went to someones house to show them what I was putting together, and it did show up in IE.

Thank you again for helping get this straightened out.

#10

March 2nd, 2013, 09:58 PM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 10 m 33 sec
Reputation Power: 4192

You're welcome.

Ah. Yeah, it can be a major headache when you want to use a jQuery plugin that is not compatible with the more recent version of jQuery which you want to use.

New Member - CSS image hiding menu

Developer Shed Advertisers and Affiliates