Link with negative z-index not clickable in IE - html

Can anyone give me a hint why the link in the gray box is not clickable in Internet Explorer (I'm using version 11).
http://jsfiddle.net/rk7n7xjj/1/
I tested it in any other browsers and it works fine.
HTML
<div class="gray">This link is not clickable in IE</div>
<div class="yellow">Some placeholder text</div>
CSS
.gray {
position:fixed;
z-index:-1;
top:100px;
background:gray;
height:50px;
width:200px;
}
.yellow {
margin:0 auto;
background:yellow;
height:1000px;
margin-top:400px;
}

The link is not clickable becaue of the z-index.
Actually you setting the div behind the body. You must specify the z-index of the body too. Or at least set it positiv so it's in front of the body and set other elemnts higher if you expact to display them in front of the gray div. Thats why you cant click it.
Obviously Firefox and co has no problems to identify the link when you set z-index like this.
This may helps you to understand how you can use z-index also in IE.
In your case, to get what you want, your CSS should look like:
.gray {
position:fixed;
z-index: 1;
top:100px;
background:gray;
height:50px;
width:200px;
}
.yellow {
position:relative;
z-index: 2;
margin:0 auto;
background:yellow;
height:1000px;
margin-top:400px;
}
Actually you dont need the z-index on the gray in your case but if you plan to may display something behind the gray div than you may need it.

The link is not clickable because IE is taking it behind the body. If you notice, even the text of the link is not selectable. Try setting a z-index: 1 to the body or any parent container. That ways you are first telling the browser to take all the elements inside the container to a higher z-index and then move the link behind that raised set of elements (But the movement of the link is done only within the parent's context i.e. the raised level. Read about stacking context). Thus the link now becomes clickable.
Alternate Solution
If you just want the yellow div over the gray div, then give a positive z-index to the yellow div only. Remove the z-index property from the gray div. If no z-index value is present, 0 is taken as the default. It will always stay behind the yellow div.
.yellow {
position: relative;
z-index: 1;
/* other styles */
}

Related

Can't get z-index working with absolute position of div elements

If you take a look at this website I am designing (http://babblers.in/main.html) there is a problem of z-index for div elements. Click on the stork & baby image at the bottom left. There is a close button in the expanded image which gets hidden under the sliding buttons.
The code for my main.css is:
#SlidingButtons {display:block;overflow:hidden;position:absolute;left:320px;top:130px;width:840px;height:800px;z-index:4;}
#Points {display:block;overflow:hidden;position:absolute;left:0px;top:170px;width:600px;height:730px;z-index:3;}
Sliding Buttons are the ones on the right
Points refers to the stork image and the selectable points on left
What do I do to get the expanded image above the sliding buttons?
Setting opacity for sliding buttons to .99 does not work.
Z-index is notoriously tricky and picky, if you aren't 100% with it. Try this.
#Page {
overflow: hidden;
position: relative;
height: 775px;
z-index: 10;
}
EDIT: Scratch that, your entire web structure is the problem. Try not to use Z-Index, unless you need to.
Though here is a word of advice when using z-index. Z-index only applies in relation to sibling elements.
<div>
<div class="one">
<div class="four"></div>
</div>
<div class="two"></div>
<div class="three"></div>
</div>
with the following CSS
.one{
z-index:1;
}
.two{
z-index:10;
}
.three{
z-index:100;
}
.four{
z-index:1000;
}
in this example div.four would appear lower than div.two, because div.four's parent has a z-index lower than div.two. As the z-index only applies in relation to sibling elements, even if an element has a higher z-index but it is in a sub element it won't have a higher screen z-index than its most top level parent element with a set z-index.

Vertically center two overlapping divs

I'm working on a mobile version of my website, and I'm having trouble vertically-centering two divs. Since it is a mobile site, my css needs to work on any type of screen resolution, so this is where I'm having the problem. Also, different images will be used depending on what page you are on, so the resolution of the image is not static either. I need a way to center both my image div and text div no matter their height or width.
I've made a fiddle here to start out with. As you can see, I chose the green area to be the "screen" for the phone, and I want both the picture to center vertically, and the text to be on top of the picture and center vertically as well. Any help?
What I have so far... (in my jsfiddle)
HTML:
<div id = "screen">
<div class = "overlay" id = "picture"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/10/Tennis-Mean-Streets.jpg" /></div>
<div class = "overlay" id = "text">This is where the text would appear</div>
CSS:
#screen {
width:360px;
height:640px;
background-color:#0f0;
position:relative;
overflow:hidden;
display:table-cell;
vertical-align:middle;
}
.overlay {
position:absolute;
top:0;
left:0;
}
#picture {
}
#picture img{
width:100%;
}
#text {
background-color:#000;
width:100%;
opacity:0.5;
color:#fff;
}
For vertically centering you can set margin top/bottom to auto.
If I understand where you want the text, this should work.
Html
<div id = "screen">
<div class = "overlay" id = "text">This is where the text would appear</div>
<div class = "overlay" id = "picture"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/10/Tennis-Mean-Streets.jpg" /></div>
</div>
and css
#screen {
width:360px;
height:640px;
background-color:#0f0;
position:relative;
overflow:hidden;
display:table-cell;
vertical-align:middle;
}
#picture {
margin: 0 auto;
}
#picture img{
width:100%;
}
#text {
position: absolute;
top:50%;
background-color:#000;
width:100%;
opacity:0.5;
color:#fff;
}
So it doesn't seem like there is a pure css way to do it, so I ended up using jQuery instead. I made a fiddle in case you want to see how I did it, but the jist of it was this.
On document load, find any item with class "overlay" and apply a negative margin-top of half it's height to center it. Because it already has a position of absolute and top:50%, this will vertically center the item.
$(document).ready(function(){
$(".overlay").each(function(){
$(this).css("margin-top", $(this)[0].scrollHeight/2*-1);
});
});
It's pretty simple, and I wish there was a way to do it in pure css, but this way works as well. Thanks for all the help.
After the discussion in the comments I've determined this question is not nearly thought out well enough to attempt to answer and so this will stay simply in hopes that someone else that finds this page is helped by the answer
:::Initial answer:::
This question is easily much more difficult than you've made it seem. If it's a matter of fitting the image to the viewport of the device there is no single css solution and a javascript solution will be needed.
Let me explain, if the image is much taller than it is wide then to fit the image to the screen you'd want to set the height to something like 90% of the height (give some padding for the text etc). however since the image is variable size if the width is the greater value you'll want the width to something like 90%. Herein lay the problem, you wont want both the height and the width of the image to be 90% as that would distort the image. So there will need to be some javascript to flop around some classes here.
After that the css gets a bit hairy also, if you're looking for an overlay to display the same based on any position the user clicks on an image (assuming this is a sort of gallery) rather than an absolute positioned item at the top and left of the document you'll want a position: fixed; element which is positioned on the viewport.
All described before would need a bit of javascript again because there is no easy way to center something that is fixed without using negative margins of half its width/height.
An example of such a thing is here:
http://jsfiddle.net/5hHMa/2/
Here we have the css for the very fixed case which you have presented.
.overlay {
position:fixed;
top:50%;
left:50%;
margin-top: -150px;
margin-left: -150px;
}
#picture img{
width: 300px;
}
#text {
background-color:#000;
opacity:0.5;
color:#fff;
}
Ideally what you would do is instead of using a fixed value for the margins and width as I have you would determine these values and set them using javascript.
It is hard to form a complete solution for your problem with the limited information given, however hopefully this gives you a push in the correct direction.

