i'm stuck with a problem related to z-index in IE8.
Here's the fiddle:
http://fiddle.jshell.net/uFPBz/show/
The first problem is that the issue I want to show you is working in the fiddle, there's something I can't see that is fixing it.
However, if I save that entire fiddle page and open in IE8, the problem comes back. So, i'm like WTF?
When you mouseover the preview image, a bigger one shows up. But the bottom of this LARGER PREVIEW hides behind the SMALL IMAGE of the BOX that is below the mouseover'd Box.
This only happens in IE8, the largerPreviewBox has z-index of 3, while the ImgThumbBox has z-index of 2.
Reading this: http://caffeineoncode.com/2010/07/the-internet-explorer-z-index-bug/ and this IE 6 & IE 7 Z-Index Problem I see it these z-index properties are irrelevant because they are in other levels. But I don't know how to fix it.
Will be better if you download the HTML and see it by yourself:
http://www.filefactory.com/file/417sp9zi1lhp/n/HTML_Error_tar_gz
Thanks a lot!
Edit:
Image of the problem:
update the doctype
it will work fine.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
i tested on ie8
else you can press f12 and check your browser mode and document mode :-)
You can accomplish your task only with CSS and with less HTML lines. See the JSFiddle.
In your case the HTML is:
<div class="container">
<img src="imagenes/thumb.jpg" alt="Miniatura">
</div>
and you can use this CSS:
div.container{
position:relative;
display:inline-block;
float:left;
width: 122px;
height: 160px; }
div.container > img {
position:relative;
width: 122px;
height: 160px;
display:block;}
div.container > img:hover {
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -175px;
width: 300px;
height: 350px;
border:1px solid black;
//use other styles....
}
Related
I am working on GunsAmerica.com and some users with IE8 are noticing (with great distaste) that the images are not showing up on our listings. I am using Browserstack.com to test and can confirm the beheavior. You can see the problem on the homepage http://www.gunsamerica.com
Here is the CSS for the image:
.listing-thumb img, .listing-thumb > a > img {
height:auto;
width: 170px;
display:inline;
max-width: 100%;
}
Here is an example listing image html:
<div class="listing-thumb">
<img itemprop="image" alt="CSC ARMS " elite="" model"="" 2014="" 5.56="" .223="" 16""="" src="/UserImages/142343/945864089/wm_md_6737932.jpg"><br>
</div>
The class "sr_image" doesn't do anything so try to ignore that.
As far as I can tell it should work. Anyone that can help would be greatly appreciated.
Maybe this works
<!--[if lt IE 8]>
<style type="text/css">
a img { display: inline; }
</style>
<![endif]-->
The solution about making the website compatible with IE8 will be temporary, because Microsoft is going to get rid of it anyway.
Check the link below for information on how to resolve the problem:
http://www.codeproject.com/Articles/310368/Make-Site-Compatible-to-IE-IE-IE-and-IE
Alright guys it's working now. What seemed to be the issue was the width property of the div that was enclosing it with the class "listing_thumb". This apparently required a width to be set because the inner wasn't giving the container width information (required static px width).
From:
.listing-thumb {
margin: 0px 10px;
display: inline;
float: left;
max-height: 119px;
overflow: hidden;
}
To:
.listing-thumb {
margin: 0px 10px;
display: inline;
float: left;
max-height: 119px;
overflow: hidden;
width: 170px;
}
So there ya have it folks. If you've exhausted all other possibilities make sure all the enclosing containers have width properties that support the inner html.
When you scroll with the mouse wheel in Windows 8 the fixed background image bounces around like crazy. This only affects IE 10 and IE 11. This affects elements with position:fixed as well.
Here is an example with a fixed background-image:
http://www.catcubed.com/test/bg-img-fixed.html
Here is example code:
#section{
position: fixed;
top:0;
left:0;
background-color:#eee;
background-position: top left;
background-image: url("images/7.png");
background-size: auto;
background-repeat: no-repeat;
z-index: 10;
}
Is there a solution to keep the background still in IE 10 and 11?
I know it is a bit late for an answer but I've had the same problem and was able to fix it by adding these attributes to my css file
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
}
From the comments:
This solution stops scroll events from firing on the window, so do be careful if you're using anything that relies on such events firing. codepen.io/anon/pen/VawZEV?editors=1111 ( overflow: hidden, scroll events don't work) codepen.io/anon/pen/PNoYXY?editors=1111 ( overflow: auto, scroll events fire) - Dan Abrey
So this might cause some problems in your projects. But I don't see another way to workaround this bug in IE.
This looks like a z-index bug, try adding z-index: 1.
Looking into this, I've found the best way to debug is to:
Create a simple element at the top of the page, e.g.
<style>#test {position: fixed; background: red; top: 0; left: 0; width: 4em}</style>
<div id="test">Test</div>
In all the above cases, this works correctly, and the scroll is smooth. So this proves it can be done! Now slowly add your properties back in, until you are able to get the element with position fixed to work in the context of your site.
I then found that adding a z-index to the fixed items resolved the issue. (e.g. z-index: 1)
I also discovered that once a position is set on a child element, the bug presents it's self from that point down/onwards.
So you need to ensure none of the child elements have a position set,
or if they do, you explicitly set a position on each child.
E.g.
<!-- Works -->
<div style="position: fixed;">
<div>Nice</div>
<div>Wicked</div>
<div>Cool</div>
</div>
<!-- Element with position: relative, experiences the bug -->
<div style="position: fixed;">
<div style="position: relative;">sad</div>
<div>sad</div>
<div style="position: fixed;">happy</div>
</div>
It's fixable, but will require some tweaking!
Here is a workaround (tested on Windows 8.1):
Move the "background" CSS property to the BODY element. Currently it is on the DIV element with id="filler". Here is the resulting CSS:
body {
font-family: Helvetica, Arial, sans-serif;
background: #fff url(blue-kitty.jpg) no-repeat fixed center 100px;
}
#filler {
text-align: center;
}
.big-margin {
margin-top: 500px;
}
try to turn off smooth scrolling option.
Internet Options - Advenced Tab - Use Smooth Scrolling
it's like rendering bug.... MS IE team is investigating....
just simply define body container to relative.
<style>
body
{
position: relative;
}
</style>
The fix in my case was to simply remove the z-index property from the element that has position:fixed, IE then stopped the strange flickering.
(disabling smooth scrolling on IE options worked while having he z-index property but that's not a solution since users would most likely have it on by default).
I thought I was getting the hang of CSS and had finally conquered positioning! Well I had until I tested my site locally on my ipad!
Using the below example I just want the background to be black (done no problem). On top of the black background I want the green "content-background" to run across the whole screen from left to right (100%) above the black background. On top of the green "content-background" I want the main-container div. I am not sure why but my example is not working? This should be a simple thing to do??? The problem is noticeable when the browser is shrunk from say right to left and then the scroll horizontal scroll bar is moved to the right. When this happens you will see that the green "content-background" does not expand vertically across the whole screen???
Any help is greatly appreciated : )
Fiddle: http://jsfiddle.net/Margate/Sk5X9/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Positioning</title>
<style type="text/css">
#page-background{background-color:black; }
#content-background{position:absolute; top: 100px; width: 100%; height: 616px; background-color: green;}
#main-container{position: relative; top: 0px; width: 1000px; height: 910px; margin: 0px auto; border: 1px solid red;}
</style>
</head>
<body id="page-background">
<div id="content-background"></div>
<div id="main-container">
</div>
</body>
</html>
I took your fiddle and fiddled with it a little bit to get the desired effect that you had mentioned.
without modifying the HTML here is the new CSS
#page-background {
background-color:black;
width: 100%;
}
#content-background {
margin-top: 100px;
width: 100%;
height: 616px;
background-color: green;
}
#main-container {
position: absolute;
top: 0px;
width: 100%;
height: 910px;
margin: 0px auto;
border: 1px solid red;
}
I find that specifying the body width to 100% gives the child divs a proper reference to the screen size and allows the child DIV ( content-background ) to span the length of the screen.
** because the DIV is no longer "absolute" positioned the top, left, bottom and right properties will do nothing. instead use margins to move stuff around.
as for the border DIV -- because it is after the ( content-background ) Div -- putting this in relative positioning will place it after the ( content-background ) DIV -- by specifying this Div as "absolute" you can place it anywhere on the screen provided you set the top, left, bottom and right properties.
I hope this helps guide you in the right direction for future css usage as there are about a million ways that this example can be written :)
I'm trying to show an image when another image is hovered on. All works fine with Safari, but with Chrome and Firefox, the effect works and the image placeholder can be seen, but they fail to load the image. I have searched elsewhere and found topics to do with visibility:hidden etc, but none that deal with this issue cross-browser.
Here's the HTML:
<div class="profile-picture-wrap">
<a class="propic">
<img src="../images/propicsmall.jpg" width="142" height="194">
<span><img src="../images/profilepic.jpg" width="290" height="186" /></span></a>
</div>
And here's the CSS:
.propic span{
position:absolute;
padding: 5px;
top: 10px;
left: 10px;
display: none;
color: black;
text-decoration: none;
}
.profile-picture-wrap:hover .propic span{
display: block;
position:absolute;
top: -3px;
right: 900px;
left: 640px;
}
Really appreciate any help, thanks.
I tried out your sample code ... and it appears to work fine in Chrome, after one small edit.
I had to change your paths from ../images/image.jpg to images/image.jpg
Have you used the developer tools in Chrome to see if the resource (image) was loading properly?
I added z-index to .propic span css & change the left & right of span after hover to see it properly in jsfiddle window.
Check it here: http://jsfiddle.net/UH54X/1/
I am not sure that it will help you. I think you want like this only.
Turns out the images were .tiff files that had been renamed to .jpg. Chrome & Firefox don't seem to like this, and refused to recognise them as retrievable files.
I am drawing a pointed triangle at the bottom of the div using :after pseudo-element. It works as designed. However, when I add the opacity filter for the div, it stops working in IE (I am testing it on IE8). It works just fine in FF, Chrome, and Safari.
Here is HTML:
<html>
<head></head>
<body>
<div id="demo"></div>
</body>
</html>
Here is CSS:
#demo {
background-color: #333;
height: 100px;
position: relative;
width: 100px;
}
#demo:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #333;
top: 100%;
left: 10px;
}
Run it in IE and see the result that looks like image here: link text
Now add IE opacity filter: to the #demo so it looks like this and run it in IE again:
#demo {
background-color: #333;
height: 100px;
position: relative;
width: 100px;
filter: alpha(opacity=50);
}
Notice that opacity filter works but the triangle at the bottom of the div disappeared.
The same thing works just fine in every other browser (the only difference is that you need to use "opacity: 0.5" instead of IE specific "filter: alpha(opacity=50);")
Does anybody know why this is happening, and how to get around it?
Thanks.
An object must have layout for the filter to render. Pseudoelement :after don't have layout. Sorry to say that.
The problem is that IE Visual Filters (like the alpha one you are using) were developed before :after and :before were implemented in IE.
You should wrap the #demo div with another div container, and put the opacity on that (making sure the container div has layout).
Alas, it is the only way to do ti