How to Make IE6 Render HTML5 Mark-up Correctly

How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6

on Jan 20th 2010 with 187 comments
This entry is part 4 of 14 in the HTML5 and You Session
« PreviousNext »

HTML 5 provides some great new features for web designers who want to code readable, semantically-meaningful layouts. However, support for HTML 5 is still evolving, and Internet Explorer is the last to add support. In this tutorial, we’ll create a common layout using some of HTML 5′s new semantic elements, then use JavaScript and CSS to make our design backwards-compatible with Internet Explorer. Yes, even IE 6.


Tutorial Details

  • Technology: HTML
  • Version: 5
  • Difficulty: Intermediate
  • Estimated Completion Time: 1 hour

Prefer a Video Tutorial?

Quick Overview of HTML 5 Elements

The HTML 5 Working Draft provides a new set of semantically-meaningful
elements for describing a typical web page layout. Using elements that are “meaningful” (i.e. describe the content they contain)
makes it easier for you to read and organize your code, and makes it easier for search engines and screen readers to read and
organize your content.

The HTML 5 elements we’ll be using are:

  • header
  • footer
  • nav
  • article
  • hgroup

Just by reading the names of the elements, you should get a pretty good idea of what they’re for, and that’s the point!
You can now stop abusing <div> in all your tableless designs, and instead make headers out of “<header>”s and
footers out of “<footer>”s.

The one element that may not be obvious is <hgroup>. This element simply defines a group of header elements (<h1>
- <h6>) so you can group a blog post title and subtitle together, for example. Think of it as not the header of the page,
but the header of the content section.

Step 1: The HTML

We’re going to recreate the most common layout on the Web, the 2-column layout:

This layout is usually put together with a waterfall of <div> elements (or, shudder, a <table>), but with HTML 5
you can code this page quite naturally.

	<!DOCTYPE html>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	
	<html>
		<head>
		    <title><!-- Your Title --></title>
		</head>
		
		<body>
			<header>
				<!-- ... -->
			</header>
		
			<nav>
				<!-- ... -->
			</nav>
		
			<div id="main">
				<!-- ... -->
			</div>
		
			<footer>
				<!-- ... -->
			</footer>
		</body>	
	</html>

And to round it out, within the “main” element, I’m going to add some simple post templates:

	<article>
		<hgroup>
			<h2>Title</h2>
			<h3>Subtitle</h3>
		</hgroup>
		
		<p>
			<!-- --->
		</p>
	</article>

Now we have an entire layout skeleton in HTML that uses nothing but meaningful tags for all the content. Easy to read,
easy to parse, easy to design for.

Some savvier readers may ask “why didn’t you use <section> instead of a <div> for the main column? Wouldn’t that
be more “meaningful?” You certainly could, and it would be “valid,” but the <section> element isn’t meant for this
sort of layout function. From the spec:

The section element is not a generic container element. When an element is needed for styling purposes or
as a convenience for scripting, authors are encouraged to use the <div> element instead. A general rule is that
the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

Step 2: The CSS

Positioning these elements would be easy if they were all <div>s — we know how they are handled by every browser, so
we know how to write CSS to them. However, this is only the case because every browser applies a default stylesheet to a page.
Even if you haven’t specified one, there is CSS at work every time a page you’ve written gets loaded into Firefox or IE.

For example, here’s the styling applied to a <div> in the default “html.css” file that comes with Firefox:

	html, div, map, dt, isindex, form {
		display: block;
	}

But what happens when a browser comes across an element that it doesn’t recognize? We can’t be sure. It might get no styling,
it might inherit a some default styling, it might not be displayed at all. Therefore, we make sure that we account for any and
all styling of our new elements in our own CSS. No assumptions.

	/* Make HTML 5 elements display block-level for consistent styling */
	header, nav, article, footer, address { 
		display: block; 
	}

Now we can treat these elements just like <div>s, assured they are displayed consistently.

