CSS Navigation SubMenu will NOT display over Image when rolled over - html

I have been messing with this problem for about 4 days. I have read all kinds of forum posts on it, but nothing I've tried has worked. Here is my situation. I have a CSS Navigation Menu. Everything works fine in Firefox and Chrome, and on most of my pages in IE it is fine. But if the submenu drop down menu covers an image that is directly below the navigation menu, the submenu will disappear when moused over. You can see the working example in IE at the following address:
http://dcmsandbox.net/Menu.html
Please view source on IE to view code.
I would appreciate any help on this as I cannot figure it out on my own. I think it has something to do with z-index, but any combination I've used has failed.
Thank you.

Related

Dropdown menu - links dim when selected (Safari Only)

having a frustrating time trying to solve this. I have a dropdown menu in my Navbar and when it's selected the other links dim significantly, only in Safari (looks fine in Chrome and Firefox). I went back to the original and unmodified BootStrap 3.3 Template (Sticky footer with fixed navbar) and the issue is present. Might there be a work around is CSS for this. Any assistance is greatly appreciated. Thanks in advance. link to site is http://www.futureyouthrecords.org/indexalt.html

IE9 CSS issue with before and after

I have a CSS bug in one of the templates I am using.
Here is the hosting link:
Demo Link
You have to click on the cog icon (the gear icon on top right) then click on the "Menu on top" option.
This is happening in IE9, the menu dropdown appeared to be squeezed (http://imgur.com/ry2T4C1). I cannot figure out how to fix this or what to change as I cannot inspect element properly for IE9. Does anyone know or can help me with this? Been stuck for a while on it and my users needs this menu to be working.
Thank you in advance!

Issue with Bootstrap mobile menu not appearing

I am using Bootstrap 3 on a site and I found a weird bug that I can't figure out. It deals with the mobile menu on smaller devices. When I view the site on iOS I can see the menu icon appear, but when I click on the icon the menu does not show up. However, if I then click an area where the menu should appear, the link works and takes me to a page.
To add another variable to the problem, when I view it in chrome with the dev tools acting as iOS and the screen small, the menu shows up and works as intended. So I am at a loss how to debug the issue.
I have tried setting the z-index to 1000 with no luck. I have not been able to find documentation regarding this issue. If you have run into this issue or know where there is documentation for it I would really appreciate some help.
Here is a link to the site with the issue(on mobile devices). http://dd.cakeandeatitdesigns.com
Thank you for your time and help!
Hey in my personal experience working with that it could happened when you open your web page with safari in IOS. I don't know what are you using to show the lateral menu, but some times safari doesn't work with certain js.

css3 fade transition on links only works for some links on my website for chrome

Here is a jsfiddle which works: http://jsfiddle.net/n52ES/
It is how I have it set up on my website. However, if you notice on my website, only the 'subscribe' link in the footer (bottom center) works with the fade in transition on hover and the other links above it (i.e. google+, twitter) don't work. The same for the links at the very top right of the website in the navigation. I noticed this only happens in Chrome.
Does anyone have an idea as to why it only works for the 'subscribe' link? I'm lost.
The current version of Chrome stable has a bug that prevents it from animating visited links: http://code.google.com/p/chromium/issues/detail?id=101245 (this is why you are able to see it, but other people won't unless they actually click and go back to your website).
I'd just wait for it to be fixed.

website written in HTML using iWeb doesn't show up correctly in different browsers

I have a question regarding how to make the same website appear consistently in different browsers on different platforms.
The following is a website that I made for my professor: http://youlab.wustl.edu/Home.html. The site itself was made using iWeb while the drop down menu was manually inserted using an external HTML code provider (SoThink DHTML).
While Firefox displays the site correctly, all the other browsers had some sort of problem displaying the site.
Internet Explorer: none of the links work
Chrome & Safari: the drop down menu is shifted all the way to the left, and were not clickable since it disappeared when the mouse moved towards it.
The movie on 1 page doesn't work either.
Could someone tell me what is wrong and how to fix the problem?
Here's your answer
http://en.wikipedia.org/wiki/Cross-browser