The drop down menu (When you move mouse over LOGIN link on the right) appears proper in all browsers except IE7.
In IE 7, it appears below the Sliding Images creating using FlexSlider plugin.
http://www.dreamsmedia.org/ajmat/index.html
I know my answer is very late but if anyone has the same problem !!
Try this :
.slidercontainer {position:absolute; z-index: -1000}
Add a z-index to the nav bar container div of the login-form. For example, using inline CSS:
<div class="nav_block container" style="z-index: 1000;">
...
<div class="dropdown-menu ie7 pull-right" id="login-form" aria-labelledby="login-form">
In this case the z-index is only relevant to its parent, so adding a z-index to the login-form div will not fix the issue. This is due to the div stacking context. More information on stacking context: https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context
Related
Hi all,
I needed to add z-index:2 to the header elements, now the topbar nav drop down is appearing under.
I tried to add {position:relative;z-index:999} on many elements, but it doesn't work. Any hints?
I am using CSS, margin is added to show the problem
Code here:
[HTML and CSS][2]
[2]: http://codepen.io/anon/pen/yYKamg
Change this: <div class="row show-for-medium-up" style="position:relative;z-index:2">
To this:
<div class="row show-for-medium-up" style="position:relative;z-index:3">
The z-index: of 2 on this div is placing it in front of the navigation dropdown. So I think you need to move the container element of the dropdown nav up a level.
<div class="row show-for-medium-up" style="position:relative;z-index:99">
This fixed it, Setting the parent container to a higher z-index. I am pretty sure I tried this more than once yesterday. Thanks guys. I will keep you posted if anything pops up.
I'm developing a child theme for the Buddypress default theme. I have customised the look of the navigation bar quite a lot, and now I am trying to get drop-down menus working. They work fine in the default theme. In the default theme a class is added to list items in the nav bar that are hovered over, .sfhover, and this div class has the CSS 'position:relative;z-index:1000'. The #container div that the drop-down menus should stay on top of has the CSS 'position:relative' and no z-index set. Presumably this means that the z-index is the default of 0. Finally the #header div which includes the nav bar has the CSS 'position:relative;z-index:1000'.
I have checked that in my child theme all of the CSS is the same for these three divs, and indeed it is, and yet the drop-down menu does not show above the #container div, but is cut off where the #container div starts.
You can see what I mean if you visit this page, and hover over the 'links' items in the nav bar. You will need the following credentials to see the page as it is password protected:
Username: guest
Password: stackoverflow
Perhaps someone can spot why this isn't working as expected with my child theme?
Thanks,
Nick
there is nothing wrong with your z-index. You have the #header set to overflow: hidden which means that nothing will flow out of it your nav sub menu included. Remove this and you will be good.
problem is in <div id="header"> block which has property overflow: hidden and it hides everything that out of it dimension. You have to remove it and if you use it for clear floats, try another method: boilerplate clearfix or just add div with clear:both after <div id="header">
I have following problem. I've integrated facebook send/like buttons to my website and when i click send, it overlaps with the underlying div.
Since I'm really no CSS guru, i would like that you point me in to a direction where i can find a solution for this problem.
Thank you
the problem is that the div with class box-center & div with class box have the css property overflow: hidden; so anything that's bigger then the div when is loaded will not be shown
but the problem if you remove that is that the box above will be messed up. But that can be resolved by adding (just before closing the div):
<div class="clear"></div>
and in css
.clear {clear:both}
edit: This should give you a better picture (for a bigger preview -> http://i.stack.imgur.com/nvsJW.png)
Is there any replacement for z-index?
My code is too long, thus I will briefly explain my code in text form:
My website layout is (from top to bottom):
Banner
Menu Bar
Content
Footer
In 1 of the menus, I added a SlideDown (using jquery) effect when rollover to display to submenus.
I have 5 images, right below the menu bar, => <div id='images'>. Each image under <li class="thumb">
My problem: When I roll over the menu, the submenus are behind the images. I tried all methods, debug with firebu, tested on all popular browsers, IE,FF,Chrome,Opera and Safari, none of them works. I set z-index and position: relative / absolute, but no luck.
Is there any others way to display my submenus in front of the images?
Please help
EDIT:
Hi Guys,
I fixed the problem. But its weird, and I dont understand why.
the initial css of submenu:
#submenu{
...
z-index: 500;
position: relative;
...
}
After I change the z-index value to 1000, it works now. I dont understand why though. The z-index for the image is -100, before and after I fixed the problems. Is there any specific reason why the value 500 does not work, while 1000 can work? I didnt use z-index on others elements(rest of the page). (Maybe I should open a new question for this). Anyway, sorry for posting this useless question here, any kind-heart soul, could you please close this thread/question?
It's hard to tell how you've laid out your page but here's a suggestion.
Try the following:
<div id="banner"><!--banner contents--></div>
<div id="menu"><!--menu contents--></div>
<div id="content"><!--main contents--></div>
<div id="footer"><!--footer contents--></div>
Then in css you want:
div#menu {
position: relative;
z-index: 10;
}
I don't like to use this many div's when making a website, but its the easiest way of getting my message across. Let me know how it goes.
I'm having a problem with a dropdown menu under IE (6 and 7).
http://www.amaconsulting.pl/promocje.html
As you can see, the dropdown hides behind the main content area in IE.
It's a known bug and general advice is to set a z-index for header and content areas, so IE knows their "place", explained in the article here: http://bit.ly/coSPcI
I've set the z-index of .header div to 20 and .featured, .content, .primary, .main to 1, trying to find the right div to fix the problem. While the dropdown stopped hiding behind the .featured div, it still hides behind the main content divs (either .primary or .main, .secondary is fine).
The z-indexes for these divs are set in a separate stylesheet, ie.css, in case someone'll be looking for them.
If someone could provide some advice, I'd be very grateful.
Ok originale solution here - Swiss credit website. This works but uses a complicated z-index solution.
Here is very simple and improved solution here - Jeyjoo stock image gallery
This works in IE6+, firefox, opera, safari and chrome
Solution
The HTML
<div id="container_page" class="container_page">
<div id="container_header" class="container_header">
NAV BAR GOES HERE
</div>
<div id="container_body" class="container_body">
...body text...
</div>
</div>
The CSS
#container_page #container_header {position:relative;z-index:2;}
#container_page #container_body {position:relative;}
why it works
You have to tell IE how the two divs relate to one another.
In IE if an absolutely positioned element has a z-index then it’s containing relatively positioned element must specify a z-index (z-index:1) in order for the absolutely positioned element to be able to appear on top of other relatively positioned elements.
So I think that you need to give your ul.nav a z-index of 1. I actually wrote about this on my blog.
Updated:
So if I change the visibility style of the hidden ul to visible it appears above the div as it should as long as ul.nav has a positive z-index value. Therefore, I think that this has something to do with the way your JS renders the dropdown menu from that hidden UL. Unless I have all your HTML/CSS/JS I can't really solve this so I can only point you in the right direction and I think that understanding this page will help you a lot.
I managed a z-index work around here on a submenu - Chkredit - swiss credit website
Works in all versions of IE and is light and 100% CSS (no javascript).
IE does not use z-index correctly.
Check the z-index's in the CSS code of the website. You will need to put a z-index -1 on the items your menu is hiding behind.
I working on exactly the same problem for my own image gallery right now (go to "top image" page) - jeyjoo image gallery. When I sort this one out, I will post the full solution here.