I am struggling trying to figure this one out. I have an article that has two elements being inserted :before and :after it that are both being positioned absolutely within that article.
In all browsers except IE8 the z-index stacking is working perfectly. It should go in this order from bottom to top:
Article Content > Fade Out Image > Icon
I have already tried a few different things, the latest of which can be seen here: http://jsfiddle.net/LtYMV/2/
A basic run down of what I'm trying looks like this:
article {
// styles
}
article:before {
// icon background image used on inserted content
}
article:after {
// background image used on inserted content
}
I know there is some sort of trick to this I just can't seem to figure it out with any combination of z-index values. Help appreciated!
IE8 is weird when it comes to pseudo elements and z-index. There's a bug that make child elements kind of inherit (without being able to overwrite) the parents' z-index. You can read more about IE8 and z-index on quirksmode.
I changed your fiddle a bit to work the same way as your example in standards compliant browsers and to work alright in IE8, but without the fade in IE: http://jsfiddle.net/LtYMV/8/, although with the icon under the text.
I also created a version where it's using another element for the icon (with the class "icon", just after each ".post" element). It still hasn't got the fade for IE8, but the icon is over the text: http://jsfiddle.net/LtYMV/7/, so it's a slight improvement from the previous one.
Hope this helps!
Related
In the past days I switched my menu to mobile friendly version. Is nearly done so far, only one issue remains: In the desktop version I've positioned the submenus absolutely so that they cover what is below when made visible. However, in the mobile version I would like to have them in regular textflow, so that what is below slides down when I make them visible. I'm using mediaqueries and have tried to set the position attribute to "static" but this didn't work:
#Navigation li ul {
position: static;
display: none;
}
My test page: http://ulrichbangert.de/indexr3.php (Resize the viewport to a small width until the menu has one column.) I've used this tutorial: http://www.menucool.com/ddmenu/create-mobile-friendly-responsive-menu.aspx where it works just as I want it to. However I cannot use this one-by-one as I wanted to keep the layout of my existing menu. Best regards - Ulrich
In the meantime I was able to solve this problem on my own: Apparently some CSS attributes cannot be changed when they are in a nested list and not on top level. In this case the attribute position. Afterwards I had the same problem with the attribute width which I could not change to 100% and the attribute padding-left which I could not change either. And some years ago when I implemented the initial version of this menu with the attribute height, which I could not change to auto on hover after setting it to 0 initially. Only setting to a fixed height worked.
How can this be? Is it intended or is it a bug in the browsers implementation? (I tested with firefox).
Anyway my menu works fine now, just as I figured it.
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.
Here's a JSFiddle that breaks uniquely in Internet Explorer 9. I'm hoping someone has seen this and knows how to resolve it.
http://fiddle.jshell.net/se9Kc/1/
Note that the scroll area top edge decoration, or "fader", gets clipped on the right side in IE9.
I understand it's natural to question the use of "fixed" at this point. The full page has an inset scrolling table with an absolutely-positioned header, adjacent to the search criteria. The "fader" is anchored to its non-scrolled (but still fluidly-generated) origin with position: fixed.
The defective algorithm seems to go like this:
correctly generate the visibility mask and content for the fixed element
correctly position the element content as requested
incorrectly position the element visibility mask against the left edge
Help?
After doing a bit of testing, it seems like using javascript to handle that particular css property allows it to function properly.
Remove:
position: fixed;
and add somewhere on your page:
<script>
$(.fadeTopGradient).css({'position':'fixed'})
</script>
If you would like accomplish this with css alone, I'm not 100% sure what to tell you. Though I did see a question regarding position:fixed in IE9 asked before here: position:fixed breaks in IE9
I hope this helps.
I've just been experimenting with a CSS tooltip that fades in with CSS3's transitions. I was going for a tooltip effect that when you hover a link, the tooltip appears, but fades in using only CSS3.
I've got it working up to a point, but for some reason, when I hover over where it's meant to be, it activates, even though it's initally positioned left:-999px;.
So basically, what am I doing wrong/is what I was going for possible? (Note I don't want to do anything with JS/JQuery, was just curious to see if I could do it in CSS)
You can see and play with it here.
You need to set the tool tip to not even be shown normally.
#one a.tooltip span {
//display:block;
display:none;
....
}
Edit: It seem that rather then set display to none, just position to absolute.
Edit2: it seems I was beaten to it.
Your span is still in the document flow.
You can remove it by setting its display to none, as the comment above suggests, or setting its position to absolute, which seems to be what you were getting at to hide it off the left edge of the screen.
I'm having a problem with a dropdown menu under IE (6 and 7).
http://www.amaconsulting.pl/promocje.html
As you can see, the dropdown hides behind the main content area in IE.
It's a known bug and general advice is to set a z-index for header and content areas, so IE knows their "place", explained in the article here: http://bit.ly/coSPcI
I've set the z-index of .header div to 20 and .featured, .content, .primary, .main to 1, trying to find the right div to fix the problem. While the dropdown stopped hiding behind the .featured div, it still hides behind the main content divs (either .primary or .main, .secondary is fine).
The z-indexes for these divs are set in a separate stylesheet, ie.css, in case someone'll be looking for them.
If someone could provide some advice, I'd be very grateful.
Ok originale solution here - Swiss credit website. This works but uses a complicated z-index solution.
Here is very simple and improved solution here - Jeyjoo stock image gallery
This works in IE6+, firefox, opera, safari and chrome
Solution
The HTML
<div id="container_page" class="container_page">
<div id="container_header" class="container_header">
NAV BAR GOES HERE
</div>
<div id="container_body" class="container_body">
...body text...
</div>
</div>
The CSS
#container_page #container_header {position:relative;z-index:2;}
#container_page #container_body {position:relative;}
why it works
You have to tell IE how the two divs relate to one another.
In IE if an absolutely positioned element has a z-index then it’s containing relatively positioned element must specify a z-index (z-index:1) in order for the absolutely positioned element to be able to appear on top of other relatively positioned elements.
So I think that you need to give your ul.nav a z-index of 1. I actually wrote about this on my blog.
Updated:
So if I change the visibility style of the hidden ul to visible it appears above the div as it should as long as ul.nav has a positive z-index value. Therefore, I think that this has something to do with the way your JS renders the dropdown menu from that hidden UL. Unless I have all your HTML/CSS/JS I can't really solve this so I can only point you in the right direction and I think that understanding this page will help you a lot.
I managed a z-index work around here on a submenu - Chkredit - swiss credit website
Works in all versions of IE and is light and 100% CSS (no javascript).
IE does not use z-index correctly.
Check the z-index's in the CSS code of the website. You will need to put a z-index -1 on the items your menu is hiding behind.
I working on exactly the same problem for my own image gallery right now (go to "top image" page) - jeyjoo image gallery. When I sort this one out, I will post the full solution here.