Need a new set of eyes on this. (HTML/Javascript)
-
Can someone give me a hint why IE6 isn't displaying the header correctly. I have tried many z-index related configurations but the flash is STILL sitting on top of the text that should be on the right. I have been at this for a couple days here and i'm begining to lose my mind.
Thanks for any help,
ajp
-
Works fine in Firefox, so the problem is brought to you by the letters I and E, and the number 6.
I know IE's got a majorly stupid bug in that dropdown form elements are considered top-level objects (ie: z-index +MAX_INT) at all times, and will leak through any content you float over them. Possibly the same thing's happening with the Flash movie. The workaround is to put a bogus <iframe> tag right after the content causing the problem, which apparently confuses IE and lets the leaking element get covered up properly.
-
Thanks for your input, MarcB. But i finally hit on a solution that doesn't involve spurious iframes. Basically just a series of absolutely and relatively positioned divs.
-
@MarcB said:
Works fine in Firefox, so the problem is brought to you by the letters I and E, and the number 6.
I know IE's got a majorly stupid bug in that dropdown form elements are considered top-level objects (ie: z-index +MAX_INT) at all times, and will leak through any content you float over them. Possibly the same thing's happening with the Flash movie. The workaround is to put a bogus <iframe> tag right after the content causing the problem, which apparently confuses IE and lets the leaking element get covered up properly.
I was under the impression that they changed that back in IE5. Like they still default to maxint, but will actually allow you to redefine it. Been a few years since I did any serious web development though.
Seen a few websites that didn't take any of this into account when developing, end up displaying other objects on top of the form controls in Firefox. I love standards.
-
There is another issue, this time in firefox: If you have the flashblock extension installed, instead of the flash header, the usual flashblock place holder will be shown. Nothing wrong with that. But if you want to restore the real header by clicking on the place holder, it doesn't react. Apparently the overlayed text (or, more precisely, div#header_left) is swallowing the click events.
I don't want to demand that you design pages flash block compatible. But since flashblock already has a suitable spread, it might be good to know there is a problem.
-
@vt_mruhlin said:
I was under the impression that they changed that back in IE5. Like they still default to maxint, but will actually allow you to redefine it. Been a few years since I did any serious web development though.
Seen a few websites that didn't take any of this into account when developing, end up displaying other objects on top of the form controls in Firefox. I love standards.
Maybe they fixed in IE7 (which I refuse to install, since the 'real' market is still IE6, for bad or for worse). In IE6, it doesn't matter what you set the z-index to on drop down elements, it's ignored by IE. M$'s knowledgebase article explains that IE uses "windowed" and "windowless" controls, and whatever type dropdown elements are actually (I ain't going to go dig up the article again) rendered as, override the z-index and will come out on top. So if you set the popup to z-index = MAX_INT, IE will essentially make those elements MAX_INT+1 (nifty, eh?) "for your convenience".
I hit it by trying have a date picker pop up over some <select>s in a form. Of course it renders fine in FF, but when I go to test in IE, there's the <select>s leaking through the calendar. Yay Bill...
-
@MarcB said:
@vt_mruhlin said:
I was under the impression that they changed that back in IE5. Like they still default to maxint, but will actually allow you to redefine it. Been a few years since I did any serious web development though.
Seen a few websites that didn't take any of this into account when developing, end up displaying other objects on top of the form controls in Firefox. I love standards.
Maybe they fixed in IE7 (which I refuse to install, since the 'real' market is still IE6, for bad or for worse). In IE6, it doesn't matter what you set the z-index to on drop down elements, it's ignored by IE. M$'s knowledgebase article explains that IE uses "windowed" and "windowless" controls, and whatever type dropdown elements are actually (I ain't going to go dig up the article again) rendered as, override the z-index and will come out on top. So if you set the popup to z-index = MAX_INT, IE will essentially make those elements MAX_INT+1 (nifty, eh?) "for your convenience".
I hit it by trying have a date picker pop up over some <select>s in a form. Of course it renders fine in FF, but when I go to test in IE, there's the <select>s leaking through the calendar. Yay Bill...
On first note, mucking about with z-index is imho on the same scale as positioning non-absolute items absolute. A mayor pain in the ass later on .
Secondly, IE7 is gaining grounds pretty fast, current average slice of the pie IE7 has, is about 30%. This from statistics from a few big sites i have access to via my work.
A simple solution is to use vmware with a few seperate instances running. Currently i develop websites on ubuntu with win98se (IE 5.5) winxp ( IE 6) and winxp ( IE7 ) running in vmware-player. Works perfectly. and vmware really isn't all that expensive, especially since you only need 1 vmware suite, and the rest can run the free vmware-player.
-
@stratos said:
On first note, mucking about with z-index is imho on the same scale as positioning non-absolute items absolute. A mayor pain in the ass later on .
Secondly, IE7 is gaining grounds pretty fast, current average slice of the pie IE7 has, is about 30%. This from statistics from a few big sites i have access to via my work.
A simple solution is to use vmware with a few seperate instances running. Currently i develop websites on ubuntu with win98se (IE 5.5) winxp ( IE 6) and winxp ( IE7 ) running in vmware-player. Works perfectly. and vmware really isn't all that expensive, especially since you only need 1 vmware suite, and the rest can run the free vmware-player.
z-index doesn't work, generally speaking. There are four distinct categories of stacking, namely:
- source order: later elements are on top.
- floats are on top
- explicitly positioned elements (relative|absolute|fixed -- matters not): position is on top of non-position
- z-index: higher int is on top
Browsers can't agree on how to interlace these. IE renders floats on top of positioneds -- but not always. On pages that contain floats and pos-abs's, it often appears as though z-index is not supported by IE at all, because it simply doesn't do anything. I haven't experimented with it or studied the specs deeply, because the usual problem is "put this thing over the other things" which is mostly easily solved with a quick [position:relative;], so there's little incentive.
I'm a tiny bit surprised that IE7 has only 30%. It's a windows update. Even my dad has it. For IE6 testing, we have an old laptop that we RDP to.
-
@dhromed said:
I'm a tiny bit surprised that IE7 has only 30%. It's a windows update. Even my dad has it. For IE6 testing, we have an old laptop that we RDP to.
You first have to realise that the most widely installed version of Windows, today, is win98. That 30% is probably "most of the winxp installations" (which IIRC is the second most common, although it's been a while since I last looked at the figures).
-
Most companies are not putting IE7 on their computers yet, so there are thousands and thousands of corporate computers that are running IE6.
-
I'm afraid that the statistics say otherwise. Although it is probably best to point out that these are statistics from a site that caters to young parents. And i'm going to guesstimate that young people are much higher inclined to buy a new machine (and thus XP) then elderly. So this doesn't mean you're wrong per'se, but in this case a overwhelming percentage goes to XP.
1 Windows XP 191,852,884 84.63 2 Windows NT 10,137,409 4.22 3 Windows 2000 7,783,224 4.08 4 Macintosh 4,581,986 2.17 5 Windows 98 2,130,449 1.28 6 Windows Me 1,268,252 0.74 7 X Window System (Unix) 324,312 0.19
This crappy table comes from Wusage btw, a very very crappy system for checking such things, but it does give you the ability to see some trends, so whatever.
-
@stratos said:
I'm afraid that the statistics say otherwise. Although it is probably best to point out that these are statistics from a site that caters to young parents.
Well-known statistical curiosity - the broad base of win98 installations is closely correlated with people who don't really use the internet (or computers) much. It throws obscure webserver figures off. If you aren't linked on the default homepage set by the retailer, they'll never visit your site, or even know how to find it.
That probably also explains why they still exist: if you asked those people why they hadn't upgraded, they'd look at you blankly and say "I already have a computer".
-
From a general point of view, a Win98 computer can be seen as some kind of appliance today. They probably exist, but it's not likely that you can sell any new software or hardware to the owners of those computers.
-
My bank's netbanking site uses rollover menus (absolutely positioned divs) on the site. They have an interesting workaround to stop the selects showing up over the top: hide all the select elements on the page. It's a bit confusing the first time it happens, but it's better than having them cover over the menus. Though, you'd hope they'd do a little bit of browser sniffing to see that I'm using Firefox...
-
Mine does too. Are you with CBA?
My understanding of the IE problem is that IE6 and below use native OS controls for drop downs. The Windows UI manager renders drop downs using windows. If you expand a drop down that is near the bottom of the browser window, its options have no problem expanding past the edge of the browser window.
It would be very difficult for IE to retain this behaviour while allowing the canvas elements to overlap the drop down.
-
@joshd said:
If you expand a drop down that is near the bottom of the browser window, its options have no problem expanding past the edge of the browser window.
A selectbox too close to the bottom expands upwards.
-
@joshd said:
My understanding of the IE problem is that IE6 and below use native OS controls for drop downs. The Windows UI manager renders drop downs using windows. If you expand a drop down that is near the bottom of the browser window, its options have no problem expanding past the edge of the browser window.
I'd say most, if not all, browsers will use the native OS widgets and controls for form elements, otherwise you've got major consistence issues. IE's problem is that it calls up those widgets with the equivalent of a god-mode "always on top" parameter, unless you trick IE with the "insert an empty iframe after each form element you need to suppress this behavior on" hack.
-
@joshd said:
Mine does too. Are you with CBA?
Indeedy.Ah, IE bugs (features!) and the hacks to work around them... those wonderful things that cost thousands upon thousands of manhours every day, all because the majority are still using a 6 year old browser because people are too lazy/stupid and corporations are in M$'s pocket too deep to upgrade to a decent browser. Sometimes I wonder how much better the web would be if IE wasn't so crap.
-
@MarcB said:
I'd say most, if not all, browsers will use the native OS widgets and controls for form elements,
Then you'd be wrong. (they call the appropriate functions to draw them, but they don't actually work the same way.) Dropdowns are, though, an exception. Netscape 4.x was the last major browser to use native UI elements to draw form controls, with the exception of IE's use of it for dropdowns.
-
@nickf said:
@joshd said:
Mine does too. Are you with CBA?
Indeedy.Ah, IE bugs (features!) and the hacks to work around them... those wonderful things that cost thousands upon thousands of manhours every day, all because the majority are still using a 6 year old browser because people are too lazy/stupid and corporations are in M$'s pocket too deep to upgrade to a decent browser. Sometimes I wonder how much better the web would be if IE wasn't so crap.
Ooh, the last time I checked, the Commonwealth Bank's Netbanking menus were completely screwed in Opera. Looks like it's (kinda) fixed now...
Their system has some WTFs of its own. Like, passwords are not case sensitive. I mean, seriously! O.o
-
@MarcB said:
@vt_mruhlin said:
I was under the impression that they changed that back in IE5. Like they still default to maxint, but will actually allow you to redefine it. Been a few years since I did any serious web development though.
Seen a few websites that didn't take any of this into account when developing, end up displaying other objects on top of the form controls in Firefox. I love standards.
Maybe they fixed in IE7 (which I refuse to install, since the 'real' market is still IE6, for bad or for worse). In IE6, it doesn't matter what you set the z-index to on drop down elements, it's ignored by IE. M$'s knowledgebase article explains that IE uses "windowed" and "windowless" controls, and whatever type dropdown elements are actually (I ain't going to go dig up the article again) rendered as, override the z-index and will come out on top. So if you set the popup to z-index = MAX_INT, IE will essentially make those elements MAX_INT+1 (nifty, eh?) "for your convenience".
I hit it by trying have a date picker pop up over some <select>s in a form. Of course it renders fine in FF, but when I go to test in IE, there's the <select>s leaking through the calendar. Yay Bill...
I had similar problem with some ajax popups ... I chose to hide select boxes as soon as the popup appears, and show them again when the popup is gone ...
-
@MarcB said:
Maybe they fixed in IE7 (which I refuse to install, since the 'real' market is still IE6, for bad or for worse).
Smart Home Revolution: Unveiling the Future of Living Spaces –...
Discover the world of Smart Homes: the technology transforming our lives. Explore automation, increased safety features, and energy-saving tips.
Test your sites in IE3! Yay!
