I meet a problem that my page works well in firefox and chrome(almost the same look and feel) but very bad in IE. It's time consuming to adjust the differences. Is there any research has been done already to tell the differenceS, or any automation tool to examine the uncompatibilities?
BTW: which tool you guys are using when debugging in IE(like firebug for IE)?
Your best starting point is to always use some kind of "reset mechanism" like Eric Meyer's CSS Reset or framework like HTML5 Boilerplate, they help in reducing differences between browsers (not all, but most of it). If this is not possible (project is already in finishing phase, etc.) you can always ask questions here, check Position Is Everything for description of bugs, Quirks Mode, SitePoint reference and various other sites (Google is your friend :)). Hope this helps.
There is "debugging" tool for IE - IE Developer Toolbar - but it's usefulness can't compare to that of Firebug, Dragonfly and such. IE8+ does have better support for debugging, though… There are some articles that suggest using Visual Studio, but I haven't tried it. Mostly it's just trial and error with IE :).
ie7-js is a JavaScript file that automatically fixes many Internet Explorer bugs for all versions. Works like magic.
For fast and better results in IE you can use CSS Hacks for adjusting the HTML elements.
For IE we have IE Developer AddOn
you can download it here : http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535
Welcome to the tiresome world of IE.
IE8 has some version of developers tools, hit F12 on your keyboard and it will pop up. (not present in 6&7)
There are many documented bugs in IE, a simple Google Search would help you out better, but a lot cannot be accounted for until you have your site working in FF.
What most developers I know do is to make the site in FF, make small changes for Webkit browsers then go over to IE (not including 6) and debug.
In my experience there really is no way to tell what IE is going to mess up next, so you'll probably just have to deal with it as it happens.
Related
The website I'm working on is currently working fully on latest chrome which is what I'm using, but when I use tools like IE NetRender to check its compatibility with older IE versions, the site comes up plain, with no styling AT ALL!
However, IE8 is on a completely different level. The site is looking almost as good as it's on chrome/firefox/whatever.
I tried using IE9.js, modernizr, IE Hacks, everything - but nothing worked.
Somehow it all seems to take effect only on IE8+.
It's as if IE7- don't even load the stylesheet.
I also checked my code for errors in the CSS/HTML markup but all of the errors point at the IE css hacks.
What could possibly be the cause to this? I'm literally frustrated with it.
The site (just a development page) is http://kanjiman.0zed.com/
Any help will be MUCH appreciated.
Please try to render the page using IE NetRender and see what I'm talking about.
P.S; I did try to Google/search for a solution - but in none the situation was as bad as mine.
EDIT:
The problem was IE9.js - I found this out thanks to Fabio's answer.
Whether you want to keep it or not is up to your project requirements and your priorities.
I personally am going to keep it since as both Rob / Felis commented, IE versions 6/7 are DYING! I'd rather provide a better user experience for now rather than supporting and spending more time with older browsers.
Also, this is only a matter of about 3 lines, so if your site starts to gain more IE7 traffic (I doubt it will even worth it), it's always changeable.
Thanks Rob, Felis and Fabio :)!
This is what i see in Internet Explorer 7
<style _7="
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}">CSS Stylesheet</style>
this is what should be there:
<style>
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}</style>
For some reason, you are assigning the style as an attribute for the style tag making it useless for internet explorer. Why dont you use css files for styling instead of mixing it with the html source code?
Hope it helps
I am developing the follow website:
http://di20studios.com/2012/royalpack/
All works fine in Mozilla Firefox and IE 8, but Safari, Opera and Google Chrome don't like my display:table-*CSS...
The display:table-* is at header and bottom.
What I want? Continuous background:
Can you enter the website and see this issue in action? How I can solve this?
Check this out, I believe you will find your problem is similar.
This is an unconfirmed webkit bug. My only suggestion would be to make sure you are using an HTML5 doctype:
<!DOCTYPE html>
From John Resig:
What’s nice about this new DOCTYPE, especially, is that all current browsers (IE, FF, Opera, Safari) will look at it and switch the content into standards mode – even though they don’t implement HTML5. This means that you could start writing your web pages using HTML5 today and have them last for a very, very, long time.
Also, I might suggest you NOT use this method (display:table-*) unless it is the ONLY solution (which is never :P). There are many known issues with this method, one being that it is not supported in IE7.
A plausible solution would be to use floating to achieve this. You will need to change the transparency over the images for the repeat-x to overlay properly. I edited the images so you can see a working example. As long as you MAKE sure to clear after the header-container, you shouldn't run into any issues using float. PS, this works in IE7+ :]
Can you enter the website and see this issue in action?
If the question is as above, then my answer is: Yes, yes I can. I am using Google Chrome 18.0.1025.162 on Linux.
Please check out this snippet of my site.
http://jsfiddle.net/TmnPV/
The logo is made up of the 'circle1' and other div tags in the same html sections. It doesn't show up on jsfiddle either and it looks different on every browser.
On chrome = shows all
On firefox = no logo shows and bottom text under input field is larger
On safari = no logo shows
What can I do?
This is called, umm... , welcome to wild wild world of web. Every browser vendor parses html/css/javascript differently. Some are lenient, some are strict. (Chrome Vs. Opera). Some have different Box model, some have standard operational behavior, some tend to do their own thing.(Opera Vs. IE6)
Answer to different renderings : You have to hunt down each and every little quirk. One by one.
Welcome.
You'll need to adjust your styles for older browsers if you plan on doing alot of css3 transforms.
IE 6, 7, and 8 just don't have the ability to read those styles.
Even on Firefox, depending on the version, you'll run into various spacing issues since the rendering engine is different than Chrome (and Safari).
For using html5 and css3 in older IEs you can (sparingly) use polyfills, which duplicate the effect using javascript. You can see a list of available polyfills here:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Quirksmode is a great resource for checking compatibility: http://www.quirksmode.org/compatibility.html
I would highly recommend the Firebug add-on for Firefox to see where the extra spacing, etc is happening.
When you run into a specific issue with a specific browser that you can't figure out post a question here. It's much easier to help with one bug than just general browser problems.
That's mostly because you are using code to work with one browser. Different browser uses different code renderer. It's hard to make everything look the same, even tho Internet explorer is the worst, other browsers have different features. Opera has most of the HTML5 form features, that no other browser supports so far, but Chrome and Firefox supports the most of the HTML5 attributes. Hope this helps understand the reason why.
I've had to work on a fairly complex design ( http://scoding.com/eyal/ ) because of its layout and shape, finally done it, all happy - until I checked on IE, it's seriously messed up, but why is that? Why is the container not centered? I have looked on google for some answers, and didn't find anything that could help, ANY HELP would be appreciated!
IE is rendering the page in 'quirks mode' (if you press F12 in IE you'll see the 'document mode' defaults to quirks).
Set a doctype like:
<!doctype html>
And all will be well!
For bonus points, run it through the W3C Validator and fix the errors it flags!
This is one of the reasons that every web designer hates IE.. ;-)
Unfortunately, there is no magic answer for you. You have to get the right tools and test every browser you want to support and fix the CSS for every broswer.
Not all browsers interpret CSS in the same way. But IE is the one most people will have problems with.
Hints:
Try using a CSS framework. Blueprint or CSS960 are among the most popular IMO. With a framework, you have a better chance of having the same result in every browser.
For IE, you can download the developer toolbar. It's like Firefox's Firebug but for IE. It is essential to debug CSS problems in IE.
Take note that if you want to support IE6,7,8 you will have to test them all :-( Because you will probably have different results in each version.
If you use JavaScript, I highly recommend jQuery. Never write "native" JavaScript code since it is interpreted differently in each browser. jQuery takes care of that and ensures that your code will be cross-browser compatible.
Good luck
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
When I build a site, I'd like to have at least one browser I can show it off in without any hacks or workarounds, and yet still retain maximum functionality. Knowing that none of the browsers have perfect standards adherence, which one comes closest?
Also, are there any standards areas in which a single browser seems to specialize? Opera, for instance, seems to be bent on adhering to all voice-related CSS standards.
The way most people I know work is to run Firefox(with Firebug) and develop in that. Firebug is an invaluable tool for debugging. They will usually take what the get there and try to squeak it into IE and other browsers. Not exactly the answer to your question (Its not 100% compliant but its close), but hopefully it helps.
Safari using the latest WebKit nightly build.
Not that any browser in the world uses this yet (not even Chrome) but if all you're worried about is standards then that's your best bet - it passes Acid3, something no browser on the market can do yet.
This is an excellent question, but I find it hard to give a single answer. Traditionally, Opera has been the most standards compliant. For a long time, it was the ONLY browser to pass the ACID2 test in fact. FireFox and IE haven't been able to claim that (although supposedly IE8 is supposed to fix that, and FF is working on it all the time).
That having been said however, bear mind that IE has the largest "market share" of all the browsers right now (businesses have ties to MS, and Windows always comes with IE out of the box) followed closely by FireFox. So if your goal is to show off your app in a browser that most people will be using, it'll have to be one of those.
Purists will tell you that FF is more standards compliant than IE7 (and they are right), so that you should design for that and not IE. I can tell from many years as a designer/developer that pages taking that approach may not be a great idea. Bear in mind again - IE has the market share, and usually where it counts. So if it looks great in FF but breaks in IE, most users will be very upset, and the same vice-versa.
Best compromise - concentrate on those two. Tweak it to look right in at least FF AND IE, and now you've covered 90%+ of the people that will be using your website.
Don't get me wrong here - I'm not trying to dismiss the users of Opera, Safari, or any other browser. But if you want the most results for the least amount of work, then there ya go.
Best answer - take your time, do it right, test ALL the major browsers. The time spent working through these browser headaches ahead of time (when you can do it at your own pace) will be well rewarded. Compare that to the screaming client who wants to know why your page breaks in his favorite browser, and wants it fixed today. :)
"When I build a site, I'd like to have at least one browser I can show it off in without any hacks or workarounds, and yet still retain maximum functionality."
If you are testing your site, you would be better served to choose target browsers based on your users' needs.
Unless you are in a position where you can force your users to change to a particular browser, you need to test your site in whatever browser(s) they use.
Opera comes closest to standards compliance.
I use Firefox with IE tab and chrome. Firefox with IE tab because those are the two browsers with the most market share and chrome because it is one of the few windows browsers that use webkit, meaning it should display similarly to safari.
The way most people I know work is to
run Firefox(with Firebug) and develop
in that. Firebug is an invaluable tool
for debugging. They will usually take
what the get there and try to squeak
it into IE and other browsers. Not
exactly the answer to your question
(Its not 100% compliant but its
close), but hopefully it helps.
+1 - I prefer firefox for most browsing as I find it most stable and easiest to use, but when it comes to web development it takes the cake when combined with firebug! The others are good for testing, but I find that firefox+firebug makes everything so much easier to use
Try Google Chrome it uses the WebKit which is feature complete for the latest standards.
I used to use Opera and Firefox as my "Standards Compliant" browsers, but I've recently become much enamored with Safari. The WebKit under the hood is really solid, the javascript is really fast (or fast enough, anyway), and and the CSS support is pretty excellent. It's not perfect, but does a really solid job of doing what it's supposed to do.
Also, it has the greatest print-screen feature I've ever seen in a browser. Seriously. Whereas every other browser seems to really munge up any screen I try to print, Safari always seems to get it right. A minor thing, but worth major points in my book.
Edited to add: Chrome is coming close to taking Safari's place, but that print screen thing is still the deciding factor. Being able to just hit "print" during a meeting with a client and not have to fiddle with any settings to get it working right is a major relief.
Don't just use a standards compliant browser, use other tools such as the w3c validator.
I find that if you stick to standards compliant markup, and don't use anything too unusual, it will render fine in Firefox 2/3 and Safari/Chrome (and usually fine in IE7/8). If not, you're probably better off trying to simplify your markup, rather than introducing hacks and workarounds.
Using one browser for all your testing and then hacking it for others is how most people do it but that often leads to problems. Even though Safari may be a more standards compliant browser it is not a highly popular browser and I'd lean more toward using the browser your customer's are using most while writing 100% standard code and then adjusting for idiosyncrasies of other browsers. It's not ideal but it is more customer centered thinking.
I've seen web development companies with multiple full time employees that had bugs on their homepage because they did exactly what you seem to be thinking is your answer. They developed the webpage on a Mac and tested exclusively with Safari. The result was that over 60% of potential customers may have seen layout bugs if their browser was windowed.