My ASP.Net application only comes out properly if i am previewing it in Internet Explorer but its the ugliest thing ever if i view in Firefox,Chrome or Safari.
How can this be, and how can this be resolved.Helppppppppp
What DocType are you using? If you're using transitional then IE will be rendering in quirks mode. Force a DocType of strict.
Check out this link here for a good explaination of DocTypes and this link for an explaination of one major way the Doc Type affects layout: box models.
Have you compared the source of the pages in the different browsers? Are they the same, or are there major differences? If not, then you'll need to work on your CSS - and for that there are few better tools than Firefox and Firebug.
If the source of the pages is different, then you're falling foul of an ASP.NET feature that checks your user agent against a list of Browser Capabilities or the Browser Definition files - and in earlier versions of the framework, these were woefully out of date - what rendered as a <div> in IE would come out as a single cell <table> in Firefox.
Since ASP.NET 2.0, you've also been able to change the behaviour of controls with Control Adaptors - for example the CSS Control Adapters will output styled divs for most of the tabular controls (login, registration, repeaters, etc) - which again can be targeted to specific browsers.
I'd advise using FireFox as your development browser, while testing in IE and Chrome as well.
Besides being more standards based it has superior web tools within, like Firebug, yslow and
Web Developer.
Cross browser compatibility is, unfortunately, not trivial. It is a large topic with a lot of material devoted to it. As dove suggests, it's best to use a (relatively) standards compliant browser to do your development work, e.g. FF, Opera, Chrome or Safari and then tweak to make it work in IE 6/7/8 afterwards.
I would recommend against using any of Microsoft's built in theming etc. and stick to pure CSS based styling as much as possible. The ease of making your site cross browser compatible will, to a large extent, depend on your knowledge of HTML and CSS, but I recommend starting with a good CSS framework or at least a good CSS reset (which removes browser specific default styling and allows you start with a common base). Try having a look at Tripoli, which gives you a common cross browser CSS standard (a reset plus rebuild of default styles).
The usual way to tweak the CSS for IE is to use IE specific conditional comments to include an extra CSS file only for IE, e.g.:-
<link rel="stylesheet" href="http://tempuri.org/styles.css">
<!--[if IE]>
<link rel="stylesheet" href="http://tempuri.org/styles.ie.css">
<![endif]-->
You can also include different stylesheets for different versions of IE, see here.
Related
I am new to the responsive design world.
I am using http://www.responsivegridsystem.com/ in my design. It tells to add following markups
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements and feature detects -->
<script src="vendors/responsive/js/modernizr-2.5.3-min.js"></script>
Since media queries are not working in IE8, as per this question IE7, IE8 support for css3 media query I am using the following markup too
<!--[if lt IE 9]>
<script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Do all these are needed? Whats the difference between html5shim, modernizr and the css3mediaqueiries?
Do i need to use modernizr? Because I am not doing anything with that in my js file like jQuery.
They serve three very separate purposes, all can be very important, but not all (if any) are always needed.
html5shiv aka html5shim
html5shiv is a script that allows you to properly use html5 elements in older browsers, Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x, at the time of this answer.
So, what does that actually mean? Its pretty simple. There are a number of new elements in html5 (like <section>, <aside>, <header>, and <footer> to name a couple), as well as the ability to create your own custom elements. That means that we can write more semantic (and clearer) code. All great things, but unfortunately, older browsers don't apply your css to elements that were not one of the ones that they shipped with support (<div>, <p>, <span>, the normies). Luckily #sjoerd-visscher dropped some knowledge and saved the day. He discovered that if you use document.createElement to create any new element, it sort of registers it as one of the supported elements, and the css works!
This meant that you could actually use html5 elements in production. It was a huge deal at the time, and luckily becoming less and less important as those older browsers are dying off.
It has since expanded to add some basic styles for browsers, in addition to registering the elements.
If you don't have to support Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), or Firefox 3.x., then you DO NOT need to use html5shiv.
css3-mediaqueries-js
css3-mediaqueries-js adds support for a css feature called media queries in browsers that don't support them. If you aren't sure what that means, check out sites like The Boston Globe, Mitsubishi Australia, or techcrunch, and then resize your browser.
Media Queries allow you to apply css conditionally, based on some attribute or combination of attributes of the browser (width, height, etc). They are incredibly powerful, and power a lot of modern web design.
Now, the question is whether or not you actually need something like css3-mediaqueries-js. It was once in vogue to do so, but it is becoming more and more common for people (myself included) to recommend mobile first design. This means that the base styles should be a mobile site, with media queries adding to the base design, instead of hiding/removing some things. As a result, browsers that don't support media queries (the ones that css3-mediaqueries-js is intended for) get served the "mobile" design, rather than polyfilling and then applying the media query during every resize. Older browsers generally mean older, slower, and smaller computers. Not only do they lack support for media queries, their javascript engine is hundreds (sometimes thousands) of times slower than modern engines that power current Chrome, Firefox, and IE. All that extra work on something that isn't nearly as powerful to being with can easily result in a degraded experience for the users of those older browsers.
Whether or not you should use it is ultimately up to you, but make sure to ask yourself what is best for the user, not necessarily the designer :]
Modernizr
Modernizr is a feature-detection library, that allows you to check for new web features in a simple way. By default, ((you can build a custom version here)[http://modernizr.com/download/], changing anything you want) it adds classes the <html> element on the page, making it super easy to modify designs based on its results.
.css-gradients .background {
background: linear-gradient(to bottom, black 0%, white 100%);
}
.no-css-gradients .background {
background: url(gradient.jpg);
}
(of course that is a super trivial example, and you can accomplish the same thing using a basic fallback without modernizr, but it is just meant to serve as an easy to follow example)
It doesn't actively add or remove anything itself, but in combination with something like yepnope, you can test for a feature, and conditionally add a polyfill for that feature.
Something like this
yepnope({
test : Modernizr.mediaqueries,
nope : ['css3-mediaqueries.js']
});
would check to see if mediaqueries is support in the browser, and if it isn't, it would load css-mediaqueries-js to polyfill support for it.
HTML5shiv is for emulating html5 element in ie8.
css3-mediaqueries-js and respond js do similar task(supporting media queries)
Modernizr is actually a browser feature tester which include bunch of css classes in ie and later applying manual style for ie.
Best Usage is to use-
selectivizr with html5shiv
I am having quite a horrible time. We have a massive site that has no <DOCTYPE> and when I run it with IE10 it goes into quirks mode and after some CSS changes looks ok. As soon as I add echo "<!DOCTYPE HTML>";
The complete site looks terrible and the CSS is not looking as it suppose to. It turns the browser mode to IE10 and docmode to standard. Is there a way to keep HTML 5 functionality but use IE5 Quirks mode or just Quirks mode so the CSS will look correct?
No. The whole point of quirks mode is that it's a compatibility mode for IE5. This means that in addition to changing the layout mode, it also switches off most of the browser features that have been invented since IE5.
Therefore the blunt answer is no, you cannot mix Quirks mode and HTML5. It just can't happen.
However there is some good news for you: switching from quirks mode to standards mode is actually easier than it looks at first glance.
You don't have to go through your whole site changing all the CSS to suit the different box model, because standards mode does have a CSS feature that allows you to use the quirks mode box model while still remaining in standards mode.
Simply add the following to the top of your CSS code:
* {box-sizing:border-box;}
This will change all your elements to use the quirks mode box model, but your page will still be in standards mode.
This should sort out most (if not all) of the layout issues you've been having.
Hope that helps.
No, there isn't. The modern engine that includes the new features and the engine for emulating ancient, buggier browsers are separate entities and you can't mix and match parts of them.
As far as browsers other than IE are considered, you can add tags and attributes introduced in HTML5, without using any <!DOCTYPE>. The page will not conform to HTML5 then, but this is just a formality as such. Browsers do what they do, interpreting tags and attributes as they have been programmed to. There is no “HTML5 mode” in browsers that you would need to trigger with a <!DOCTYPE> or otherwise. Just try it. Throw in some HTML5 novelties like <input type=email> or <details>, and you will see that they work if the browser supports them in the first place, no matter whether there is a <!DOCTYPE> or not.
You would then have difficulties when using a markup validator, but that’s a different issue.
Quirks Mode is a real mess, with dozens of undocumented and poorly documented phenomena. If a page works in Quirks Mode and you then make browsers render it in Standards Mode, literally anything may happen, ranging from no effect to total disaster. So such a change is usually pointlessly risky. Keep using Quirks Mode for old pages developed to use it, and create new pages to work in Standards Mode (and possibly to be HTML5 conformant).
Quirks Mode affects styling and to some extent scripting. It marginally affects the interpretation of some old HTML attributes. But in most browsers, not the way new HTML5 features work.
However, IE is particularly quirky. On IE 10, the above seems to apply. On IE 11 Preview, deviations have been reported. And on IE 9, some of HTML5 novelties that it would otherwise support are not supported in Quirks Mode, such as the canvas element. So if you intend to add substantial use of new HTML5 features to an old page that now works in Quirks Mode, you may need to consider changing the page to Standards Mode first. Depending on the impact of Quirks features, this might be best done by rewriting the page, or it might be “only” a matter of redesigning the use of CSS to conform to CSS specifications.
[Answer corrected Oct 15, 2013.]
I was wondering whether there is a way to make html5 code visible in Internet Explorer 7 or less.
For example
<div id="container">
<header id="header">
something
</header>
</div>
In Internet Explorer 7 the header is not shown at all.
I found a workaround here, a IE HTML5 enabling script, which creates the html5 elements with javascript. But what happens is that the <header> tag looks not at all as it does in other browsers.
So my question is, is it too early to use HTML5 yet or how can I make it cross-browser working?
This (truly) incredible bit of Javascript should fulfill 100% of your HTML5 compatibility needs:
http://www.modernizr.com/
There are 2 important things to consider before using HTML5;
Target audience (with their browser choice)
HTML5 Useful features on your site.
If you are sure that a lot of your users are on IE8 and below, you should avoid using HTML5 almost entirely.
So when you say "is it too early to use HTML5 yet", the answer is it depends on your user base.
IE has good support for HTML5 only from version 9 and above..
There is no way by which you can make HTML5 advanced features to work on IE7/8...The html5.js you referred to just makes your CSS to "not ignore" any HTML5 elements and apply styling..It does not do anything further than that..
For all major browser support and score, you can check out html5test.com
Apart from that, you may also check out a very nicely explained tutorial on HTML5 called as DesignMobileWeb available on
http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8
Please do remember that if you are going to have a basic site, using HTML5 should be avoided.
You should consider HTML5 only if you plan to use Local Storage, Offline Access and HTML5 Forms for mobile devices, etc
IE < 9 doesn't recognize the HTML5 elements and will not generate them. So I use this bit of JS to do the generation:
var e = ("abbr,article,aside,audio,canvas,datalist,details,
figure,footer,header,hgroup,mark,menu,meter,nav,output,
progress,section,time,video,figcaption,summary").split(',');
for (var i = 0; i < e.length; i++){
document.createElement(e[i]);
}
I use this conditional comment to check whether I need to run the script
<!--[if lt IE 9]>
<script src="js/html5_createElement_for_IE.js"></script>
<![endif]-->
Of course, you will need to style the tags for IE < 9, but you would need to anyway.
Start with this: http://html5boilerplate.com/. It should solve most of your problems. It works great.
IE versions < 9 will not render elements that they don't recognize, so the new HTML5 elements, header, etc are off the list. Other browsers render unrecognized elements, but without styling.
The way around this is to "show" the new elements to IE by squirting them into the DOM directly using JavaScript. You only have to do this once on each page view.
The two standard ways to do this are:
The Google Shiv: http://code.google.com/p/html5shiv/
Modernizr: http://modernizr.com/
Modernizr also does a whole bunch of other things to do with feature detection.
Try using chromeframe - http://code.google.com/chrome/chromeframe/
By itself though you cannot use most of the cool new features of HTML5 with IE7. It just isn't implemented in the browser plain and simple.
I check whether or not the requesting client supports the application/xhtml+xml mime type (it is part of the accepts header sent the request).
If it does not, then I send the client a version of the page using div nodes in place of most html5 semantic nodes.
This is very old... Damn... But I guess this could help someone, though
I used this meta
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
And fixed everything without using any more scripts...
Found it here:
http://www.validatethis.co.uk/news/fix-bad-value-x-ua-compatible-once-and-for-all/
I'm building a new website and I'm wondering what happens when an old broswer (IE7 for instance) requests a page and the doctype is HTML5? It's currently set as XHTML transitional but I'd like to add HTML5 videos. Should I switch to an HTML5 doctype?
Thanks.
The HTML5 doctype was chosen as it is the bare minimum required to trigger web standards rendering mode in browsers that support it. It'll work fine in older browsers, but they won't support any of the HTML5 features or tags.
You can change the doctype right now if you want, but you won't get any new features.
In regard to the tags in HTML5, you can make old version of IE recognize and allow styling of the new tags with an HTML5 Shim. The Modernizr script also includes a Shim.
For HTML features like video and audio you'll need to use a technique called pollyfilling. These pollyfill libraries automatically fill in missing functionality for browsers that don't have it.
There are pollyfills around for most of the HTML5 features and for some of CSS3 too.
The Modernizr wiki has a good list of common pollyfills.
Many of these use the feature testing of Modernizr to determine if they need to do anything.
What happens for video is that the library checks for HTML5 availability, and falls back to flash if it is not available. Most replace the HTML5 native chrome with their own look and feel so that it looks the same regardless of which underlying code (native or flash) is being used.
For video mediaelement.js uses this approach and I would recommend that as a starting point.
The issue you'll have with HTML5 videos being inaccessible in older versions of IE is going to be the same regardless of the doctype. The standard practice, at least until HTML5 has wider support by browsers, is to use libraries that will gracefully fall back to Flash (or whatever your preferred fallback is) if the user's browser does not support HTML5. I've personally had success using JWPlayer for exactly this task.
I dont understand why the HTML5 website I am working on is different in all browsers. I know it must be CSS, but I dont know what.
on Chrome: http://slackmoehrle.com/chrome.png
on Safari: http://slackmoehrle.com/safari.png
on IE 7: http://slackmoehrle.com/ie7.png
on FireFox Mac: http://slackmoehrle.com/firefox.png
the style sheet can be found here: http://slackmoehrle.com/css.css
Can anyone shed any insight?
Many are saying that browser detection is not a good method, but I dont see what to do to make this all work in the various browsers
UPDATE:
without using a CSS reset: http://slackmoehrle.com/test/without-reset/
with using a CSS reset: http://slackmoehrle.com/test/with-reset/
Have a look at using a CSS reset stylesheet
My personal favorite is Meyer's: http://meyerweb.com/eric/tools/css/reset/
The only real problem with browser detection is the fact that if newer version of browser will support some new features (rounded borders for example), but you still will be doing some workarounds.
Better approach is to use feature detection, so you will be able to use some specific browser capabilities if it has support of them and some graceful degradation pattern when something isn't supported.
For CSS most pragmatic approach is to have reset CSS included for all browsers, then have some common CSS rules which look the same in all browser and additional CSS files for different browsers which contain rules that should be different for different engines.
From my latest experience it's almost always possible to maintain only two versions of these DIFF files - one for Firefox, Safari, Chrome and another for IE family. And use feature detection for JS.
First of all, no version of IE can handle the new elements of HTML5 without javascript help. Only modern browsers can and IE is not a modern browser.
As far as the other browsers go, I'll have to look more but I've not had any issue with any sites I've done but, then, I don't use CSS resets and set all the CSS on the elements myself.