need help with IE 6 - javascript

so i've been working on a website now for like a couple months and i test it on chrome mainly. but before i release anything big i always check it on firefox 3.something and IE7. Now i've received some complaints that that it doesn't look very good in IE6 and when i do check it... well ya it doesn't look like its supposed to. Is there any quick fix that i can add to my HTML to make it look the same in IE6 as it does every where else?

At the risk of downvotes: have you tried adding IE6 to your test matrix? If you have a significant number of users complaining that it looks bad on IE6, you clearly have a significant number of users using IE6 to use it, so it seems like it would be worth your while to just add it to the set of browsers you check before release. Just sayin'.

A really good start is http://code.google.com/p/ie7-js/ Just place it in conditional comment tags in the head of your document and it will make ie6 'standards-compliant'. After that make sure you have seperate css documents for each version of IE, and make sure all of your code is valid with w3's validator. Also declaring a doctype can fix many issues, but it MUST be on the very first line that the browser sees.
Edit: also, for png transparency, I've found that this http://www.twinhelix.com/test/ (IE PNGFIX 2.0 Alpha) works best.

There is no quick trick to getting everything to work. Pretty much have to examine each element that looks different.
That said, you might try looking at a CSS reset file.
Yahoo has one.
And if you search google I'm sure you can find others.

Read this: Internet Exporer box model bug. Also try using YUI reset or Eric Meyer's resetReloaded to set a baseline for all your styles.
And stop developing in Chrome! Try Firefox with Firebug.

How badly does your website 'break' in IE6? If it's minor, then I wouldn't worry about it.
How critical is it that it works in IE6? It's share of the market is slowly but surely declining (Looking at my own logs from a Government website also shows that IE6 is definitely going away). Can you display a message on your website letting users know if they use IE6 and advising that they upgrade?
There are many reasons to upgrade, and educating your users as to why they should upgrade might also be worthwhile?

Uhm... if there is a simple solution I really want to know it. :)
But you can anyway use this good Microsoft tool to cross-test your pages.
It can be usefull for compare the final render of a website.

CSS resets will probably do nothing if it looks fine in IE7. Things like double margins when floating and overflow:auto bugs are things that need to be manually added for each occurance. I'd suggest adding the following line to your head tag:
<!--[if lt IE 7]><style type="text/css">#import "/stylesheets/ie6.css";</style><![endif]-->
and then writing an ie6.css file to fix all the bugs (yes, one at a time)
Probably not what you wanted to hear, but it is why everyone hates IE6 so much

you can check version of client browser and include css fixing for that browser. but most simple solution is to show an alert or notification to client that his browser is outdated and provide links to download latest browser
here are some way to show that notification
http://garmahis.com/tools/ie6-update-warning/
i like this solution
http://www.browser-update.org/

Related

Tools to diagnose browser differences and problems

What are some tool to help uncover why for instance FF is rendering a page differently than chrome ie and safari. My issue is simply the images along the left side of my main body get stretched to the length of the page only in FF every other browser renders in perfectly!
If anyone cares to see the difference
http://tinyurl.com/7vkcvn5
Works in everything but FF
I sometimes have luck running a page that is exhibiting quirks through a validator just to check that there isn't a typo or something triggering the problem. Try http://validator.w3c.org/. Your page has many validation errors in it, so that could explain the rendering quirks. (Some people argue, correctly in my opinion, that in some situations validation errors are OK. This doesn't strike me as one of those situations.)
Might not answer your specific alignment issue, but for differences in browser support, I usually go to http://quirksmode.org/ and http://caniuse.com/. To find polyfills to patch over browser differences, I usually go to http://html5please.com/.
browserstack.com
and
spoon.net/browsers
are two of the best tools I have been using.

JavaScript window.open function is displaying toolbar and menubar when instructed not to in IE7

