I have created a page with a "back" button at the bottom right. It looks well positioned in Firefox and more modern browsers however in Internet Explorer 6 the "back" button is missing.
http://www.aetnamarketingcommunications.com/DentalQuiz/QuizTestPage.html
I have tried adding z-index property to this absolute positioned image button without success...what could be the issue?
Thanks, Attila
To fix this bug, try clearing your absolutely positioned element by adding clear: both to the anchor styling. It's a bug in IE6, and has nothing to do with floats.
IE6 is below 1% usage, not sure why you want to support it.
Special Note About Z-Index (IE): If you're using z-index in IE6-IE8, it should be noted that the stacking order in IE gets reset whenever you apply position: absolute, so the z-index is not relative to any of its parent containers.
I don't test for ie6 anymore but I would try *zoom:1 ing everything like so
* {
*zoom: 1;
}
and narrow it down from there..
Related
On a freshly loaded site, when I go inspect an element, a CSS property is always unchecked. It's there and I can enable it, but it's unchecked by default.
The style is position: sticky
Tried this in different browsers:
* Chrome and Firefox: it's unchecked, but I can toggle it
* Safari: it's "commented out" and also I can toggle it
To be clear: I don't see any other position styles being applied on that same element.
Any ideas?
Figured it out - the style was actually commented out in code.
What surprised my was Dev Tools picking up commented out styles and listing it.
Updated: as #sebastian-zartner pointed out, these commented out styles will always be displayed
An element with position: sticky; is positioned based on the user's scroll position.
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
Safari requires a -webkit- prefix
Please see the screenshot below. I have a jQuery menu and an iframe that loads a PDF document. In Chrome and Firefox this works perfectly and the menu appears over the top of the iframe. I have a z-index: 2 on the menu and a z-index: -1 on the iframe.
Any ideas of how to fix this in IE?
EDIT: jsFiddle
http://jsfiddle.net/hkA2v/1/
Try adding position:relative; on iframe.
iframe{
position: relative;
}
Not directly related to this specific issue.
But people, who are struggling with z-index similar issues in IE9 might consider adding a transparent background in some cases.
Because in IE the element with a link must have a background in order to be click-able. Otherwise the mouse ‘sees right through it’.
background: url(transparent.gif);
Source: Forum Post
Make sure all elements with z-index are siblings of the same parent. If you start nesting elements inside elements and apply new z-index properties to those children, the z-index will start from the parent's z-index, not any z-index properties set before the parent.
IE is very picky with z-index.
I have the following website: http://dev.driz.co.uk/phase/about.php
If you view the website in IE7 you will see that the drop-down menu in the top left does not appear above the main content area. This is because of the stupid IE7 z-index bug, however the normal fix of making the parent element have a high index to make it fix the child would not work in this instance as I need the parent header to sit under the main content...
Any ideas on how to fix this based on the layout structure I have? I've tried most of the IE fixes on the net, including a jquery solution that resets the z-indexes in a loop, but none of them have solved the problem.
You need to give your header a z-index less than your nav element.
IE7 is a pain with z-index, you need to habe a structure like this.
Header - z-index:2
Content - z-index:3
Nav - z-index:4
Along those lines, sorry I can't be more help.
I've found that when having problems with z-index in IE, that setting the elements you want to be affected by the z-index to have a relative position.
i.e.
#block {
z-index: 1;
position: relative;
}
Ok, I'm stumped!
If anyone has a suggestion or two on a CSS / JavaScript fix for an IE7 z-index issue on this page without changing the DOM structure much (it's set up for easy tab usage) I'd be incredibly happy to try it out.
On this page, IE7 renders the bar that spans 100% of the width of the page above everything else, while I actually need to cram it very specifically between the text and the hero image (as seen when viewed on any modern browser).
Here's the link.
Thanks.
IE7 has known bugs with z-index, see: IE7 Z-Index issue - Context Menu
In this specific instance, you can fix it by changing a few parts of your CSS. Complete each step and check the progress as you go:
On #container remove position:relative .
The z-index issue is now fixed, but everything is in the wrong position!
On #thumbnails and .pane_img remove these properties: position, top, left, z-index.
On .pane_content, set left:50%; margin-left:-480px; bottom:90px.
On #learn_more_btn and .renova_logo, repeat the left: 50%; margin-left: ??px method to place the elements back where they should be.
I got an element fixed in the center of the screen, having specific dimensions (let's say 500x500). The element has content, which is larger then the height of the element and thus causes scroll bar to appear, which is fine. In FF/WebKit everything works nice. However in IE 7/8 ... content of the fixed element doesn't scroll, or scrolls with HUGE delay. If I change position:fixed to position:absolute, it starts to scroll fine, but with position:fixed... it's just a pain!..
Is it some known issue? Anyone heard/encountered something like that? Any ideas how to deal with such?...
Only thing any useful I could find on this subject was this, How to create Position:fixed in IE5.5+.
Position:fixed was implemented in IE7. Maybe it still has some issues with it, but there might be something else in your markup or CSS that would cause such behaviour.
It'd be beneficial if we could see some code to help us with your problem.
It turned out that there was additional problem to this - shadow filter beneath that element with position:fixed and scrolling content within it. We couldn't find any solution to this other then either disabling shadow filter in IEs or disabling position:fixed.
:(
.fixDocument
{
position: absolute;
top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
}
Check this page: http://www.gunlaug.no/contents/wd_additions_15.html