IE Z-INDEX Issue - html

Issue: Slideshow
Details: There's a frame (which is just a transparent PNG around the slideshow)
What I'm trying to do:
Make the frame over the image and caption background but make the link and nav-balls on top of the png.
It works like I want in other browsers except for IE. I read more on the z-index bug for IE but that didn't help. Any suggestions or help is VERY very much appreciated.
Issue resolved.

To make navigation dots clickable, apply styles:
display:block; position:relative; // to frame
z-index:1001; //to .nivo-controlNav
To learn more link i suggest:
1) delete all z-index property that applies to .nivo-caption
2) add shadow div with z-index: 87 /*(87 for example)*/ below frame

The issue for this is that IE don't follow the z-indexing of an image, no matter how small or big the z-index you put in your image, IE will still follow the hierarchy level of the elements. If you really want to use z-indexing of an image in IE, you can wrap the image inside a div and put the z-index on the div, this will follow the right z-indexing on all browsers including IE.
// will not follow in IE
<div>first div</div>
<img style="z-index: -1;" src="image.png" />
<div>my div</div>
// will follow in IE
<div>first div</div>
<div style="z-index: -1;"><img src="image.png" /></div>
<div>my div</div>

Related

Hyperlinks not working on images

I have uploaded my page here so that you can see clearly what I am referring to:
http://www.emmasteed.co.uk/new/
The menu section works fine it is the larger button icons at the bottom: Portfolio, Get in touch and About me.
I have hyperlinked these images as you will see in the code however nothing happens when I hover over them or try to click. What am I doing wrong? This is driving me crazy!
<div class="largemenubutton"><img src="images/portfolio.png" alt="Portfolio" border="0" /></div>
<div class="largemenubutton"><img src="images/getintouch.png" alt="Contact me!" border="0" /></div>
<div class="largemenubutton"><img src="images/aboutme.png" alt="About" border="0" /></div>
.largemenubutton {
width:283px;
height:259px;
margin-top:20px;
float:left;
display:block;
text-align:center;
}
Remove the z-index -1 there:
.mainimage {
z-index: -1;
}
For keeping the drop shadow do the following:
<div class="header">
<div class="container">
remove the mainhome width and apply to the container in the css:
.container {
width: 850px;
}
Also use that container for wrapping the same way the main content for the site.
and then for the drop shadow (customize as you please):
.header {
box-shadow: 0 0 0 10px black;
}
This is the fiddle that represents more or less this: http://jsfiddle.net/9q7PX/
Two possible solutions come to mind:
1) Wrap the img element in a div, and wrap that div with your a element.
2) Nix the img element from your DOM, and instead make it a background-image of a div (in CSS). Then wrap that div with your a element.
I have finally managed to figure a way round this. I would like to thank everyone for their answers and advice as without this I probably would never have found this solution. The z-index setting on the previous div was the problem I had to get round.
Basically i created another div tag to contain my large menu buttons and placed this outside of the previous div which held my slider image which was set at z-index -1 as i wanted my image to sit behind a drop shadow above. This then allowed the links on the images to work.
Hope this makes sense and helps anyone else who has this problem.

Image positioning different between Chrome and Firefox

I have two images that I want to be positioned directly on top of each other. This HTML is generated by a script every so often so I have included the CSS directly within the HTML itself.
<div style="text-align:center">
<img id="background"
style="position: absolute; z-index: 1; "
src="background.png"/>
<img id="foreground"
style="position: relative; z-index: 10; "
src="foreground.png" border="0" usemap="#map"/>
</div>
It works perfectly, except in Chrome.
In firefox and Internet explorer it works 100% of the time, I can sit and hit refresh and it is fine. In Chrome sometimes on page load or refresh the background image appears to be shifted 50% to the right?
I just did a quick test and 5/10 times (half of the time) it would appear shifted to the right on a refresh.
Does anyone have any ideas what could be causing this?
Assuming that your foreground and background images are the same size, it seems as if you are trying to do this:
<img id="foreground" style="margin-left:auto; margin-right:auto; background:url("background.png");" src="foreground.png" usemap="#map"/>
The margin-left:auto; margin-right:auto; will center the image within its parent element.