I am currently trying to open another IE window using the code below, but the toolbar and menubar is still showing under IE7, it seems to work under IE8 though. Why is it doing this?
mywindow = window.open("dataviewer.aspx?id=" + id , "", "toolbar=no,location=no,directories=no,menubar=no");
I seem to recall having to add a website to my "trusted sites" list in IE7 to get the toolbars hidden. Of course that isn't going to help if you can't control that for your visitors, but I think it was something locked down as of IE7 -- even though MSDN doesn't state that. It might be an advanced setting, or maybe it was related to some 3rd party add-on or anti-virus I had. I just know I had a website that launched a small window that was meant to be a "floating toolbar" and it worked great in IE6, but once I upgraded to IE7 the width and height worked, but it had toolbars. I added that site to my trusted sites list, and it started working again.
If that is the case for you, I'd check the advanced security features and see what is different between normal and trusted sites, and maybe fine the one setting that controls this.
It works in IE7-mode in IE9. I don't have a machine with real IE7 installed.
The directories features is no longer supported. Just a guess, but that might be your problem.
One thing to try is to specify only "toolbar=no". Once you've specified to disable one of the features, the rest of them default to no. If you wanted no toolbars, but you did want an address bar, you'd have to explicitly say "location=yes" to get them back on. So, setting just one feature to no is good enough to turn the rest of them off as well.
Try this: http://jsfiddle.net/VD8sk/
mywindow = open("dataviewer.aspx?id=" + id , "", "toolbar=no");
Edit: Maybe also try "toolbar=no,menubar=no" without the other features specified.

Site works in Firefox and Chrome but not Internet Explorer

Apologies but this is not a programming question, but it may have a programming answer.
For some reason my site, http://pctools.alwinsights.com will not display properly in IE (I'm using version 8) but it's fine in firefox and chrome. The content does not appear in the centre of the screen in IE and also generates two JS error messages while the pages are loading.
I've tried enabling Active X and Scripts in the security settings but with no joy. I've also looked around the net but cannot find an answer, well not one that works!
Unfortunately I know nothing about javascript so really don't know where to start with the error messages that are generated.
Any help appreciated.
regards
Nigel
Update:
OK initial error has gone, I'd screwed up with a directory name - apologies.
I've found out that if I disable the option to display the last twitter feed in the wordpress theme it loads OK. So it is the JS code in a php script called thememx-document.js that is causing the error. The code generating the error is "var twitterHtml = jQuery.cookie(twitterCookieName);" It says it's charcater 4, which is a space but I don't understand this.
I can live without Twitter on this site but it still leaves issues as to why content isn't centred nor the pop-up ad is not showing (compare to Firefox) but this may not be a programming issue that warrants a question on this site.
Thanks to all for your comments and input.
Nigel
Start with valid code; a validator will pick up lots of problems. Among yours is content before the Doctype, which triggers quirks mode. Quirks mode causes browsers to emulate bugs in ancient browsers and become much more inconsistent with each other. One of the emulated bugs in Internet Explorer breaks standard centring techniques.
for not properly disply-- its the problem of CSS ...IE7 and IE8 dosen't support css3.so you should simply make another css stylesheet for IE and call it on page only if someone visit your site using IE. and for other broswers it will show exiting style.
and abot JS error --you should check all your php coding and then fix it. its not JS problem. if you are not familar with PHP coding then i am here to offer my free service to you or anyone else. i will help you as i can.
First, having problems with any version of IE is expected and the norm. IE is the worst browser on the planet.
You have a link element on your first line. Links belong inside the head element. Placing it on the first line throws IE into 'quirks mode' and then IE becomes even worse than it normally is.
Good.
OK, maybe your site has to work for IE. 9 times out of 10, the problem is a terminal comma. The following is understood in real browsers but generates an unintelligible error in IE:
var x = [ 1, 2, 3, ];
The tenth time (in my experience), it's string indexing.
var x = "abc";
var c = x[2];
In a real browser, c is set to "c"; in IE, another unhelpful error message.
If this helps, remember: in IE, it's very important to create as many circular dependencies as possible. That is, attach to DOM elements JavaScript functions that have references to other DOM elements. IE fails to clean up such dependencies when the user leaves your site and so leaks memory. Once it leaks enough memory, IE slows and eventually freezes the OS and the user learns a valuable lesson: don't use IE. (Microsoft has a good page explaining how to do this although, inexplicably, they recommend against doing it.)

