dawnerd » CSS

Making Internet Explorer HTML 5 Ready

dawnerd — 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

dawnerd — 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.

Quickly Creating Javascript Tooltips

dawnerd — Sun, 24 Aug 2008 11:05:11 +0000

I’ve noticed that a lot of sites do not use tooltips as much as they should. There are many places on a site where tooltips would really be nice. One example of using them correctly is TheSixtyOne. They use a nice tooltip when you are about to bump a song up. It quickly lets you know how many points it will cost and how many times you have bumped it. This post will hopefully inspire at least one of you to use tooltips more often.

The solution I have decided to use is UniTip from Unit Interactive. I believe they have the best solution to quickly setting up tooltips. Download the zip they provide and we should be ready to go.

First, the base html:


  
    Example tooltip

Open up unitip.js and find the lines containing:

var uniTipTag = "a,img";
var uniTipClass = "TipEx";

Change this to:

var uniTipTag = "img";
var uniTipClass = "tooltip";

Now just run the html file and you should instantly have tooltips. If something doesn’t work, make sure your path to the css file and images are correct. In addition, it is suggested to use a PNG fix file for IE6. I recommend Unit PNG Fix. It’s super easy to use and works like a charm.

Please keep in mind that tooltips are really designed for items that really need them, extensive use is annoying. A common use is creating help tips for users completing a complex form. If there is some form of information a user could not understand, it is advisable to use a tooltip on the input box or the label.

New Look, Same Greatness

dawnerd — Sun, 24 Aug 2008 07:34:30 +0000

I decided that the old theme was too dark after getting a few messages about it. Hopefully this one will suit everyone. As you can tell, it is very simplistic. If you have any comments about this one, let me know right away. Oh and this was created completely by me, no pre-made themes this time.

Rollover Images Without Javascript

dawnerd — 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.