The Problem

Let’s take a look at our layout so far. I’ve put together a more fleshed out version of this code and tested it in
a few browsers. Check out our layout in Safari 4:

However, look at what happens in Internet Explorer 6:

What’s wrong with this picture? By explicitly setting display: block; in CSS, we should have
communicated to the browser our intentions for that element.

Unfortunately, IE is ignoring elements it doesn’t recognize, regardless of CSS. Our content is left floating in its
parent’s container, as if the HTML 5 elements didn’t exist. Somehow, we need to get IE to render unknown elements,
and styling them appropriately isn’t going to do it.

Step 3: The JavaScript

Luckily, there is a way to get IE to recognize new elements via some simple JavaScript.

I first read about this technique on John Resig’s blog; he’s called it
the “HTML 5 Shiv.”


The Shiv

It simply involves calling document.createElement() for every new, unrecognized element.

Traditionally you’d make this call in order to inject an element directly into some branch of the DOM; in other words,
into an existing container within the <body> tag. You can do that to fix this unknown element issue as well. However,
this trick also works by calling document.createElement() in the <head> tag, with no refence to a containing element!
That makes it much easier to read and write:

	document.createElement("article");
	document.createElement("footer");
	document.createElement("header");
	document.createElement("hgroup");
	document.createElement("nav");

To make things even more convenient, Remy Sharp has released an
“HTML 5 Enabling Script,” which does the same thing as
our code above, but for all HTML 5 elements.

Since HTML5 is getting more attention by way of marking up our new pages, and the only way to get IE to acknowledge the new elements, such as <article>, is to use the HTML5 shiv, I’ve quickly put together a mini script that enables all the new elements…

Now that we’ve added our JavaScript, let’s look at that again in Internet Explorer, with our new JS code:

Perfect. Internet Explorer 6 is now rendering HTML 5 code just as well as Safari 4.

Conclusion

HTML 5 is exciting for any web designer who wants to create clean, easy-to-read, semantically-meaningful code. And with just a
couple of simple steps — one line of CSS and one line of JS per element — we can start making use of HTML 5 today.

Got any more tips for squeezing every bit of HTML 5 you can into your production code? Let us know in the comments!

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

Write a PLUS tutorial

