dawnerd » CSS

Making Internet Explorer HTML 5 Ready

Troy Whiteley — Sun, 09 Aug 2009 18:49:19 +0000

I’m going to come right out and say that it’s likely to take IE years before we see native HTML 5 support. However, that doesn’t mean we should ignore HTML 5 until IE gets with the program.

If you’ve tried to mess around with HTML 5 in IE, you may have noticed that the new elements do not work correctly with css. Luckily for us, we can use a tiny bit of Javascript to trick IE into rending the HTML 5 elements correctly.


document.createElement('header');
document.createElement('footer');
document.createElement('aside');
document.createElement('nav');
document.createElement('article');
document.createElement('section');

The above snippet of Javascript will enable HTML 5 support for the following elements: header, footer, aside, nav, article, section. Should you need support for another element, just use the createElement function and set the parameter to be the element name.

Remember that you should only include the JS file with the ‘HTML 5 emulation’ code on IE.

Our next task in a later post is to emulate the video and audio elements.

Fixing Common CSS Issues In IE6 and IE7

Troy Whiteley — Tue, 21 Oct 2008 06:05:01 +0000

As it turns out, Microsoft really doesn’t care about web standards at all. It has taken them way too many years to adopt the basics of CSS2 correctly. Now they are trying to expand that with IE8. However, developers still have to deal with the outdated IE6 and IE7. Using min-width is completely pointless unless your user base only uses good browsers.

The other day, I literally stumbled upon a JS file that fixes most of the IE6 and IE7 bugs. It emulates a lot of missing CSS functionality, and also applies a generic PNG fix. You can find the file here. I have been using it on all of my projects recently. In combination with a css reset stylesheet and the IE7 JS file, I have had a lot less headaches. I say you give it a shot. it’s not like it will take a lot of work for you to at least try out.

Rollover Images Without Javascript

Troy Whiteley — Fri, 16 May 2008 05:29:44 +0000

One of the messiest things I have seen is the auto-generated code from Dreamweaver for rollover images. It got me thinking of ways to make the images swap without the need of Javascript. Instantly I thought CSS. It was actually fairly simple to get working.

Take for example this button:

Right now the button doesn’t do a thing. However, if we apply some CSS to it, we get a nice button with a rollover.


.button{
    background:url('url/to/image.png') no-repeat;
    width:20px;
    height:20px;
    display:block;
}
.button:hover{
    background:url(url/to/rollover.png) no-repeat;
}

Now the button will show the image and swap to the rollover when you hover over it. All without Javascript. But, you ask “How do you preload the images without Javascript?”

I laugh, such a simple answer. Put the rollover images at the top of the page, inside of a hidden div.

And there you have it, JS free rollover images.