Comments on: ‘DOM-foolery’ with Images

By: Joshua Paine

Joshua Paine — Wed, 14 Dec 2005 23:17:09 +0000

Chris, do you still see the problems with IE5 if you apply my two fixes posted above?

By: chris

chris — Wed, 14 Dec 2005 15:54:13 +0000

It doesn’t work on Safari 1.0.0 or 1.0.3 using OS X 10.2. I was thinking about using this on my site, but I’m not sure if it won’t work for some users. On IE5, it just shows the normal photo (which is good), but on Safari 1.0 it actually shows the corners in different places on the page (which is bad).

By: Joshua Paine

Joshua Paine — Wed, 14 Dec 2005 15:10:41 +0000

Looks fine in Safari 2.0.1 to me, but no it’s never going to work in IE5 Mac.

By: chris

chris — Wed, 14 Dec 2005 15:02:01 +0000

This doesn’t quite work on the mac (OS X) using either Safari or IE5.

By: Hannes

Hannes — Mon, 03 Oct 2005 05:59:58 +0000

Works perfectly, thank you very much!

By: Joshua Paine

Joshua Paine — Fri, 30 Sep 2005 13:16:27 +0000

Is there anything you could make the IE not to crash?

Immediately before the line original.parentNode.replaceChild(wrapper, original); add if(original.parentNode.tagName.toUpperCase()=='A') original = original.parentNode; I haven't tested that, but it should work and should be compatible with my IE rounding bug fix above.

By: Hannes

Hannes — Fri, 30 Sep 2005 09:52:51 +0000

I'm really impressed from this nice Function though I've noticed some serious problems with - guess who - IE. If you try to link an Image e.g. the IE would unfortunately crash. Is there anything you could make the IE not to crash? :-)

By: OliverBrown.me.uk

OliverBrown.me.uk — Fri, 26 Aug 2005 16:24:42 +0000

DOM foolery

Since I’ve been making random DOM and JavaScript posts recently I thought I’d share a clever bog post I found cleverly called DOM-foolery. It describes a relatively simple way to make images in web pages have curved corners.

DOM, ECMAScript, Javsc…

By: AlexW

AlexW — Sun, 21 Aug 2005 01:31:08 +0000

Haven’t tested that out yet, but it sounds like a perfect solution, Joshua. Nice work.

By: Joshua Paine

Joshua Paine — Sat, 20 Aug 2005 15:56:42 +0000

You can fix the IE rounding bug thusly:

Instead of making tr and br positioned with right:0; and width:7px;, position them with left:0; and width:100%;. You can actually do this to all four corners to shrink the CSS with no ill effects.

For this to work, though, you need to add one line to the javascript:

wrapper.style.width = imgs[i].width+'px';

You can put this anywhere inside the for loop once wrapper is defined.