There are 2 menus in the following site:
http://lastshredsofsanity.com/
I am not sure why this theme is being used this way, but it is how the person made their site. I had fixed this issue before and somehow 3 days later the top menu, when you hover for the child pages, it goes under the second navigation menu. (If you hover over the Shewed Designs, you will see what I mean.)
Now, I thought this was a z-index issue. However, I've tried.
I must not be seeing it, as this is a simple CSS fix and I asked my friend to not touch the CSS until this issue is fixed.
I checked Google and Stack overflow, applied a couple suggestions, but to no avail, I think I am just a little too close at the moment to the project and missing something so simple it is nearly stupid.
Not sure what order you're loading your CSS files, but #catnav has a z-index of 999, whilst #topnav is never assigned a z-index value greater than 5. Since they are both id'd elements, I think the specificity is equal on both, so it becomes an instance of "last rule applied wins." To test this, you could add an embedded style attribute to the #topnav <ul> element with a z-index rule that is higher, like 9999.
HTH.
Related
I've altered the CSS of the NAV on this website and now it only functions in Chrome but not Firefox. Drop Downs exist on 'Menus' & 'Catering'. It was developed in WordPress and I assume I am missing something when it comes to the coding in WordPress.
Any ideas?
http://sbserver.wwwsd3.a2hosting.com/devo_williams_freshcafe/
If you reload your page and hover over the navigation item as it loads, you'll notice that the submenu actually is working properly - it appears, but is subsequently hidden as the #main-content element animates in.
I'm not sure as to why this is happening, since your z-index:999999 on the submenu should certainly override the z-index:999 of #main-content. (I'm fairly certain the maximum value for z-index is a lot higher than that.) For some reason though, 999999 is being treated the same as 999, and the main wrapper is appearing over top of the submenus.
Fixing it requires only slightly decreasing the z-index on #main-content. For example, using:
#wrapper.boxed #main-content {
z-index:998;
}
This worked for me (tested in Firefox 20), and the submenu appears above the main wrapper. Hope this helps! Let me know if you have any questions, though I'm frankly a bit puzzled by this as well.
I'm having trouble figuring this one out, it's a menu I am changing a bit to make it more usable on touch devices. Thus I need the first part of the CSS to stay as it is for normal screens, and then have to overwrite it with the touch styles. But I am trying to position the sub menu of services below services when services is selected. See the sketch. I have created a fiddle to show my problem.
My main problem, and what would solve it, is that I can't seem to get the ul.level_2 to position itself under the selected li, neither with absolute position or floating and clearing. Any ideas?
JS fiddle of problem
I sipmlyfied your example a bit to show you what is the minimal required css to achieve this. http://jsfiddle.net/3EKAq/10/
The positioning of the submenu should be fairly easy, it goes almost automaticly, no positioning required as you can see.
I think the key lies in the clearing of the menu element you want to appear on the left, the 4th one in this case. You could also consider working with the :n-th child css3 selector, but i would not do that for cross browser compatibility.
Hope this puts you in the right direction. Feel free to let us know if you need any more help!
Issue is Menu is not overlaping or float, above the IFrame i am design the menu with table and Div tag in Usercontrol From and i called Usercontrol from in the Index.aspx.
If any got the idea or experience to solve this issue please help me Thanks for Time and help
Hari
Most likely, you are running into an issue with z-index. For your menu, set the z-index for it and all of it's child controls to a high number, and then set the z-index on the iframe to a low number. If this doesn't solve your problem, you are going to need to continue setting the z-index in the parent elements of both your menu and your iframe because in some (all?) browsers, z-index does a sort of propagation, where if a parent has a lower z-index than one of its siblings, then the sibling will get priority and end up on top.
You also need to make sure that your elements have the css position property set to something other than the default, because z-index only works with positioned elements.
There are also known issues with older browsers with regards to iframes, so if you are using an older browser, try something more modern.
iframes are a tricky beast, so you are really going to have to experiment with various things to figure out your exact issue. I could provide more information, but I would need to see an example of your HTML/CSS where it isn't working.
A site I am developing is giving me some serious issues in Internet Explorer 7/8. On certain pages, the navigation goes underneath text and images. I'm rather confused. I've tried adding a z-index of 1 to the content and a higher Z-index to the navigation, but it is to no avail.
The link to the site with the problem and respective CSS file:
http://exitbellaire.com/exit-air.php
The CSS file is /style.css.
I just fixed it. I removed a position:relative tag from a div and things started working again.
I think you might need to add the higher z-index attribute to the .sf-menu and other #navigation element CSS as well, in addition to the base navigation div.
Z-index doesn't have any effect on a normally-positioned element. Try adding "position: relative" to the items you've put a z-index on, one at a time, and see if there's any change. Older versions of IE have a bad habit of looking at parent z-indicies, so that while something might have a z-index of 10, if its parent has a z-index of 1, the 10 will not show up over other elements with lower z-indicies.
I have an ASP.NET application that renders a 3rd party (Telerik's) menu control under
another control (RadDock) when the menu expands.
This artifact ONLY happens in IE7. Not in Safari/FF/Opera/Chrome (Have I left any out?)
The menu control needs to be rendered OVER the other control.
I have Google'd this a fair amount, but have yet to find a simple solution to fix it for IE7.
What is the easiest to solve this problem for IE?
Also do you know if this z-index problem has been resolved in the (pending?) IE8?
This Q is not meant to start a browser flame war. Please only respond if you have a
relevant comment.
Thank you kindly.
I don't know if this is similar or not, but I had an issue with z-indexing where when the z-index was applied to the elements of a container, but not to the container itself, the z-index wasn't being properly applied to the child elements. This manifested itself as background borders appearing over the top of the menu items that should have been on top. I solved the issue by applying the same z-index to the container holding the menu items. I don't know how the Telerik controls set up their CSS, but you may want to check that the class being assigned to the container has an appropriate z-index as well as the menu items themselves.
I've had some problems like that before, although not with the 3rd party controls you mentioned. Check to see if either of the controls sets it's own z-index conditionally if the browser is IE. If that's not the case, try setting a specific z-index for each of the controls (or their containers) to make sure IE doesn't fall back to some sort of default unknown z-index.
If the z-index changes do not fix it, it may actually be a positioning problem rather than a z-index problem. Positioning problems are quite common (from my own experience) when you try to do cross-browser compatibility.