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.
Related
I have created a page that has similar functionality to that of the DiggBar (i.e. a header of specified height and an iframe below filling the rest of the page).
I had this working a while back with desired results, but all of a sudden the height of the iframe has gone from 100% of the remaining page height to only 44.8px. The catch is that this is only occurring in one browser — Firefox on Ubuntu.
I thought that this should be happening in all other browsers, but it's not. It displays correctly in IE, FF, & Chrome on Windows and Chrome on Ubuntu.
Finally, using Firebug, I have selected inspect element to try to determine what's going on, but it only tells me that my height is defined to be 100%, but that it is computed to be only 44.8px.
I am looking for some guidance as to how best to debug this issue because I have completely run out of ideas. I didn't think that it would be necessary to post all of the code that produces this problem, but if any is absolutely needed, just ask.
Thanks.
Unfortunately the Cascading part of the Cascading Style Sheets threw me off. I had another (let's call it 'hidden') reference to the parent of the iframe which caused the weird height calculation issue.
Funny that this only happened in my Ubuntu version of Firefox, though.
If you have a complicated layout structure, setting height of all divs to 100% may break the page layout. In this case I recommend using javascript to set the height of iframe to 100%. In my case I used JQuery, but I believe pure javascript DOM functions should also work. I set the height of iframe equal to parent div height:
$('#doc-preview iframe').height($('#doc-preview').height());
Here the doc-preview is an id of iframe's parent div.
Make sure to run this script after the page has been loaded.
I've done this in the past using a method similar to this:
http://javascriptkit.com/javatutors/static3.shtml
but I don't like the "flicker" effect as the page is scrolled and the div needs to move with the scrolling. Lately I've seen a lot of site that have an element (a div or the like I presume) that don't move when the page is scrolled but it's seemless...they're just there and it's a beautiful thing.
Unfortunately I can't seem to recall where I've seen it lately to view the source and try to figure it out so I figured I'd turn here and see what all of you experts can provide as far as assistance / suggestions.
TIA
Try setting "position: fixed" to the element.
I think this does not work with some IE versions, you'll have to us JS for that.
That site you linked to still mentions thing such as IE 4 on it, better no rely on it. It's outdated.
You can position an element to a fixed position with CSS, by doing position: fixed;.
Take a look at google reader.
It has a fixed header and a fixed side bar.
Issue is Menu is not overlaping or float, above the IFrame i am design the menu with table and Div tag in Usercontrol From and i called Usercontrol from in the Index.aspx.
If any got the idea or experience to solve this issue please help me Thanks for Time and help
Hari
Most likely, you are running into an issue with z-index. For your menu, set the z-index for it and all of it's child controls to a high number, and then set the z-index on the iframe to a low number. If this doesn't solve your problem, you are going to need to continue setting the z-index in the parent elements of both your menu and your iframe because in some (all?) browsers, z-index does a sort of propagation, where if a parent has a lower z-index than one of its siblings, then the sibling will get priority and end up on top.
You also need to make sure that your elements have the css position property set to something other than the default, because z-index only works with positioned elements.
There are also known issues with older browsers with regards to iframes, so if you are using an older browser, try something more modern.
iframes are a tricky beast, so you are really going to have to experiment with various things to figure out your exact issue. I could provide more information, but I would need to see an example of your HTML/CSS where it isn't working.
From the Google Results page, the examples I saw were working only in IE and one case in Opera.
Is there any way this can be done consistently across all browsers?
Also, is there a difference between the main scrollbar of the browser (which appears across the whole page) and the scrollbar in a text area withing the page? Can I manipulate only the latter if not the former?
You can create your own scrollbars within a page using a combination of CSS and JavaScript. See https://stackoverflow.com/questions/780674/scroll-bar-with-images.
However, rendering of the scrollbar outside the page is up to the browser.
WebKit recently added the ability to style the default scrollbars, but this still only applies within the page.
EDIT: It seems that MooScroll has managed to 'replace' the browser's main scrollbar by telling it there's nothing to scroll and then creating their own scrollbar at the right-most side of the window. Clever!
Steve
Steve had a good answer, but allow me to continue.
In IE 5.5-7 (but I think they're getting rid of it in 8), you could style the scrollbars with some proprietary MS CSS properties. I wouldn't recommend this.
Steve mentions that the scroll bar outside of the page is up to the browser. Whilst this is true, you could fake it by setting the body element to overflow: hidden and then placing a huge container in the HTML with height: 100%; width: 100%.
I wouldn't recommend you touch the user's scroll bars. They are a well known convention, and they are quickly recognisable by the end user. They know how to use the default OS styled scroll bars, not your quick attempt at cross browser CSS/JS implementation. I think it was Steve Krug that said 'Don't make me think!'
Have you ever seen Flash sites that rolled their own scroll bars? ugh!
There is no cross-browser method.
Short answer no.
The appearance of the browser is out of your control unfortunately - you're only supplying the contents. It's up to the browser to decide how it wants to scroll the contents.
I have an ASP.NET application that renders a 3rd party (Telerik's) menu control under
another control (RadDock) when the menu expands.
This artifact ONLY happens in IE7. Not in Safari/FF/Opera/Chrome (Have I left any out?)
The menu control needs to be rendered OVER the other control.
I have Google'd this a fair amount, but have yet to find a simple solution to fix it for IE7.
What is the easiest to solve this problem for IE?
Also do you know if this z-index problem has been resolved in the (pending?) IE8?
This Q is not meant to start a browser flame war. Please only respond if you have a
relevant comment.
Thank you kindly.
I don't know if this is similar or not, but I had an issue with z-indexing where when the z-index was applied to the elements of a container, but not to the container itself, the z-index wasn't being properly applied to the child elements. This manifested itself as background borders appearing over the top of the menu items that should have been on top. I solved the issue by applying the same z-index to the container holding the menu items. I don't know how the Telerik controls set up their CSS, but you may want to check that the class being assigned to the container has an appropriate z-index as well as the menu items themselves.
I've had some problems like that before, although not with the 3rd party controls you mentioned. Check to see if either of the controls sets it's own z-index conditionally if the browser is IE. If that's not the case, try setting a specific z-index for each of the controls (or their containers) to make sure IE doesn't fall back to some sort of default unknown z-index.
If the z-index changes do not fix it, it may actually be a positioning problem rather than a z-index problem. Positioning problems are quite common (from my own experience) when you try to do cross-browser compatibility.