CSS & HTML drop down in Blogger --- Not behaving when hovering in IE; but perfect in other browsers

Question

I'm adding a drop down menu bar to my blog using html & CSS.

The code is from My Blogger Lab with tweaks to color etc.

My test site is: http://practicedailygratitude.blogspot.com/

I'm 100% happy with the way it looks in Chrome & Firefox (drop downs are really only for About, Images, and Home DIY; the rest are just links).

I'm having the following issues in IE (I tried 7, 8 and 64-bit):

1. In Explorer, the drop downs are showing up with almost a transparent background (I can see the post's text behind them)
2. In Explorer the drop down happens so quickly that I can't hover or pick a choice.
3. In safari, links aren't active and the drop downs down appear on the hover.

I've been searching for two weeks and trying different tweaks & suggestions from other posts but I don't know how to make it work in IE.

I don't use IE, but 30+% of her blog followers do, so I need to make adjustments, I'm just totally out of ideas (and I've reached my competency) at this point.

I've been able to adjust the code to get it exactly how I want it (with the drop downs hovering over the flag banner in the header) in Chrome & Firefox.

Note: This code requires the html gadget to be put at the top of the blog post section, not the header, so that's why I've changed some margins etc. to get the drop downs to move and "look right" with the header image behind it.

Here's what I'm seeing:

The theme is SIMPLE from Blogger by Josh Peterson. It's one of the few choices in Blogger ---- I haven't modified it; I'm only modifying through 1 html widget I added above the post section and then there is an advanced CSS tab for the template ---- that's where I went to Advanced and then "add CSS" and added the CSS from My Blogger Lab (only updating the colors and moving so it would overlay the header) ---- it appears that the CSS then adds itself in the SIMPLE template.

html for widget: http://practicedailygratitude.blogspot.com/2012/09/my-blogger-lab-html-code-for-widget.html

CSS: http://practicedailygratitude.blogspot.com/2012/09/my-blogger-labs-css-i-modified-for.html

Simple template in Blogger http://practicedailygratitude.blogspot.com/2012/10/simple-template-from-blogger.html

Answer 1

I took a look at your code and it first needs to be cleaned up. By cleanup, I mean syntax errors in your markup: http://validator.w3.org/check?uri=http%3A%2F%2Fpracticedailygratitude.blogspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

There are quite a few errors here which might be causing the issue you are experiencing.

If you still see the problem after the cleanup, you should probably approach it as a regular z-index issue on IE7. This can be solved if you put position: relative; and z-index: 500; on all the parent elements that contain the menu. So, go div by div and add the position and z-index rules. Since your menu has a z-index value of 500, its parents must have a defined value for that rule as well, which needs to be equal or greater than the child element - in this case the menu. This will solve the issue with the menu going behind the content (I already tested it on the current state of the site).

On a side note, you have the following tag declared on your page: <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>. What this does is force Internet Explorer 8+ to render the page using the IE7 compatibility mode. I think you want this tag removed.

Let me know if this helped you out.