Tracking down display errors in IE, when everything looks good in firefox

I am a super newb at developing web pages. Especially pages that are created dynamically from javascript.
I have a page that I have worked on that uses some templates from prototype, and widgets from dojo, as well as plain old javascript. This page looks and acts perfectly in firefox.
It is basically adding rows to a table, and adding widgets to the cells.
The widgets basically seem like they are in the wrong column/wrong place.
Where do I start looking to figure out what the incompatibilities are between firefox and IE?
There are lots of sites that will give you information about compatibility. I'd check google. Also, you can download IETester which will allow you to see how your site looks in most IE versions (5.5+).
Take a look at: http://www.quirksmode.org/
I am currently trying to make a template that displays well with FF do the same in IE.
So far, I am breaking it down div by div with corresponding JS function.
Then it is easier to look up the specifics of that particular piece you are trying to make compatible.
For example, I was implementing the enter key and noticed it worked well in FF and not IE. After I looked at that specific input box in html and gathered there were no problems with it, I dove into that specific JS function. Inside I found that the currentTarget wasn't "working". I did a quick search on current target in IE and got all the info I needed to get it to work.
Get yourself a good JS debugger as well, FireBug works with both browsers.
There just aren't good web standards in the web industry right now. Everyone is doing their own thing, it is like the house and bank market. These guys are trying though.

How can I control IE6+jQuery+jQuery-ui memory leaks?