Tags: css3html5
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm a full-time Senior Web Developer and the author of books and articles published by O'Reilly Media. I've given workshops on a variety of topics, from web fundamentals to regular expressions to CSS compatibility, you name it. In my spare time, I twitter @billpena.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • http://blog.insicdesigns.com insic

    this definitely makes us ready for HTML 5 I guess.

    • Reader

      I think definitely not!
      There are much more like that to solve cross-browser.

    • Martijn397

      You shouldn’t make these kind of assumptions just by reading one blog post…..

      Think again..

    • http://jroney.homeip.net Juston

      insic,

      You’re totally hot.

  • Jonas

    Não funciona no IE8

    • http://www.jeffrey-way.com Jeffrey Way

      Try it again. It works. Of course, make sure JavaScript is enabled. :)

    • http://blurkness.com/ blurkness

      Funcionou perfeitamente aqui!

      Infelizmente com o tempo deve aparecer bem mais probs relacionados ao IE :(

  • henry

    Man why didn’t I think of making this tutorial :( Great work by the way!

  • http://brandingdavid.com David

    But won’t a site look bad on IE6 if they turn JavaScript off? I know we are getting down to a really rare possibility, but because of this, it seems a bit “hack-ish”. Also, what do other browsers think of this JS code?

    • http://www.jeffrey-way.com Jeffrey Way

      It will. It all comes down to where you want to draw the line. In reference to IE6, that would equal the less than 12% of users who are still browsing with….and the percentage of those people who have JS turned off.

      • http://www.edhsystems.com Eric

        Who knows maybe the Chi-Comm’s will hack IE 6 out of existance!

      • Daniel

        http://arstechnica.com/microsoft/news/2010/01/microsoft-wants-you-to-ditch-windows-xp-and-ie6-for-security.ars

        Well. Sadly I think IE6 will soon lose that 12%

        I lied. It’s not sad at all.

      • sven

        @jeff what’s your source on the 12%. im curious

      • http://www.graphicrating.com/ Andy Gongea

        It is lower than 12%. Because after narrowing to the browser you will have to narrow to your potential visitors. If they are from web design&dev area – it is likely to have 2-3% ie6 and 0.1% with JS disabled.

      • bob

        We can certainly hope, Eric! It will force people to consider what costs more money: keeping an old, unsecure browser installed or upgrading to a more secure, modern browser (at the very least IE8).

      • http://mattbramer.selfip.com Matt B.

        73% of all statistics are made up on the spot, about 81% of the time. ;-P

    • http://www.jeffrey-way.com Jeffrey Way

      But yes – it should definitely be noted that your website will now be dependent upon JavaScript – in older browsers like IE.

    • jack

      i wouldnt call it rare…if youre still using ie6…you probably have javascript turned off…ugh…old people

      • http://www.jeffrey-way.com Jeffrey Way

        So you’re assuming that old people who don’t know how to upgrade their browser know how to disable JavaScript?

    • http://www.danwellman.co.uk Dan Wellman

      don’t most sites look bad in IE6 anyway :P

      • http://www.brettjankord.com Brett Jankord

        If your redesigning a site for a company, look at the site statistics, granted they have any, to see how many users of that particular site are actually using IE6. If the company doesnt have any stat tracking software, see if you can set up google analytics and run it on there site while you work on building the new one to collect the data. That will give your answer if you will have any problems with IE6 or if you can use HTML 5 without any worries.

      • Abhijit

        No :)

        There still are huge many sites designed with tables and designed mostly for IE. That may seem vile but that’s true. Also Windows XP and IE6 are still in force in developing countries. MS may be, and can be, overlooking that but web designers should not. Of course if your target audience are mostly internet savvy people then you may ignore IE6 but even in developed countries there are many people who like to stick to old things than upgrade. Better mark-up syntax is great but unfortunately that does not matter to the end user!?

  • http://www.yorickpeterse.com/ Yorick Peterse

    For the love of god, stop supporting IE6 in any possible way. This is just another reason not to upgrade for those who already refuse to do so. IE6 is a piece of crap that’s almost 10 years old and is only being used by about 10% of all internet users.

    http://grab.by/1RmP

    • http://www.pixelsoul.com pixelsoul

      ^ agree

      I brutally force anyone running IE6 to upgrade any chance I get or redirect them to a page that tell them to upgrade rather than see the site.

      • http://www.jeffrey-way.com Jeffrey Way

        This article is for IE7 and IE8 as well though. :)

    • zarathustra

      hear hear. The more sites that fall to bits on it the better. I am just pure out of patience. I think we should make IE6 style sheets to tell the user their PC is busted so they buy a new one that’ll come with 8.

    • Skunkie

      You want to know who the 12% IE6 user really are?

      I just can’t get rid of the feeling, that those 12% hits with IE6 are all the web designers doing compatibility testing! Muaaahhhh….

      • http://www.webke.net/ CyberFox

        Ha! ha! ha ha ha … LOL

    • Victor Teixeira

      The problem is that we work for clients and clients need to sell products and services and they don’t understand this browser stuff.
      They just want people to see their website the way that it’s supposed to be.

      Unfortunately according to NET Applications (http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2) IE6 is the absolute winner with an impressive 20.99% market share – it’s more than Chrome, Opera and Safari together!

      Maybe in ten years we can really drop support.

      Until then I will still be doing conditional stylesheets.

      • http://www.yorickpeterse.com/ Yorick Peterse

        I rather believe the W3C than a website who’s modal windows look like Windows Vista explorer windows.

      • Darren

        @Yorick, w3schools.com has nothing to do with W3C – it’s a private website run by Refsnes Data – and also those visiting that site are obviously primarily those trying to learn web development. In fact, it explicitly says on their website, “These facts indicate that the browser figures above are not 100% realistic. Other web sites have statistics showing that Internet Explorer is used by at least 80% of the users.” It’s not a browser usage analysis service, you’re just seeing a report generated from their log files.

  • http://www.designbash.com Emerson

    Thanks for the intro to HTML5, I assumed it would not be practical for another 10 or so years, when IE14 finally adds border-radius…

    I always find myself second guessing any technique that requires javascript, even though I know my apprehensions are holding back my design, functionality, and markup.

    I think I may just take the plunge and start designing and coding with the assumption that my users will have javascript enabled… it’s time!

  • wally

    What’s that software that makes IE6 run on OS X?

  • Ahmed

    Well done ;)
    That’s the way ‘aha aha’ I like it.
    “from Night at the Museum”

    Can’t wait for IE6 to be a history. And hope all browsers (specially IE, Gmail) would agree for ONE time and follow the same slandered; so we developer will focuse more on writing code, business needs and relay on all browsers to render what we need the way it should be.

    I see HTML in fantastic and fun to write with CSS3 it’s like Strawberry dipped in thick chocolate sauce :) We love each as individual; combining them together is wonderful and enjoyable.

    I think Microsoft is been -pushed- towards open source community and -pulled- out from it’s punker so they can pleese all devs specilly Open Source Community. Look at ASP.NET MVC which is a result of them being hidden in their punker while the rest of the world communicating and working together to get the best we all like which it works for all.

    With no doubt HTML5 will takes time -but not long- to be adopted by most/all big orgnizations but it will happened.

    Nice Post…Rock On.

  • http://billpena.com/ Bill Peña
    Author

    I used WineBottler, a great Wine to Mac OS X app packager released recently. This way, I can keep IE8 in my VMWare installation, but kick out to barebones IE6 and IE7 installations when I need to. It’s faster than VMWare when you just want a screenshot, but not nearly as stable.

    http://winebottler.kronenberg.org/

    • Justin St. Germain

      nice find, thanks for the link. going to have to get that on my mac today.

  • Jeff

    A small suggestion for those who are hestitant to rely on javascript: the no script tag. Granted it’s a lot of non-semantic garbage, but it’s an answer. Honestly, if the user doesn’t have javascript enabled then they’re going to know that some sites aren’t going to work. I think a polite message with a link to a more optimized version of your site is sufficient.

  • http://www.electrictoolbox.com/ Chris

    It’s a good solution and I’ve tried it out myself but I cannot personally accept a solution for layout that *requires* Javascript to be switched on in Internet Explorer browsers.

    And to those people who are asking why should we support IE6, it’s not just an IE6 problem because neither IE7 nor IE8 will render the HTML5 tags as blocks either.

  • http://www.bloqhead.com Daryn St. Pierre

    It’s a handy method and if you’re pretty familiar with Javascript, it makes sense, but it’s not something I would never implement on a live website. It’s more of a proof of existence, experimental tool. Nice work regardless.

    • http://www.nouveller.com/ Benjamin Reid

      I completely agree. We’ll just have to keep waiting.

  • http://www.bloqhead.com Daryn St. Pierre

    Whoops, meant to say “not something I would EVER implement on a live website.”

    • Justin St. Germain

      i say it would be fine to implement on any small site that is just a general portfolio site or something of that nature. other than that, i see your point.

    • Martin Lynge

      Forcing IE6 or newer releases to render your stuff is common practise with CSS. If you wouldn’t implement HTML5 now when is the right time?
      I mean IE7-8 doesn’t support HTML5 either. With that in perspective think about how long IE6 has been around.

      I don’t know if I would us it either but a discussion on when implementing new standards is the right and wise choice would be interesting.

  • Maarten

    It definately does make us ready for HTML5, however I see no further use to implement it yet. There is no clear signal when HTML5 will be released into the world of internet.

    Using javascript to fix css and xhtml is still a ugly way to solve problems in my honest opinion. Javascript should be used to enhance usability, not correct mistakes.

    • Darren

      Yes, this clearly fails the ‘progressive enhancement’ test.

  • http://twitter.com/HeinzTheo Chris

    Well, we have already seen more advanced and detailed tutorials here…

  • Dave

    Very nice tut! I have been in the trenches, and am not up on HTML5, so this is really great.

    As for requiring Javascript, fine with me. An enormous number of sites are heavily reliant on it anyway. In my own work, I’ll admit that I don’t have time, and am not paid enough, to make sure all my sites work without Javascript.

  • http://52framework.com Angel Grablev

    Nice, or you can use the 52framework which is html5 and css3 ready :) completely cross browser! Check it out at 52framework.com

    • http://www.electrictoolbox.com/ Chris

      And it also uses Javascript to make it work in Internet Explorer.

  • Teddy Zetterlund

    I think this article needs to be updated with what Chris’ mentions here in the comments. The article makes it sound like it’s only IE6 that needs the javascript-fix. Which is wrong.

    • http://www.jeffrey-way.com Jeffrey Way

      I’ll make a note that it’s for all versions of IE.

    • Justin St. Germain

      you know, im really surprised that microsoft didnt make IE8 capable of handling html5. i guess this is what i have come to expect from them though. nothing but disappointment, always.

      • http://www.brettjankord.com Brett Jankord

        Fingers crossed, it will be in IE9, which is in development http://blogs.msdn.com/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx

        Looks like they are actually adding some support for CSS3

      • Darren

        I’d obviously prefer that they would too but to be fair HTML5 is just a draft and is obviously being driven by Google and Apple for their own ends. No-one seems to be complaining that Microsoft went out on their own and developed XMLHttpRequest so we now have AJAX to play with.

  • http://www.myfacetubebookspace.co.uk Will Hancock

    I love this article… it makes the future present. I get so frustrated as a developer working in such a fast paced industry, but technical advancements take so long to get into common usage.
    Mainly due to the number of IE versions to support. For 5 years I have been working with transparent png’s to lift a design, but still have to nearly build it all again for clients on office networks lingering in IE6 lol

  • http://www.designlovr.com DesignLovr

    Great and comprehensive article!
    I was looking for something like this.
    I’m as many others (at least it seems like this from the comments so far) a little bit reserved in regard to javascript based solutions, always leaves a taste of hack in my mouth – after all it can simply be deactivated.
    The noscript tag (as mentioned above by Jeff) might be a worthy fallback in this case.
    I’m just dreaming of a more unified browser future.

  • Justin St. Germain

    This is just amazing. Im so happy that there is a solution to be able to start using html5. i dreaded not being able to really use it for a couple more years at least, but, that has all just changed due to this post. thanks.

  • http://stvproductions.net S.T. Verschoof

    In my opinion we should bannish IE6 from the land of the world wide web. It’s old, outdated and vulnerable. Users should update their browsers to go with modern standards, we shouldn’t bugfix the living hell out of everything we create for our users. Be Updated, Be Compatible. Like putting a vinyl record in a disc player just aint gonna do the trick, people should update! Nice tutorial though :)!!

  • http://rmcreative.ru/ Sam

    What about FireFox 2?

    • r_jake

      Not sure of the statistics, but the general assumption is that the majority of Firefox users upgrade since they are technically savvy enough to have Firefox in the first place.

  • r_jake

    Hmm.. still not fully convinced, although this does make HTML5 adoption seem simpler than I thought.

    But what are the overheads of this method? If you’ve got a complex layout with a lot of elements then won’t there be a delay (on every visited page) whilst the JS is working it’s magic?

    • http://billpena.com/ Bill Peña
      Author

      Since the JavaScript isn’t being executed for every time you include the tag, just once per tag used, then no, it won’t. The JavaScript only runs once, before the browser starts rendering the body, and only once, regardless of the number of instances of any given element.

      In other words, it’s fast. :)

  • http://www.monoroot.com Paul

    Interesting article, however I agree with Maarten’s earlier comment in that JavaScript should be incidental and used sparingly.

    As for supporting IE6, that’s all subjective, you’ve got to analyse the audience of the individual site, if say only 1% are using IE6, then it’s time to focus all attention on the 99% who are savvy enough to keep up to date.

  • http://bloggerzbible.blogspot.com/ Bloggerzbible

    thanks needed it as some codes don’t work in explorer but work in firefox

  • http://www.jonathlee.com/blog/ Jonath Lee

    A very great tutorial, not just providing info on how to-code HTML5 but also promote HTML5 usage nowadays. Guess everyone begin to make themselves comfortable with HTML5.

  • http://www.twitter.com/NeilBradley Neil

    Did you consider using the element instead of / ?

  • Daniel

    Thank you for this tutorial. I love anything that beats IE. You’re my hero =]

  • http://spotdex.com/ David Moreen

    I just want to stab IE in the brain!

  • http://websitedraft.com WebsiteDraft

    As a developer it’s always interesting to try out new technologies, but don’t think for a second that you really need to learn HTML5 at this point. Check http://en.wikipedia.org/wiki/HTML5#Completion for an idea of when HTML5 will actually be completed. Add to that the fact that W3C often misses deadlines, and that it will be a long time before everyone will have a browser that supports HTML5, and you have an idea why I think you can easily (and should!) stick to XHTML 1.0 or even HTML 4.1 for some time to come.

    Don’t get me wrong: I, too, think it’s interesting to play around with the new options. Just be aware that, from a business perspective, there’s no reason to get too much into HTML5 right now.

    • jan

      So true! I think this will take a couple years when we can say it’s worth using HTML5 and CSS3 for real business, so we do not need to do things like fixing IE6 ( what will be hopefully dead by that time)

  • http://www.webke.net/ CyberFox

    Has anybody analyzed who still uses IE6? I suspect it is people who still use Windows 98 and tiny monitors. Are these people going to buy anything from you?

    • Working for The Man

      A considerable number of federal agencies within the US Government still use IE6 as the default agency browser, and code accordingly. When you consider the US Government is the world’s largest purchaser and user of IT products and services, IE6 is not going away soon. Unless, of course, we can convince this 800 pound gorilla to move into the 21st century …

    • m.o.k

      couldn’t agree more :)

    • http://parenting.pl Marcin

      Corporate users who browse during their working hours. IE6 is still very popular among corporations because many other business applications rely on it. And in many companies, you don’t have an option to install an app outside of the list approved by the IT department.

  • http://nohan.com.br nohan10

    amazing introduction, but…”IE.6 MUST DIE!!!”

  • http://www.squareonemd.co.uk web design cheltenham

    the debate about IE6 and js, who cares about IE6 – the less we design for it the less appeal it will have.

  • http://platipi.be Steven Fauconnier

    Very good tutorial!
    For those interested in more about HTML5 (and cross-browser HTML5 features):
    check out http://diveintohtml5.org/
    Has helped me a lot. :-)

  • http://www.milesj.me Miles Johnson

    Or you know… you can just use Modernizer which does a hell of a lot more then this.

    http://www.modernizr.com/

  • http://www.crearedesign.co.uk Stephen Webb

    The impending development of HTML5 and CSS3 is exciting news, there are certainly lots of features that will make web design easier, quicker and far more aesthetic.

    It’s nice to see a tutorial addressing the issues that these changes will bring with older browsers, and specifically IE6. This is an outdated technology to begin with, so trying to get IE6 to display brand new elements will be a bit of an issue, but tutorials like this can make a big difference.

    I’m looking forward to more coverage of HTML 5 elements and CSS 3 capabilities. The changes these will bring are certainly going to overshadow the previous developments, and will bring the internet into a whole new phase.

  • http://www.w3wall.com neer

    net tuts have really nice tuts for every web developer. thank you

  • Sander

    What about printing? The browser doesn’t execute javascript when printing a page…

    • http://www.twitter.com/gyoridavid David Gyori

      good point, that’s why i don’t start to use html5 yet..

  • http://sideradesign.com paul

    Actually you can have multiple H1 tags in HTML5, so the article section should have an H1 as the title and h2 as subtitle

    • http://jeremie.patonnier.net/ Jeremie

      Actually you can have multiple H1 tags in ANY versions of HTML ;)

  • http://www.gold-price-today.com اسعار الذهب اليوم

    good javascript file
    but i didn’t like HTML 5
    thanks

  • http://jeremie.patonnier.net/ Jeremie

    Good article, check this one : http://html5doctor.com/html-5-boilerplates/

  • http://sonergonul.com Soner Gönül

    Wow !

    That’s great !

    Thanks !

  • http://www.ravelrumba.com Rob Flaherty

    For those making claims about IE6 market share, remember that universal statistics are meaningless. It only matters what browsers YOUR users are using. Some of the sites I work on have a 35%+ share of IE6 users. It’s not that uncommon for sites serving corporate audiences.

    • http://www.mathias.li Mathias M Stav

      Thats why we have google analytics.

      So, if all my users have javascript turned on, this will completely destroy my ie problems?

  • http://www.japhex.net/v3 Jamie

    Chances are, if someone is using ie6, they are probably part of a large organisation who can’t be arsed to get their IT team to update their browsers – chances are if thats the case, Javascript might be disabled for security reasons.

    Other than that good solution dude

  • http://designwoop.com Stu Greenham

    Great post thanks! Going to be starting to look at HTML5 very soon so will come in very handy!

  • http://bcinarli.com Bilal Çınarlı

    Last month I have prepared a started kit for both html4 and html5 versions. In html5 version, I used Remy Sharps html5shiv.js , it adds all the new html5 elements to dom for internet explorer.

    http://bcinarli.com/works/html_starter_kit/html5/html5.html

  • http://www.clintonbeattie.com/ Clinton

    Good ol’ javascript to the rescue. Just a word of warning, if you are doing high end business, corporate or intranet sites, many users will have javascript turned off. In fact from my experience, a majority. SORRY! Just bringing everyone back down to earth for a while. I know we’re all highly creative people with a lot of great ideas ;-)

  • Chris M

    Although this is an acceptable tutorial in general, I fear some designers/developers will take this for more than what it is, which is a neat way to use javascript to trick IE.

    Build websites to work with the lowest common denominator and/or most popular browser (see “Internet Explorer”) first and foremost. What’s so special about HTML5 that you should have to rely on javascript for your CSS to work? I definitely can’t think of anything.

    • http://websitedraft.com WebsiteDraft

      Exactly. More than anything, this is technology for technology’s sake – and that’s a bad idea. There’s no real business need for any of this yet.

      • http://www.neilrpearce.co.uk neil

        There’s nothing bad about staying in front though is there?

        Okay HTML5 will take it’s time going mainstream, but if you start using it now, you will be a black belt when the time for HTML5 does come! Same with CSS3.

        Makes sense to me – especially when all we bleeding do is hack for IE anyway!

      • http://websitedraft.com WebsiteDraft

        Neil, there’s absolutely nothing wrong with staying in front. But the article mixes up two different things: The “staying in front” part (where tech-curious people learn the new stuff), and the business side of it (where you make hacks to accomodate for old browsers). It makes no sense to start making HTML5 hacks for IE 6 at a point where HTML5 is still a draft.

  • http://www.androbytes.com Andres

    The funny thing is that …NOW it seems so simple….

    Thank You

Newer Comments →