I am using a JQuery plug-in for image zoom, which is not working properly in IE7, The position of zoomed image is different.
in Firefox:
in IE7
<span class="zoom" style="position: relative; overflow: hidden;">
<img width="100px" height="100px" src="../gallery/sample/pic.jpg">
<img class="zoomImg" src="../gallery/sample/pic.jpg" style="position: absolute; top: -321px; left: -277.5px; opacity: 0; width: 420px; height: 336px; border: medium none; max-width: none;">
</span>
.zoom{display:inline-block,margin:10px;}
.zoomImg{z-index:5;}
The display:inline-block CSS statement displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box. Try to play around with this, it is known bug in IE7 and earlier with this property.
One more thing, as stated on the plug-in website: Compatible with: jQuery 1.7+ in Chrome, Firefox, Safari, Opera, Internet Explorer 7+. So, apparently the plug-in works in browser above IE7 .
So, IE is fun. IE7 and older handle z-index slightly differently to newer browsers (Reference).
In IE7, each element with an assigned z-index creates a new stacking context. This means any elements z-index nested within it are stacking in relation to the parent element.
A simple example:
<div id="container-one" style="z-index: 1;">
<p id="para-one" style="z-index: 99999;">Paragraph One</p>
</div>
<div id="container-two" style="z-index: 2;">
<p id="para-two" style="z-index: 1;">Paragraph Two</p>
</div>
In this example, #para-two would be above #para-one. "But #para-one has a huge z-index, it must be above everything". #container-one has a z-index lower than #container-two. They are now separate stacking contexts.
#para-one's z-index is only in relation to everything within #container-one.
Also, for extra fun, opacity creates a new stacking context as well!!
Ok, for your code, I had to guess a little as to what the full html was because you didn't make a FIDDLE!!!. I got it working here in IE7, just to give you an idea as to what you need to change.
Fiddle
I've set the .zoomImg to have a z-index higher than it's sibling .div elements. Note, I removed opacity and added a z-index instead. This is to forcefully assign a higher z-index. You can put it back in, but remember opacity creates a new stacking context in IE7. That means if you give an element an opacity, it's z-index and it's children are seperate from it's current context. Welcome to IE7, have a nice time.
EDIT: IE7 needs a different property for opacity --
filter: alpha(opacity=50); - SOURCE
Try IE7.js. If it does not work, simply forget about supporting this outdated and buggy browser.
Related
At the moment I have a setup similar to this:
<a href="#">
<div style="width: 50px; height: 20px;">
<span>Blah</span>
</div>
</a>
Which works perfectly well in Chrome. It fails W3C validation, however - IE apparently has issues with it.
I've considered using JavaScript to do it, but I know a lot of older web-users disable JavaScript for security concerns (personally, I'd just stop using old versions of IE. the pains)
But I was wondering, what's the HTML5 approved way to do this?
Before anyone downvotes, I'd like to reiterate that I'm asking specific to HTML 5.
It's perfectly valid HTML5 if you fix the missing quotation mark in your style attribute. Try putting this in the HTML5 validator:
<!DOCTYPE html>
<head><meta charset="utf-8"><title>Something</title></head>
<body><a href="#">
<div style="width: 50px; height: 20px;">
<span>Blah</span>
</div>
</a>
</body>
Just use CSS to make the anchor a block or inline block element so it can be given a height and width. Use either a CSS selector or an inline style attribute to assign display:block or display:inline-block, set the height and width, and get rid of the div.
<a href="#" style="display:block;width: 50px; height: 20px;">
<span>Blah</span>
</a>
If you're not sure about block vs inline-block, there are lots of articles on the web. However, block elements exist on their own line (barring things like float), but may have a height and width (amongst other things). inline-block can also be assigned height and width, but can exist inline with other elements. Caveat, some browsers cougholdversionsofIEcough don't understand inline-block or have bugs with it (there are ways around that). inline (the default for a), technically can't be given a height or width. And obviously the insinuation here is you can make inline elements behave like block elements, and vise versa.
EDIT
As per the comments, here's a CSS hack to make inline-block work reasonably well for proper browsers and also IE7-8.
.my-inline-block-element {
display:inline-block;
zoom:1;
*display:inline;
width: 50px;
height: 20px;
}
Good browsers will see display and use inline-block. IE7-8 will say WTF is that and do something stupid. But it'll see zoom which will trigger hasLayout, and because of a bug, it'll process *display:inline (but other browsers won't because * isn't allowed) and set display back to inline. But since we've got hasLayout, it'll now use the height and width but remain inline. Confused? Annoyed? Good... IE sucks.
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 2 years ago.
<div class="content-wrapper">
<div class="popup">
<div class="close">
</div>
</div>
</div>
.content-wrapper is relatively positioned and contains all the page content (not just the popup).
.popup is absolutely positioned.
.close is also absolutely positioned.
I have some javascript to move close when the cursor enters popup (so I have a nice close bar appear out the side). The best way I have found to do this is just to move using jQuery animate. Hiding/showing creates a stuttering affect even .stop() wasn't able to solve. My problem is in trying to hide .close behind .popup. No matter what z-index I set for the two divs .close will not sit behind .popup.
Is it possible to have an absolutely positioned div inside another absolutely positioned div sit behind its parent, and if so how?
Yep, use z-index: http://jsfiddle.net/tGd4Q/
HTML:
<div class="content-wrapper">
<div class="popup">
<div class="close">
</div>
</div>
</div>
CSS:
.popup, .close { position: absolute; height: 200px; width: 200px; }
.popup { background: #f00; }
.close { background: #ff0; top: 25px; left: 25px; z-index: -1; }
This won't work with IE7 standards though. I suggest using jQuery(or other framework of your choosing) to hide the div:
$('.popup .close').hide();
Stacking indices are most of the time relative to siblings, so you cannot put a child behind it's parent using z-index.
Here is some more information about that.
This is the stacking order:
The borders and background of the current stacking context
Positioned descendants with negative z-index
Nonpositioned block-level descendants with no z-index property defined -- paragraphs, tables, lists, and so on
Floating descendants and their contents
Nonpositioned inline content
Positioned descendants with no z-index, z-index: auto, or z-index: 0
Positioned descendants with z-index greater than 0
Nick McCormack uses z-index: -1 in his answer. This is indeed one exception to what your feelings give in. Beware that z-index: -1 moves an element behind many of your elements to the background.
Browser differences
Beside that, Internet Explorer does not support negative stacking indices and is very strict with element (child/parent) positions. Every element level has it's own stacking context, so have to 'communicate' via the parent element. See this explanation.
According to Smashing Magazine, the select element, which is a windowed control, has naturally a higher stacking index.
According to the Shadowbox troubleElement option, I presume that object, embed and canvas have the same issues.
If you want to hide .close, why don't you really hide it instead of moving it behind .popup?
$('.close').hide();
No, you will not be able to put it behind its parent. However you could change its display mode to none, so it isn't seen at all. Then when you need to see the div, change it to show.
Simple jQuery:
$('.close').hide();
$('.close').show();
There are other ways as well, such as adding an attribute of style with display:none or display: inline-block as a setting.
Update: According to comments in other answers, there IS a way to do it with z-index. Still thinking the hide/show is the way to go though. Very clear what you are doing on your UI.
I have an element on my page that has "display:none" and "visibility: hidden" applied to it. Yet IE 7 still displays the element. Not only does it display the element, when I open developer tool bar and inspect said element it tells that it is indeed not displayed and not visibile.
Furthermore, When it's in its original state I can't use the selector tool in the developer tool bar to select the element, until I manually remove the "display:none" and "visibility: hidden" rules.
It's as if IE 7 is interpreting my style sheets correctly but the rendering engine is flagrantly ignoring them
Here's the CSS
.ModalTypeTwo .button-wrapper { display: none; visibility:hidden; }
Here's the mark up
<div class="MyModal ModalTypeTwo" id="sb-wrapper" style="top: 20px; width: 926px; left: 328px;">
<div class="footer wrapper">
<div class="corner left"></div>
<div class="corner right"></div>
<div class="button-wrapper" id="btnContents">
<a title="contents" id="sb-nav-button">
<span>Contents</span>
</a>
</div>
<div class="button-wrapper" id="txtContents">
<div id="sb-title">Lorem Ipsum </div>
</div>
<div style="cursor: pointer;" onclick="Modal.next()" class="button-wrapper" id="btnNext">
<a title="Next"><span>Next</span></a>
</div>
<div style="cursor: pointer; display: none;" onclick="Modal.previous()" class="button-wrapper" id="btnPrevious">
<a title="Previous"><span>Previous</span></a>
</div>
</div>
</div>
Notice that the above rule should apply to #btnContents, #txtContents, #btnNext, and #btnPrevious, however in IE& only the later 3 are hidden.
Try applying overflow: hidden; on ModalTypeTwo. I had a similar problem in IE7 and hiding the overflow of the parent fixed it.
http://jsfiddle.net/UugDU/
I added some start and end text just to make sure the result was being rendered at all.
I have no problems in IE7. It must be a problem somewhere else in your code. I suggest you start with the full version of your code, and whittle it down to the minimum required to produce the error and post that.
If this helps future Googlers of this issue, the problem is with how Internet Explorer versions 4-7 interpret "visibility:hidden" in CSS. Those older browsers will hide their immediate content, but not their HTML children's content. In addition, IE5 had a weird "reverse" bug to that problem where adding "visibility:visible" to an immediate content element under the hidden parent would not be visible. That is based on my knowledge of the issue and could have more subtleties I missed.
In general, if you are testing in IE7 browsers, try and avoid showing and hiding things using "visibility". If you must hide something in those older browsers, just remove them completely using "display:none", which was almost always universally reliable in these older browsers. Or, if they must be accessible in the page for IE7 users, just not shown to them, you can move them quickly off the page using CSS as shown below. Note: This will not affect your page design or layouts.
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
I'm aware of the z-index problem in IE7, but I have a strange situation here, and none of the fixes suggested online seem to work. I've got a list of items, each one has a pop-up bubble div inside the "li" tag, like so:
<div class="inner">
<ul>
<li onmouseover="bubbleOn(5661)" onmouseout="bubbleOff(5661)" id="c5661">
<img src="/images/new/simple-dot-brown.gif" class="coloredDot" />
Asthma,
<small id="year5661">1974</small>
<div class="mouseover-bubble orange" id="bubble_5661" style="display:none;">
<h6>Asthma</h6>
<div class="definition">
<p>A form of bronchial disorder....</p>
</div>
</div>
</li>
</ul>
</div>
Here is the relevant CSS:
div.mouseover-bubble {
position: absolute;
width: 360px;
left: 10px;
bottom: 10px;
z-index: 10000;
}
As long as I leave the CSS the way I received it, the pop-up works fine. But I've been asked to move the popup divs below the matching "li", instead of above it. If I change the line "bottom: 10px" to "top: 10px", then suddenly in IE7 the z-index fails and I can see the information that should be hidden underneath the pop-up div. Anyone have ideas why this would happen? Most of the IE7 z-index stuff I find talks about positioning, but I'm not changing the CSS positioning, just switching "bottom" to "top".
i got the same problem this moorning... you'll have to put the element in position:relative
Another way to do it is to set the parent's z-index to something higher...
dont ask me why... but it works
EDIT sorry.. i've just seen that you cant change the position to relative.. try the second option and let me know it that works
How do you overlap an element over another element that is positioned relatively in Internet Explorer? Z-index doesn't work, it always appears behind the relatively positioned element.
Looks like I'm kidding, but I am not
.myLinkCssClass {
background : url(#);
}
You're not by any chance trying to put something over a combobox (select tag), iframe or flash movie right?
In those cases z-index is a lost cause.
Otherwise what browser version are you using and are you using absolute positioning?
I had a real pain with this problem that this particular workaround wasn't relevant for. It's a little hard to explain so I'll try using code:
<div id="first" style="z-index: 2">In between</div>
<div id="second" style="z-index: 1">In the back
<div id="third" style="z-index: 3">Foreground</div></div>
The problem is that setting the parent's z-index to a higher value would move it to the foreground instead of the back where its supposed to be. I stumbled upon a solution completely by accident: I made a copy of the foreground element (id=third) outside its parent.
<div id="first" style="z-index: 2">In between</div>
<div id="third" style="z-index: 3; visibility:hidden">Foreground</div>
<div id="second" style="z-index: 1">In the back
<div id="third" style="z-index: 3">Foreground</div></div>
Its worth mentioning that in my original code the elements don't have IDs so I don't suffer from 2 elements sharing the same one and invalidating my HTML.
I think its safe to classify this weirdness as another bug that happens to help with the original, but it works, at least for me. Hope somebody finds this useful!
Create and then set an additional transparent background image on the element you want to have on top. For me it finally worked in IE8. SASS:
#galerie-link {
position: absolute;
z-index: 1000;
top: 25px;
left: 40px;
a {
display: block;
width: 185px;
height: 90px;
background-image: url(../images/transparent.png);
}
}
I wanted to note that if you are using IE8 and below, it does not support CSS3 filters. This was my issue.
I was using:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#black00', endColorstr='#black00', GradientType=0);
No matter what I set my position or z-index to, you could not see the other layer because it was causing a complete mask over that layer (instead of going from clear to black and to clear again).
By removing the CSS3 filter for just IE8, I was able to solve my problem.
Hope this helps someone who runs into the same issue.
I had the same problem in an html where many repeated relative positioned divs were blocking absolute positioned div's view. The workaround provided by www.brenelz.com, that I've already used with success wasn't working in this case. So, the following worked for me:
I removed the relative positioning from those divs I've mentioned first, then added a CSS to turn those divs on relative when hover. Let me show you the code:
Before:
DivThatYouMustHover {
height: 300px;
position: relative;
width: 200px;
}
After:
DivThatYouMustHover {
height: 300px;
width: 200px;
}
DivThatYouMustHover:hover {
position:relative;
}
This way the others 'sisters' of that div stay with normal positioning and don't interfere with the layout.
It worked very well for me! I hope it helps you too.