I created a website using HTML 5 and it works perfectly on Chrome, Firefox and Internet Explorer 10. If I'm running the website in Compatibility mode the layout is all messed up.
Only if I change Document Mode from IE5 quirks to another value inside Developers Tool it's working perfectly.
Is there someone who can give me some hints or some tips&tricks to make it work properly.
You can find the website here: http://www.westmotors.ro/beta
Thank you in advance.
Here is a nice website where you can see the HTML5 readiness of any browser:
http://html5readiness.com/
In addition I would strongly recommend you to use the Modernizr javascript plug-in in order to make your site compitable: http://modernizr.com/
Last thing, try to find some "polyfills" for html5 features you cannot use in your site "the native way"
Related
I am fairly new to HTML5 so please bear with me. I have designed a site for someone and when I view it in Firefox or Chrome, all is well, but when I view it in Internet Explorer 10, the nav menu and the picture in the header are moved downward. I have checked the site at http://validator.w3.org/ and it gave me some errors like alt is missing and some other minor things which I believe are irrelevant to what is causing this problem. Is there a way for me to override this with some type of Javascript code or is there some way of just making an IE 10 friendly version of the page in which someone who puts in the url of the page will be redirected to the IE version of the page?
Here is the url of the site: daxxomatic.com
Welcome to web programming and comparability issues. Internet explorer is the largest used web browser and the most horrific browser for web programmers.
You have to live with it and do one of the hacks for dealing with the problem. I would suggest that you follow web standards and check out www.caniuse.com to see if what you are doing can work on IE or Firefox or whatever.
Lastly, test your code in different browsers as you develop a project. That way you deal with small chunks of problems than a big one at the end.
I know it is not a new question but I can't find an answer in previously asked questions.
This is one of first sites I've build (using a tutorial). So I don't have a good knowledge of HTML.
i checked the site using validator en removed some errors (still some warnings left) but according to that site it seems ok. (http://validator.w3.org/check?uri=caenenbvba.be&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&group=0&verbose=1&st=1&user-agent=W3C_Validator%2F1.606)
In firefox, google chrome, safari it works fine.
can you guys help me?
website: http://www.caenenbvba.be
thanks in advance.
DD
im not %100 but im pretty sure internet explorer doesn't support all new features with HTML5 and css3. i have a website and one page doesn't work because its got the newest CSS3 features on it.
Make sure it's not in compatibility mode
I'm making an old website with HTML. I used the reset.css and I can see this perfectly on the web (http://www.ceachile.cl/revista/) with Chrome, Firefox and IE10, but my client can't see some elements properly. I don't know what else can I do to fix this table that is in a wrong place. Here's a folder with a lot of screenshots of the site in many browsers and OS.
Some snapshots of what the website looks like under various browsers can be found here
You have to check with elements of HTML and CSS each of the browsers support. Trident has historically been behind in implementing a lot of newer features. If you aim to support older browser, you have to look at their documentation and write code based on what they can handle.
Take a look at http://msdn.microsoft.com/en-us/library/bb250496(v=vs.85).aspx for ie7.
If you know your client's OS and browser version, you can use a service like www.browserstack.com to test your website in this environment and debug it with the usual developer tools.
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.
What, if any, considerations (HTML, CSS, JavaScript) should you take when designing for Google Chrome?
Chrome uses Webkit, the same engine as is used by Safari, OmniWeb, iCab and more. Just code everything based on the standards and verify in each browser.
I think first and foremost you should focus on using HTML and scripting that follows the standards.
After you have that running, file a bug report then make the browser-specific tweaks. If Chrome is worth a flip you shouldn't have to tweak things for it.
The same ones you'd take for Safari, as they share the same rendering engine (with a slight version mismatch).
I'm sure filing a bug report really helps with all those IE rendering issues!
Realistically, you need to test your application in each browser, no browser 100% follows the W3C standards so ultimately you can't rely on following that at all. You need to test everything you do in any browser you wish to support.
As has been mentioned, Google Chrome has the same rendering engine as Safari/iPhone/etc., WebKit which passes Acid3, so there should be minimal issues if you follow the standards. But don't rely on it. Google Chrome currently uses a slightly older version of WebKit than Safari. I'm sure they'll eventually be on the same version at some point, but unfortunately any new browser becomes just another browser to test in.
Are you designing specifically for Chrome, or do you want to make sure your pages work well with Chrome?
Assuming it's the latter, then just use the same design considerations you'd do for any browser. If applicable, keep in mind that many phones and video game consoles have web browsers now.
Chrome uses a new JavaScript engine, so you'll have to test your JavaScript using Chrome as well as Safari. The HTML and CSS may render pretty much the same, but they use different JavaScript engines.