Link not working in overlapping Div

Making a footer for a web site I stumbled upon some strange behavior of overlapping Divs. You can see an example at:
http://mike.latysheva.ru/test.html
The issue is that second link is not clickable in IE7 and at least some versions of IE8. Works fine in IE9 and Firefox.
Here is the code, it is pretty simple (you can see full code in page source):
<div style="height: 120px; width: 200px; background: #DDDDDD; postion:relative;">
<div style="height: 40px; padding: 10px;postion:relative;">
<a ...[have to remove an actual link in order to post it here]>Test Link 1</a>
</div>
<div style="height: 40px; padding: 10px;postion:relative;">
<a ...[have to remove an actual link in order to post it here]">Test Link 2</a>
</div>
</div>
<div style="width:250px;height:100px; background:#777777;margin-top:-60px;position:relative;z-index: -10;"></div>
What can be wrong with the code? Does it have something to do with z-index: -10? I'm totally confused ... Please help ...
Thank you in advance!
Try giving the parent of the z-index:-10 div a z-index:1.
See this question: Z-index broken in IE8?
and this one
IE7 / IE8 z-index problem
Could it be that your first two divs are given postion instead of position attributes? z-index needs non-static positioned divs to work right.
It has to do with the order of the divs. Also if you are putting a link over another div which contains multiple divs, the overlay needs a backround. I usually use a transparent png. Otherwise the browser can see through it (ie7 etc).
Solution to problem:
http://jsfiddle.net/Anytech/Gr3ae/1/

z-index problem in IE with transparent div

I have a transparent div-element with a higher z-index than an img-element on the same page. But Internet Explorer is acting as if the img-element would have a higher z-value when it comes to click events.
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body style="margin:0;padding:0;">
<img src="7player.png" alt="7player" width="60" height="60" style="position:absolute; left: 100px; top: 100px; z-index:10" />
<div style="width:100%;height:100%;position:absolute;z-index:900;" onclick="alert('hello');"></div>
</body>
</html>
When clicking on the image nothing happens altough the click event of the div-element should be fired (works in Chrome for example).
Is there any workaround or fix for my problem?
In fact, your div "Doesn't have any background",
You need to give it a color background (e.g. white) with opacity=0.01.
For example:
background:white; filter:alpha(opacity=1);
Using a transparent image seems like a reasonable work-around for IE. This was answered already here:
IE z-index trouble on element with transparent background
I have tested the Suggestion given by Preli background:white;filter:alpha(opacity=1), and it is working fine. See the Demo in IE:
http://jsfiddle.net/VMrNF/11/
This is still a bug in IE11, but not Edge. The following solved my problem by creating a background that "looks" transparent but has a color.
background: rgba(255,255,255,0.0);
Slightly better that the filter solution above, if you want only the background to be transparent, but not the contents of the object.
add left:0 to div, click event available
tested in ie9

CSS block (div) background image and negative margin

has anyone got the bug on Opera (and others) but not IE6 (here everything is OK) when the block (DIV) has a background-image (no-repeat) does not appear if the block has negative margin? Something like this:
#slide_desc {height: 60px;margin-top: -84px;background: url('back/slide_desc.png') no-repeat;}
IE6, IE7 - OK
IE8, Opera, Firefox, Chrome, Safari - BUG
No background image no PNG hacks
Just this HTML:
<div id="slider"> <img src="img/slide.jpg" height="300" width="730" border="0" /> <div id="slide_desc"> Lorem ipsum </div> </div>
and this CSS
#slide_desc {margin-top: -84px;background: url('slide_desc.png') no-repeat;}
If I add position: relative - works in Opera but doesn't work in IE6
If I change to position: fixed - everything is great but I'm not sure it's perfect way to solve the problem.
Becase of scrolling this scrolls too.
Looks like you just need to give it a height and width or else it is only as big as the text in that div:
Here is a fiddle:
http://jsfiddle.net/VrEvA/
And another with the background in the original div:
http://jsfiddle.net/VrEvA/1/