EDIT: Solution found. The pink block had overflow:visible !important, which in Internet Explorer invalidated z-index. After removing it, the logo came to the top.
See: http://bit.ly/i7ER3e
See logo "**" (beside top menu) with Firefox/Chrome, it correctly appears above left-content block (the block with pink background).
In IE7/IE8 the logo, it becomes hidden behind the pink block.
I've been messing with this for 2 hours now. Tried a lot of stuff. Can't get it to appear right in IE7/IE8.
Any suggestions?
(Note: I'm working in a really restrictive framework where I cannot simply float the logo before the menu. I have to use position:absolute to place it.)
The problem is not z-index in your case
your body has some line height which is not sufficent...
line-height:180%
change this to 200 or so it works, but still that is not good approach
but just found the issue....
Try using:
z-index: -1;
for the elements that should be below the logo.
try setting position:relative; as well as the z-index.
The default position style is position:static;, and IE has bugs around the z-index handling when combined with static positioning; setting position:relative can solve some of them, without affecting too much else.
See this page for more info. (the link is for CSS3Pie, which is an IE hack to help it support some CSS3 features like border-radius, but the info on the z-index bug is general and likely covers your issue as well)
Related
This seems to be a bug specific to firefox (version 7.0.1), I have copied the offending code into jsFiddle.
but jsFiddle DOES NOT REPRODUCE THE BUG. copy the code from jsFiddle into a blank html document and test it locally to see the issue.
http://jsfiddle.net/kCMeu/1/
This is the normal state of the menu items before you over over any of them:
This is the first sub_item when hovered over wiht the mouse:
And the third sub_item:
And now the last:
Where did that white margin come from around the #global_nav_box div? it only shows up on the hover state of the last sub item.
That is the bug I cant (conveniently) fix.
Fixes I've found are:
Setting the body tag 'margin-top:0px' - but that leave an unsightly margin on the left and right of the page.
Removing the 'z-index' property from the CSS for #global_nav_box - I thought i'd fixed it, until all the content on the page below scrolled over the div when you scroll on the page.
So why does it do this? Can you replicate this on Firefox? How can I fix it?
Thanks in advance.
Update: Ive had some of my friends test it and it (the bug) shows up for some and not for others, I have also tested in in Windows XP mode and it (the bug) still doesn't show up. All my testers were running Windows 7 and Firefox 7.0.1.
I've disabled all plugins and extensions on my install of Firefox and its still there. Insane.
Although I do not know what caused this issue I have found a clean solution for it :)
Could you not wrap the absolute positioned div in a fixed div like this: http://jsfiddle.net/HelloJoe/JXWNj
Source: HelloJoe
His solution from the previous thread that was the cause for this one fixed everything. :)
http://www.mapleboutique.com/_blog/maple_blog
can someone explain what's going on here? according to this link: http://austinmatzko.com/2007/07/25/internet-explorer-7-float-bug/ –I thought it made perfect sense. I had container elements with set heights causing the weird floating. But after spending an hour going through and essentially deleting any associated heights I still have the problem in IE7/windows.
You need to remove clear:right from .blog-post .post-body to fix the heading overlap with the image and remove zoom:1 from .post-body a to fix the text-wrap around the image.
The heading is also floated and cleared right but clear:right on the post-body seems to be causing IE to clear all the floats, even the heading.
The zoom:1 seems to be clearing the image's intended float by giving the image layout.
As #Webars has already said, this layout is overly floaty and should be simplified and could be done without the need for zoom hacks. However in the meantime, the IE specific styles (zoom being one of them) could be added to a seperate stylesheet and included for IE only using Conditional comments.
I have this small testcase: http://jsfiddle.net/sV8js/
You can see that in Chrome (tested on win7 11.0.696.68) the first 2 links right border is "cut off" and is not shown. FF and IE 7/8/9 seem to show it OK.
Browsershots: http://browsershots.org/http://top3skills.com/1.html
Also "buggy" on Safari (so it's webkit related?)
Anyone knows what's the problem with this approach or how to solve this?
(or if I should report a bug to chrome) Any workaround that doesn't affect other browsers?
Also, my testcase is different from Right border not displaying on google chrome but maybe it's the same bug?
Updated: I don't want to use inline-block as IE7 doesn't support it and I'm finding this bug because I'm removing the inline-block I previously had there :) Also this is dynamic so it's not easy to add after each link because some links can break to a new line, others don't... so I'm trying first to get the "right way" and then resort to more "tricky" ways.
You have set the containing DIV at a fixed width of 250px. This is cutting off the edges. Also, you should add display:inline-block; to your CSS link class. This will make your link a block element while keeping it inline. It will also apply the padding you have asigned properly.
See updated link here http://jsfiddle.net/sV8js/12/
Dan
Try giving those links a display: inline-block or display: block property, as links are inline elements.
you need to add display: block to .referencesSkills
In the bottom cap of this page (bottom with corners) I seem to be having a weird IE6 issue. I've tried Google with no luck, as really, how do you ask this question.
In IE6, the corner images that are floated left and right seem to cause the whitespace to drop.
http://www.duncanhadleytriathlon.ca/
Any suggestions for why this may be?
Are you using paddings? If so, you must subtract the padding from your other values (left/right).
I don't know if it helps or not but I noticed that there is also an issue (probably the same one that you said) in Firefox 3.6.3.
I suggest you use the DD_roundies javascript for making rounded corners in IE browsers. It can be found at:
www.dillerdesign.com/experiment/DD_roundies/
[Edit]: The issue that i said is about the green panel's rounded corner at the bottom of the page.
My suggestion would be to use position: absolute to place the images instead.
Other ideas would be:
Drop #mtmi and just make the background of #mtm white (you'd need to modify the images to make the background black instead of transparent.
Even possibly drop #mtm and but the images directly in #main
Ignore old browers and use CSS3 rounded corners.
I have a div and an iframe on the page
the div has
z-index: 0;
the iframe has its content with a popup having a z-index of 1000
z-index: 1000;
However, the div still overshadows the popup in IE (but works fine in Firefox).
Does anyone know what I can do?
Explorer Z-index bug
In general, http://www.quirksmode.org/ is an excellent reference for this sort of thing.
Which version of IE?
I'm no javascript guru, but I think hiding the div when the popup pops might accomplish what you need.
I've had to work with divs and iframes when creating a javascript menu that should show overtop dropdown boxes and listboxes -- other menu implementations just hide these items whose default behavior in IE6 is to show on top of any DIV, no matter the z-index.
I face the same problem. The problem in my case is that the content in the iframe is not controlled by IE directly, but by Acrobat as it is a pdf file. You can try to show the iframe without the content, in which case the popup displays normally. For some reason IE is not able to control the z-index for external helpers.
It was tested with IE7
Without seeing your code, it's difficult to determine the problem. But it's worth noting that z-index only works when the element has been positioned (e.g. position: absolute;), so perhaps that could be an issue?
There's a good article on CSS Z-index from the Mozilla Developer Center.
Without seeing a code snippet, it's hard to determine what the issue is. You may want to try appending an iframe under your popup that is the same size as your popup. With IE7 if you render the iframed popup after the other iframe has already loaded you should be able to cover up elements that are beneath. I believe some JS calendars and some lightbox/thickbox code does this if you are looking for examples.
never set your z-index to anything bellow 1 enless you want to hide it. I'm not sure about 7.0 but older versions of IE I've had issues with doing that. IE doesn't like z-index that much. Also check your positioning. Positioning may be your issue. sorry, i don't have enough info to help you further.