Internet Explorer 6 is not supported.
Upgrade to view this site.

Blog Archive

Results for the blog tag ie.

Bulletproof Handling for IE6

I’m going to be using this in all upcoming projects and you should too. It fixes every issue that IE6 has. It fixes the light blue PNG background issue, it fixes the box model, it fixes all the hover issues, it fixes all the JavaScript inconsistencies and probably even all the security holes.

1
2
3
<!--[if lte IE 6]>
<script>location.href='http://ie6countdown.com'</script>
<![endif]-->

Get Outside Inner HTML

Most web developers know about innerHTML. Some will say not to use it, because it is a Microsoft invention. I kind of agree; it is ugly and not very DOM, but it gets shit done on pretty much every browser out there. Which is more than I can say for some of the DOM functions I’ve attempted.

So based on it’s adoption across many browsers innerHTML has earned some street cred. There is also a property out there that is related to innerHTML. It is innerHTML’s retarded cousin. The outerHTML property has the handy ability to get all the innerHTML and the node that is containing it. In IE only. Hence, retarded cousin. I think it is a pretty useful thing, but other browsers don’t support it. I found this solution in a 4 post forum thread and I thought it was a worth a repost. This prototype extends HTMLElement adding custom functionality that works like outerHTML does across the other browsers out there.

1
2
3
4
5
6
7
8
9
10
11
12
13
HTMLElement.prototype.__defineGetter__("outerHTML", function() {
var span = document.createElement("span"); span.appendChild(this.cloneNode(true));
return span.innerHTML;
});
 
HTMLElement.prototype.__defineSetter__("outerHTML", function(html) {
var range = document.createRange();
this.innerHTML = html;
range.selectNodeContents(this);
var frag = range.extractContents();
this.parentNode.insertBefore(frag, this);
this.parentNode.removeChild(this);
});

Absolute Centered Box with CSS

Using tables is a thing of the past in Web 2.0, unless of course your making an actual table. It’s a faux-pa to use them for layout in this day and age. The 2.0 mantra is content separate from design, limited HTML markup and CSS handling display. Though sometimes CSS doesn’t always cut it and you end up doing something that isn’t very modern just to get the job done. One thing that I always revert back to tables is when I have to center something vertically and horizontally in the window.

I’ve looked all over the place trying to find something that was simple, worked for IE and could have a fixed size box. In my search I found this solution that uses display to render a div as a table or table cell. It’s pretty good, but it doesn’t work with a fixed box size. I tweaked a little bit and now it can work with a fixed box size. I added an extra div called box to center . The only problem that I see with it is that the doctype has to be set to HTML 4 Transitional. For most projects, I don’t imagine this is a deal breaker. I’ve posted a minimal example. The HTML page can be found here. This has been tested in IE 6, Safari 3, Chrome 1, and Firefox 3.