why is my css overlapping my content?

You can see my webpage here
http://209.140.27.232/~ashleyo/portfolio.html
I can't seem to figure out whats wrong with my CSS. It appears that an invisible container is overlapping my content so I can't click on the images with the exception of the bottom ones that seem to be outside the container
Remove #content id z-index -1 and
Now add z-index 0 on your #content id
As like this
#content{
z-index:0;
}
Hope this may help you :)
Actually heres neither a need of this "z-index" for CONTENTs DIV and neither "height" for CONTAINERs DIV as theres no need of z-index and height can be grow automatically.
Simply Remove these properties.
#content{
z-index:0;
}
#container{
height: 500px;
}
and if you want you can limit your div`s max hieght with this CSS Property
#container{
max-height: 500px;
}

Overlapping "Zoom" div blocking text and options select

First question on this page - yay!
I am currently building a website for a client and it is causing me some troubles.
I have a zoom-tool which allows the user to zoom an image, when the cursor is passing the picture.
This creates a "secret" div right on top of my text-div. The text-div contains a select-option dropdown. The "secret" div is blocking for any activity with in the text-div - I cannot highlight any text or select a option in the dropdown. This I am able to do, when I move the text-div away from the "secret" div.
See this page: http://shakermedia.dk/2up/2012/10/seville-modulsofa-sort/
What can I do? Here is the css code for the two divs:
div.zoom-box {
width:450px;
line-height: 0;
height:100%;
float:right;
position:relative;
z-index: 2;
}
div.text-alignment {
width:450px;
float:right;
margin-top:-419px;
height:100%;
position: relative;
}
How can I make the text-div accessible, but keeping the "zoom-box" the same place (overlapping text when zooming)?
Your help is very much appriciated!
you need to try giving the element that is behind a lower value of z-index and the element that is above - a higher z-index value

div in position fixed with image under div with main content

i need to create a div in position fixed where i will put the image under a div with the rest of the content
i have put in my CSS header {
margin-bottom: 310px;
} to create a blank below space where there is gonna be my img in the div id="background" in position fixed below.
So then i have created the following id:
#background {
position:fixed;
width:100%;
height:100%;
top:130px;
left:0;
z-index: 1;
overflow:scroll;
}
and
#content {
width:100%;
height:100%;
top:60px;
left:0;
z-index:2;
overflow:scroll;
}
The id background is supposed to be the div where my image is gonna be placed right in the blank space l after the header, the id content is the div where i am gonna have my page content and it start from the top.
Here the page : http://fiddle.jshell.net/CGJmE/4/
The effect i want to achieve is exactly this : http://tommywebdesigner.com/Home%20Page.html
but using the div to gain more flexibility. My problem is that i cannot insert properly my div id background in the position fixed with the image.
I think it s something very simple at this stage, How would you do that?
Hope the explanation is clear
You need to do that with background-position: fixed
I've shown you in this jsfiddle: http://fiddle.jshell.net/CGJmE/7/
Good luck!
I do not understand why you put overflow: scroll on #background, it does nothing, really.
Same with the overflow:scroll on the #content. It is redundant.
In general I do not quite understand what your problem is: http://fiddle.jshell.net/CGJmE/6/
I added <div id="background"><img/></div> where you indicated.
This of course still lacks styling for the header and content. (I added background-color to .container so it doesn't look too ugly).
I assume you have that somewhere else?
If you need more help, please elaborate in more detail what your problem is.