I am working on a website for a friend. He wants a flash animated style website without any flash so that it works on IOS and he can change things himself. I am using JQuery along with my own javascript, and several css files. Now the problem is the website works perfectly on my internal development server on all browsers. When I uploaded it to my sub domain to show him the progress it no longer works on IE. All other browsers work perfect just not IE and only when its on the internet. I've already gone through the w3 validations with no errors. All java and everything is enabled on IE, I'm stumped. Does this happen to anyone else's IE or is it just on my computer?
Incomplete Demo
Looks like you've got JavaScript errors.
$('div#top').animate ({bottom: '250px', }, timeDuration);
That stray comma makes IE unhappy (even IE9).
Of course that would have caused IE to have problems if you served the page from your local server too.
(Oh wait; my IE is stuck in compatibility mode ... well anyway those stray commas will definitely freak out some versions of IE.)
Related
I am developing a web page primarily using Firefox. Often I encounter that my web page renders properly in Firefox but has some unexpected behavior in Chrome and IE.
Generally if its related to javascript, I usually open Developer Console in Chrome and see if there were any errors and that gives me a clue as to what might be wrong.
Unfortunately, I am generally lost if its a CSS related or HTML element issue.
In one particular case, I have placed a div inside a <td> and I am lost as to why the chrome cannot render it properly irrespective of the fact that firefox is happy and does not complain.
So my question is, how to debug issues related to rendering of HTML pages in Chrome and CSS and determine what might be offending.
My related question is, is there a guidelines to make my web page work in almost all the popular browsers with little effort? I am particularly thinking in terms of tool or process which will warn me of compatibility issues with my web page.
IE (Internet Explorer) and little effort doesn't match to each other, you have to invest more of your time and effort only for IE, illuminate IE and be happy, as a suggestion, use Twitter Bootstrap if possible, it's a ready and tested css framework (maybe framework is not perfect name).
Basically, as far as I know, only a css reset could be used to gain some consistency but still you have to test over different browsers because each has different rendering engine. If you want to keep IE in the list then test the layout for IE at first.
Only for the IE or Inconsistent Exposer (IMO) there is a developer tool available (IE Tester) to test layout (HTML/CSS) over different versions of IE and only works on Windows so it may help you a bit if you are Windows user. There is also an online tester available and sometimes helpful, it's browsershots.org.
Also IE has a debugger/developer tool and pressing F12 will bring it so you may see something like this:
Google Chrome has it's built in debugger/inspector (CTRL + SHIFT + I) and on Firefox you may use Firebug extension and these browsers are not dumb like IE and there are lots of debugging extensions available for these browsers for free, not worried about these good guys.
Generally speaking, IE users are dumb and used to see dumb things on their screen so I don't think too much about them because they really don't know the difference but as a developer you may need to think about it and in this case I would demand extra charge from my clients if they want me to make a site compatible for IE < 10 because it requires extra effort.
You dunno me ? Leh--hoo-zehar (Looser) IE am a legendhhh. Smooky...!
I am not aware of any tool that will warn you because there is no way for a tool to validate the result of what you desire.
As far as how to test HTML/CSS. Chrome supports the most HTML-5 and FF is a close second. If you develop in chrome it normally works in FF and via verse. IE is where the pain is. IE does not support all HTML tags and often will render things wonky. I normally create my webpage and focus on FF and chrome once I like the results I open IE and debug. 98% of the time it is CSS changes that need to be made. I debug CSS first and if I am not able to resolve it with CSS after a decent amount of work I will look into changing the HTML. I try to avoid changing HTML because you have to debug all other browsers again.
Styles and code developed in Chrome will generally work in Safari, Opera(same engine), and IE 10+ with few inconsistencies. You'll get a few rare positioning issues with some CSS3 specs in Firefox, specifically in background positioning. You'll also find some javascript issues unique to Firefox.
IE9 is generally a good sport and usually doesn't have too many issues. IE8 will have a few and they'll be significantly different based on the OS (as there are multiple versions of each IE and they all support different specs for Javascript and HTML) specifically you'll find lots of issues with XP IE8 and really shouldn't support it (Microsoft doesn't even want to).
For the most part you'll be developing to IE inconsistencies unless it's a CSS3 spec with the occasional javascript strangeness (which js frameworks generally can help with since a few of them were made with that goal in mind).
As far as tools, browserstack is nice but doesn't give you a lot of time. If what you're trying to use is modern caniuse is a good place to visit first. Almost all issues between non-IE browsers will be HTML5 or CSS3 specific though.
So i am completely baffled by this and hoping someone can give me some ideas to try. Not sure what details to include so let me know if i dont describe it enough and i'll add more.
We inherited a .Net MVC 4 app from a former company that already has a version on our clients production server. Recently, after a few updates from us, our client noticed that some of the menu items, styling, etc is screwed up on their test and QA servers in IE9 but works on production (Production is still from the previous companies publish). The test and QA versions also work fine in FF and Chrome
Using IETester and IE11, I tried viewing the page in IE9 mode but I did not see the same issues that my client is having, so i tried some older versions out of curiosity. I managed to reproduce the issue, but in IE7 not IE9. I had my client verify that he is in fact using IE9 and he is.
I did a compare with older versions of our _Layout.cshtml and there isnt a single thing that changed other than a favico entry. As far as i can tell, we havent changed any css or styling.
I have a webex meeting with the client tomorrow to look at his IE to see if i can find anything, but can anyone give me some ideas of what could cause this? Particularly that this page works in my IE9 but not his?
sometimes when you set the default browser mode to be ie7 and the document mode to be ie9 standard and you try again to change the browser mode to be ie9 compat view then unfortunately the browser version will be detected as ie7 , the solution for this problem is to change the browser mode to be ie9 but not ie9 compat view then the browser version will be detected as ie9
I am getting a very weird kind of error with IE9. When I use a DOMParser from within a jsp page on localhost, it runs perfectly fine and gives the proper result.
But Shockingly, when I use DOMParser inside a normal HTML file (Not on the server. From the file system), I get this annoying message of "DOMParser is undefined" .. What is this and how can I make it work? Thank You.
P.S. It works fine on FF and Chrome
I would say that this is almost certain to be the browser running in compatibility mode when browsing local URLs.
You can check this by opening the dev tools (press F12) and looking in the top right corner; if it says it's in IE7 mode, then you've found the problem. Switch it back to normal IE9 mode and it should come right.
IE7 didn't support the DomParser object, so if IE9 is in IE7 compatibility mode, it's natural that it will stop supporting it too.
Ok, so that's what it's doing. But why is it doing this? There is a config setting in IE (both IE8 and IE9) which specifies that the browser should fall into compatibility mode when browsing sites on the local intranet. The reason for this setting existing is to allow companies who have internal sites designed for older versions of IE to upgrade to a new version without breaking those sites. It's intended to make like easier for corporate types who would rather not spend money fixing something when the broken version is good enough.
But it's a pain in the rear for the rest of us.
Obviously, if your site is on the public internet, it won't be affected by this flag, except when you're trying to work on it from localhost on your own PC. Therefore, the solution for you is to simply turn off this config setting in the browser and forget about it.
Of course, the fact remains that users of IE7 will still have this problem with your site, as their browser doesn't support the feature you're using. You could just drop support for IE7, and tell those users to upgrade. But if you want to support IE7 users, I believe that Dean Edwards' IE7.js script allows the browser to emulate this feature (along with a bunch of other stuff that Microsoft forgot).
Hope that helps.
I received this error, "DOMParser is undefined", on IE9 and it turned out to be an add-on that was disabled.
Name XML DOM Document
Publisher Microsoft Corporation
Status Enabled
Tools – Manage Add-ons – Microsoft Corporation
I am on the stage where I need to make my website cross-browser compatible.
I need tips on how to get started.
I have developed my website on firefox, so it works great with firefox.
I guess I have to download a couple of versions of all major browsers now, right?
Then just test each browser one by one?
Should I do this before uploading the entire website onto a server or afterwards?
All tips and SW which makes this easier is appreciated.
BTW, it is a classifieds website using MySql, Solr, PHP, js etc...
Thanks
Cross-browser compatibility is best planned for in advance, as there are ways to build your site that will make it much easier.
Consider using a CSS reset script like Eric Meyer's.
Consider using a JavaScript library like jQuery.
You can make use of Adobe BrowserLab to do cross-browser testing.
Consider the mobile audience.
You need to have some kind of local webserver so you can edit the code and test it in a comfortable way. It is also helpful if you make it accessible for validator.w3.org so you can do syntax checking.
Testing it in IE6, 7 and 8, Firefox and Chrome would be a good start I would say.
Since you are working with server side code, you need to have a server.
Once the site goes live you will need both a live and a development server.
Yes, I'd make it cross browser compatible before uploading to the server. The reason for this is that you may need to change the server-side code, adding ids and classes to the markup, plus it may well be necessary to change the markup. Make sure it's working locally first.
IE Tester is very useful for testing on the various IE browsers. I'd ensure that I've tested it on a Webkit browser (such as Chrome), a Gecko Browser (such as Firefox) and Opera. See this list for different browsers.
firebug is quite useful tool that I can't think myself living without it. I also downloaded the js file that helps you get similar functionality when using IE6 hoping it would help me resolve some issues, however, the messages I receive are not quite friendly such as:
"Expected ':' (default2.aspx,16)" - on line 16 there is nothing that can possibly expect a ":"
or
"Object doesn't support this property or method (default2.aspx,198)" on line 198 nothing interesting that can require any support for anything.
my site looks like a different web site in IE6.. most of the css doesnt work, some of the jquery functions doesnt work and I need to get this site work in IE6. Any help would be appreciated in terms of;
how to know what the messages (like the ones above) mean in IE6 and how to effectively debug js in IE6?
where to start for css compatibility.. e.g. shall I create different css files for different browsers and load them by detecting the browser? or are there any common issues and hacks?
I am lost so please give me any direction to start..
You debug javascript in IE6 with:-
Microsoft Script Debugger
The QuirksMode website is useful site to determine which bits of CSS is implemented in what way by which browser. Note IE6 "standards" mode rendering is notoriously buggy.
You can try Companion JS. It is pretty good with respect to debugging. It requires Microsoft Script Debugger as well.
Companion JS thankfully supports "console.log" (via firebug). It is free tool. Debug-bar is a good CSS-DOM-Javascript debugger, but it is not free for commercial purposes.
The two tools I use are:
Web Development Helper
IE Developer Toolbar
They somewhat duplicate each other's functionality, but each one can be useful for different tasks. The Web Development Helper has a built in JavaScript console, it's not as good as Firebug but it's better than nothing and easier than the MS Script Debugger.
"Expected ':' (default2.aspx,16)" - on line 16 there is nothing that can possibly expect a ":"
The error won't be on line 16 of your .aspx file, probably not even on line 16 of the HTML source the aspx file produces. It'll be near line 16 of one of your linked .js files. Which one? IE won't tell you.
You could find out by adding extra lines at the start of each .js file and seeing what happens to the error line number, but it's probably better just to install Script Debugger already.
IE8 finally fixes this.
shall I create different css files for different browsers and load them by detecting the browser? or are there any common issues and hacks?
Start with standards-compliant CSS, and a Standards Mode doctype, and test in Firefox 3, or Opera, Safari, Chrome. Mostly they'll give you more or less the same results. Now test in IE7 and hopefully it'll just work.
The troublesome browser today is IE6. You may well need to add hacks for it. You can do this in a separate stylesheet if there's a lot of them, or just use the "* html" hack for the occasional rule.
All the older hacks, your Box Model Hacks and so on, you can forget about. They're only of use for IE5, which is dead, and IE6 Quirks Mode, which you shouldn't be using.
or have an AJAX call to send debug variables/messages to ASP (PHP) script that will log it. this will help if the problem is with variables undefined or having similar issues.
For what it's worth, I've found the line number errors are much more accurate when using a separate js file.
I still use IE6 as my primary browser when developing. It saves a lot of headaches later, since you will often find CSS issues much earlier in the process.
I also find it helpful to use a JavaScript logger to send debug messages. This being an alternative to a bunch of alert messages. Personally, I use the yahoo UI logger
I use one of two things for js debugging: Microsoft Script Editor or Firebug Lite. Go here for more info.
As for the CSS, I recommend a CSS Reset. And for the little differences in IE6, consider using conditional comments.
When making an an application to be used in multiple browsers, quirksmode is a lifesaver.
EDIT: blackbird is a nice cross-browser tool for tracking state.
I've used MS Script Debugger with some success, also IE Developer Toolbar and Firebug Lite. I recently learned about MS Visual Web Developer Express Edition, which has been a big improvement so far.