I have a container div with z-index of -1 (because above this container is a menubar with a menuitem with dropdown list). I have a hyperlink (a href text) inside this container. It is not getting clickable on Chrome. In IE, its Ok.
Any suggestions, please?
Ok, I solved the problem myself. For anyone interested, what I did is I made the z-index of the menubar div +100 rather than making the z-index of the container div to -1. However, now, the opposite phenonmenon occurred i.e. worked in chrome but not in IE. Then, I found this site :
http://briancray.com/2009/04/16/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/
which explains how to target the css explicitly for IE. So, with sort of binary switching the z-index for each browser type, I managed to do it.
Related
I added a button to open a modal when clicked. It works when at the top of the page but when you scroll further down and try to click it, the button no longer opens up the modal. I've put only the code used for the modal and button without the rest of the site code into it's own file to test it and it works just fine so it has to be something somewhere else in the code affecting it.
Here's the GitHub link: https://github.com/xman2156/TOH
Your button appears early in the markup, and is positioned but doesn't have a z-index set. However, it has later siblings which are also positioned without z-index set, notably <div class="tab">, which means it will appear on top of your button in the z-index and block clicks through to it.
If you apply z-index: 1; to your button, that will move it in front of the div that's currently in the way. If you need to ensure it's always on top of other content, you might find it useful to wrap the rest of your content in a single element that creates a separate stacking context, for example by applying position: relative;.
For some more information on stacking contexts and using z-index, here is a link that I find is a useful reference: What no one told you about z-index
set z-index:1000 for both #info and #infoBtn
it'll solve your problem. I tried it.
I have a fixed horizontal menu that works well on firefox but it's presenting a problem in SOME instances of chrome. When the user scrolls down a white block covers the menu.
You can see the problem here: http://brandca.co/cterranum/
We've inspected the elements but it doesn't appear to be anything in the code and looks more like a rendering issue.
We've noticed that when we erase the element's overflow:hidden the problem fixes but we need this property to toggle the menu.
We haven't been able to pinpoint exactly when it happens since it looks it only happens in some computers and even then, a computer in wich the site rendered correctly had the problem happened oduring a presentation on the projection screen.
The fixed element was somehow screwing webkit's rendering, so I turn the element to position: absolute and on the scroll event I update the top value so it looks like its fixed. It's not pretty but it works.
Element has "position: absolute;" and inside it there is .inner-header which has "position: fixed;".
Try moving ".inner-header" outside of ".header".
I'm really stumped on this. I've tried setting a z-index on the iframe element but it keeps getting stacked behind the menu on this page. I've tried setting a lower z-index on just about every part of the navigation menu as well--no luck.
link
any help would be much appreciated
If you set position: relative and z-index: 1 on the .ihcHeader element the video displays fine. This was tested only in Chrome on Mac OS X, so you'll want to test that's true cross-browser.
Basically, the element is not positioned, so z-index isn't working until you position the element. It must have a high stack order intially, so you need to set the z-index of the parent element in the tree to make sure the menu isn't displaying above the video content (or the overlay)
I wanna show an absolute button on top of my first google images. Basically, this button is suppose to be in the first div container's and top of the first image. I repeat some thing to see whether it is working properly or not. However, the second absolute button does not appear, I guess it is under the first absolute button. How to fix it to show each absolute buttons in the corresponding div container's first google image(white one).
I have done this (http://jsbin.com/kenute/1/edit), but it does not show properly. Here I also use borders to see the problem caused by div tags, but still some problems i do not understand why?
Anything positioned absolutely must be contained within an element that has relative positioning
Okay so while testing a site in various browsers everything worked flawlessly except for internet explorer 7. My problem is pretty weird one: my menu elements won't stand still. What I mean by that is that when I scroll the screen down my menu elements travel with me but only the link parts of them (all background stuff remains at the top) and when I scroll back up the menu elements are nowhere to be seen. Is this a known bug in IE7?
I have some suspicions that the problem might lie in position attribute in css as I use position:relative and left/right:50% to center my menu elements.
Found an answer myself. Here it is for those who someday struggle with the same thing.
The culprit was as suspected position. For some reason the relative positioned elements were treated as fixed or somehow seperated from the page layout so it "hovered" over everything while scrolling. To remedy this is one should set the position of the container/wrapper of the page to relative. So here it is in code:
#container{position: relative}
Huge thanks for all comments for prodding me in the right direction.