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

Blog Archive

Results for the blog category HTML.

Abramski Site Launched

As I write this post, I am uploading a mess of files that I’ve been working on for the past month or two that make up the first real Abramski site. I use the word real, because I don’t believe downloading a theme you like and calling it your own flies if you are any type of developer or designer. For years now, I’ve had a theme or two up here masquerading as my site while I wrote some blog posts and I’m somewhat embarrassed about it. I had no portfolio to speak of because I had no work that felt like my own that I really wanted to showcase. This site was always meant to be a priority but like many other designers and developers, I put off getting this site together for years. Read more …

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.