Here's a sample page with a couple datepickers. Here's the Drip result for that:
alt text http://www.picvault.info/images/537090308_omoya.png
This page leaks indefinitely in IE6sp1 when I click the Refresh button repeatedly (IE6sp3+, Opera 9, Chrome2, and FF3+ seem to be good). The memory goes up and never goes down until I actually close the browser completely.
I've also tried using the latest nightly of jquery (r6414) and the latest stable UI (1.7.2) but it didn't make any difference. I've tried various things with no success (CollectGarbage, AntiLeak, others).
I'm looking for a solution other than "use a different browser!!1" as I don't have any control over that. Any help will be greatly appreciated!
Update 1: I added that button event to a loop and this is what happens (the sudden drop off is when I terminate IE):
Update 2: I filed a bug report (fingers crossed).
Update 3: This is also on the mailing list.
Update 4: This (as reported on the mailing list) doesn't work, and in fact makes things worse:
$(window).bind("unload", function() {
$('.hasDatepicker').datepicker('destroy');
$(window).unbind();
});
It's not enough to just call destroy. I'm still stranded with this one and getting very close to ripping jquery out of the project. I love it (I really do!) but if it's broken, I can't use it.
Update 5: Starting the bounty, another 550 points to one helpful individual!
Update 6: Some more testing has shown that this leak exists in IE6 and IE6sp1, but has been fixed in IE6sp2+. Now, about the answers I have so far...
So far all answers have been any one of these:
Abandon IE6sp0/sp1 users or ignore
them
Debug jquery and fix the problem myself
I can't repro the problem.
I know beggars can't be choosers, but those simply are not answers to my problem.
I cannot abandon my users. They make up 25% of the userbase. This is a custom app written for a customer, designed to work on IE6. It is not an option to abandon IE6sp0/sp1. It's not an option to tell my customers to just deal with it. It leaks so fast that after five minutes, some of the weaker machines are unusable.
Further, while I'd love to become a JS ninja so I can hunt down obscure memory leaks in jquery code (granted this is MS's fault, not jquery's), I don't see that happening either.
Finally, multiple people have reproduced the problem here and on the mailing list. If you can't repro it, you might have IE6SP2+, or you might not be refreshing enough.
Obviously this issue is very important to me (hence the 6 revisions, bounty, etc.) so I'm open to new ideas, but please keep in mind that none of those three suggestions will work for me.
Thanks to all for your consideration and insights. Please keep them coming!
Update 7: The bounty has ended and Keith's answer was auto-accepted by SO. I'm sorry that only half the points were awarded (since I didn't select the answer myself), but I'm still really stuck so I think half is fair.
I am hopeful that the jquery/jquery-ui team can fix this problem but I'm afraid that I'll have to write this off as "impossible (for now)" and stop using some or all of jquery. Thanks to everyone for your help and consideration. If someone comes along with a real solution to my problem, please post and I'll figure out some way to reward you.
I hate to say this, your approach is correct and professional, but I'd be tempted to just leave it.
The consequences of not fixing this is that IE6 users will notice their machine getting slower and slower and ultimately either crashing completely or more likely crashing IE6.
So what?
Really - why is this your problem?
Yours definitely won't be the only site they visit with this leak, and they will see IE6 crash regularly regardless of what you do, because that's what it does.
It's unlikely that anyone still on IE6 could even point out your application as one that leaks.
Finally when IE6 does crash it reports IE6 as the culprit - you can legitimately point out that this is a bug in IE6 that Microsoft have fixed in a new release.
Your expensive time is better spent on improving the application for the users not trapped in legacy hell - your app should basically work for IE6 users, but this sort of issue can suck away all of your time and not fix their problem. IE6 is still going to be an unsupported, crash ridden, security hole of a browser.
I suspect the jQuery devs take a similar view to me. Also you have to do some really ugly stuff to get round this bug in IE6, including hacky DOM work that stops the leak but is actually much slower.
Update
Ok, this isn't an easy problem to fix - MS describe the IE6 bug (and provide advice on how to fix it) here: http://msdn.microsoft.com/en-us/library/bb250448(VS.85).aspx
Basically this isn't a problem with javascript or jQuery - the actual issue is with the IE6 DOM - when HTML elements are added to the page (by javascript, rather than being in the page when it loads) IE can't garbage collect them unless they are created in a very specific way.
This is back to front from how jQuery UI builds elements (see DOM insertion order bug in the link above) and so this isn't something that either the jQuery devs or you can easily fix.
So how do you fix the issue? Well, you can stick with the legacy pop-up calendar for IE6 or you can write your own one.
I would recommend the former, but if you really want to built the latter there are some basic rules to follow:
Always add elements top-down - for instance if you want to built a table add the <table> element into the page's DOM, then add <tr> then <td> and so on. This is back to front as it's much quicker to build the entire table and then add it to the DOM - unfortunately that's where IE6 loses track of it.
Only use CSS and HTML 3.2 attributes - sounds dumb, but IE6 creates extra objects to store the extra attributes (or 'expando' properties) and these also leak.
Kinda related to (2), but as #gradbot mentions IE6 has problems garbage collecting javascript variables - if they reference a DOM element inside an event fired from that element you can get problems. This is also compounded by javascript references to DOM elements that have 'expando' properties.
If you have a look around online there may already be a drop-down DHTML calendar that sticks to these rules - it won't be as pretty, quick or configurable as the jQuery UI one, but I'm sure I've seen it done without leaking in IE6.
I think the best bet is to keep as much static as possible - for instance you could load the calendar grid (week numbers and day column headings) with the page and then dynamically load in the numbers (and nothing else). Create the day numbers as links, with javascript in the href - not best practice normally but far less likely to leak in IE6.
It's obvious that the problems you've been describing stem from a flaw in IE6 that you can't subvert with a software fix (be it a jQuery update, a manual call to CollectGarbage, or some other JavaScript/DOM hack).
There are 3 options, in my mind, that would fix this problem.
I would imagine that your customers/users are using IE6 SP0 because of some company standard or regulation, or even because some older web-app they still use doesn't support newer browsers. If it's not an option to upgrade to IE7 (or therefore IE8), you could get in contact with your customers' IT department and politely point out that updating IE6 with the latest service packs would not only fix a problem with an application that they are paying for, but also patch many security and performance flaws that undoubtedly exist in IE6 SP0. Admittedly, that might not be a comfortable situation, but it might solve the problems you are encountering, while still allowing them to work with a browser that require for whatever reason.
If you can convince your customers' IT department that IE6 is antiquated, they may be willing to allow your users to upgrade to a newer browser. It's not a stretch to say that someone running an IT department would be more willing to force employees to upgrade a piece of software if they knew it was either a) riddled with flaws and security holes or b) approaching its end of support date (as IE6 SP0 is). IE6 SP0 on XP Pro SP2 is supported until July 13, 2010 - so it still has some time, but pointing that out, along with other flaws/limitations you could find might make them think seriously about upgrading sooner rather than later.
If you can't convince anyone to upgrade their browsers either to IE6 SPX, or to IE7/8, then I don't know if you have a choice but to remove the offending control from your page, and pursue a different option until the user's browser permits it. There are assuredly many implementations of a date picker control available online which would suit your needs. It might not be as snazzy as the jQuery version, but you don't have many other options at this point.
I hope you find a solution!
try deleting these objects after destroying the datepicker object:
$.datepicker = null;
$.fn.datepicker = null;
This problem is either in a IE6-only part of jQuery, or in a general part of jQuery that is lacking IE6 especific code (as noted in the comments). Either way, it's still a bug in jQuery that needs addressing.
about:blank
You'll either have to dig yourself into jQuery or file a bug ticket. If you manage to fix it, don't forget to attach a diff to the bugtracker, so the project gets a little bit better. ;)
If I get some spare time, I'll try to help you with this.
Edit
Ok, so the problem seems unsurmountable.
The leak you are facing is an IE 6 SP 0 only problem, a leak caused by IE's approach to DOM. Doesn't matter what JS framework you use, it refuses to work correctly.
So, your current options are:
Die trying to get your users to upgrade IE 6 to a newer version/Service Pack,
Die (as in leak) in IE (loosing customers) or
Die trying to work on IE.
But that doesn't necesarily means you can't work this out. What about just trying to side pass the wole thing?
Show every non IE 6 SP 0 user the jQuery datepicker, and only IE 6 SP 0 another more resilient (and probably basic) datepicker with IE's conditional comments. This way you can keep the eye candy/functionality in your software, and allow IE 6 users to have the same basic functionality.
It might not be such a clean option, but you'd still be able to use what you want, and IE6 will still be able to work without leaking.
The only problem will be that you'll have a bigger burden, by having to degug two distinct datepickers. But you'll have to debug IE 6 anyway so, it may be your best bet at the moment.
The problem with IE 6 is that it has two garbage collectors. One for JavaScript and one for the DOM. So for example if you attach a function to a DOM event and then delete the DOM element the function will still exist in memory.
Check out this slide show. It's a bit tongue in cheek but it's good information.
They fixed this issue in IE 7. I tried your page in IE8 in windows 7 and I'm not seeing a memory leak.
The problem here lies a bit deeper than 'just' jquery. Jquery along with many other browsers "leak" circular references between DOM objects and object listeners. Say you have an input field that has attached to it a listener, then you remove the element from the dom and do not have any reference to the listener in your code. Now any modern browser (>=ie7, ff, chrome, safari, opera) will live with that and garbage collect it, while IE6 will think that because there is a listener attached to a dom element it should not garbage collect the dom and the listener itself.
To get around that some folks use very complicated design patterns as highlighted for example in events code in Google Doctype. To fix the problem for IE6 you would really need to rewrite a portion of jquery to work around IE6 issue and/or switch to using a different library and/or not attach any event listeners in your application to DOM events.
Can you try this demo here. It uses the same method as dojo implements to remove elements from the dom. Some quick testing it seems to ease the leaks, not fully but much better.
UPDATE After spending a little time on this I am convinced it is nothing to do with the datepicker itself.
My tests show that by just reloading a dummy page every 1 second sees ie leaking memory.
If you then include jquery on this page the leaks increase slightly (overhead of parsing the script) If you then add jquery-ui into the mix then again there is another slight increase in memory leakage.
To prove this if you avoid reloading the page and instead have a button that just adds an input, creates the datepicker on it then removes it, you see very little if any leaks.
Take a look at this snippet that cleans up DOM nodes. You may find it useful. https://stackoverflow.com/a/9519996/139667
The best debugger available for IE6 is Visual Studio. (Even the free edition will work.) As Janie mentions, if your problem is only happening on IE6 you'll want to debug on IE6, paying special attention to code that only runs there.

Categories

Resources