Here is the situation - I am using the HTML5 "main" tag on my site, but as it turns out, IE doesn't support and it doesn't display it at all.
I am using the html5shiv script (https://code.google.com/p/html5shiv/) and was wondering if it will be a problem to include it non-conditionally - for all the browsers. Can I expect any problems with that?
In their site they don't mention anything about using it non-conditionally.
I tried using the "if IE" conditional tag, but it seems IE10 is too modern browser and it doesn't support it :D
Use
main {display: block;}
in your Stylehseet.
You should only use it with a conditional statement to identify IE versions that need it. There are many sample HTML5 DTD declarations on the net that implement html5shiv correctly and gave been tried and tested with many browsers.
Related
Making websites that appear correctly in IE is a big problem. Is there any java script library to fix all CSS and other issues associated with Internet Explorer (7, 8, 9) and make it work like Google Chrome, Firefox?
use a doctype to make the page render in standards mode instead of quirksmode
Check out what properties in CSS you can use and what browser supports them
If you plan to use HTML5/CSS3 tech, then you should check the property and what browser is currently implementing these new tech
You can reset the CSS using a CSS reset to start off from scratch in your styles
If you need a stable ground to build on for your page, consider using a "base" style framework like Blueprint CSS's typography and forms CSS.
Use a toolkit like jQuery, Mootools, Dojo etc. This will speed up your JS development. But NEVER let JS do styling and style fixes. That's the work of CSS.
Ofcourse, never assume your design works at all. You must test on all available browsers, on the current version, 2 versions back, and on betas.
One important thing to remember is that different browsers respond differently to errors. So make sure your HTML and your CSS pass the W3C validator error free. That will go a long way in ensuring your site will look the same on different browsers.
Also, don't use quirks mode. Different browsers have different quirks!
If you are referring to some of the CSS3 styles, then I would suggest you look into CSS3 PIE.
Short answer is no but you can check which properties are not supported in IE with caniuse.com
http://selectivizr.com/ or http://css3pie.com/ will help you but they both won't work if js is disabled.
Read this if you're using html5 http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/
And what Joseph said.
You could always check the results with http://browsershots.org/ but it's just a screenshot so it won't give you an idea for example of how things behave when you click/hover on them etc.
The short and simple answer is yes, you can target the older versions of IE using a combination of Modernizr and HTML5 Boilerplate. Modernizr is now included in the HTML5Boilerplate package.
For more details of an HTML5Boilerplate approach to this:
HTML5 Boilerplate, IE7 & 8
I have read a lot about adding HTML5.js for IE7/8 support. Even though the documentation says that adding html5.js just causes IE7/8 to not ignore HTML5 tags and apply the styles.
I am really confused as to what it does, like does it have any impact on CSS3 styles working on IE OR it just causes CSS to be applied to HTML5 elements.
Could i please get to to see an easy example with/without HTML5.js on IE.
html5.js works by creating polyfills via JavaScript that specifically enforce certain rules of html5 elements in browsers that do not support them. but even after the js turns them "on", you are still going to have to target them via css to enforce styles. check out this fiddle in any browser that doesn't support html5, then uncomment out the script element and view it again. you'll see what i'm talking about http://jsfiddle.net/TR8z5/
If I recall correctly, without html5.js, older web browsers will just ignore tags it doesn't recognize, essentially showing nothing. With html5.js, older browsers will recognize html5 tags and will therefore be able to render and apply CSS.
Nope, I guess not.
CSS3 will not work on older browsers, no matter what you do.
I have used modernizer & html5boilerplate's css. I haven't been good at designing/debugging for IE. I have been over reliant on FireBug I guess... whats wrong my my WIP http://jiewmeng.kodingen.com/demos/folio-wip/index.html
It looks like below in IE (even 9)
What it should look like ... in Firefox/Chrome
Little know fact: you need to put the modernizr script on inside the head tag, otherwise IE doesn't know how to style the elements before rendering them. The webpage is perfectly fine declared as html5, lots of production websites are already doing this.
IE simply doesn't support selectors like: a:link::before (you're using this in your menus).
Edit: heck, <section>, <article>? IE anything? Man this is all HTML5 stuff. IE isn't going to support it at all (9 eventually, 6,7,8, never unless they use chromeframe!)
I have some web apps and I have converted the UI to HTML5. With XHTML Transitional, there were a lot of errors when validating. When I converted the pages to HTML5, most of the errors were reduced and I managed to make the web apps fully validated.
My question is, may this may arise any problems on some browsers. I tested some of the pages which I converted in all major browsers, being IE8, IE7, IE6, Firefox, Chrome, Opera and Safari and everything seems to be working well.
I am not using any features of HTML5 like canvas and so on. So there shouldn't be any problems with old browsers right? I converted to HTML5 so the web apps would be of the latest version known to the web and most importantly, they would validate correctly.
Is there any problems which might arise which I should be aware of?
P.S. By converting to HTML5, I mean that I changed the doctype from the usual transitional or strict one to just:
<!DOCTYPE HTML>
Thanks
As Jannis said old browsers don't recognize the new html elements.
If you want to apply the best practice for cross-browser compatibility check this link:
http://html5boilerplate.com/
Many browsers still do not understand the <article>,<header>,<footer>,<section> tags. If you are not using them, there will be no problems.
If you are using them, do like this:
CSS:
header,footer,section,article,nav,aside (and every other HTML5 block tag) {
display:block;
}
Javascript:
document.createElement("article");
document.createElement("header");
document.createElement("footer");
// do so for the rest of the HTML 5 tags.
There is a DRY-solution for the new tags:
https://code.google.com/p/html5shim/
I have a blog, www.realcanadianenglish.blogspot.com. I use Firefox to write it. Sometimes I check the blog using Internet Explorer. With the later it shows a gap between the picture and the text sometimes. Can I change the HTML code to fix this? Why is there a difference between the two: Explorer and Firefox?
Internet Explorer can have extra padding on some elements. I suggest you try to include a CSS Reset file first and then your own CSS file.
Here's a good Stackoverflow question about CSS Reset files
The blog looks fine on IE8. If you're having a problem with it, I would recommend running IE8 and using the debug tool provided (hit F12). You can dynamically change the HTML and CSS from right inside the browser. It's faster than uploading a new template every time you want to test a change.
You are refering to the IE Model Bug
In most cases the issue will be with IE and, in those cases, it's sometimes best, or at least convenient, to just serve IE a line or two to bring it into line with the other far more modern browsers with "conditional comments". These comments will be recognized only by IE but wind up allowing you to include styling or html that won't affect other browsers. They are easy to use but have a few variations based on which version of IE you are targeting. Here is the link explaining them all: http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
Here is the best place to learn about IE CSS bugs: http://www.positioniseverything.net/ie-primer.html