December 24, 2006

Notes on getting PNG transparency in IE6 with pure CSS

Recently, I started building a site with a lot of transparent image elements. The trouble was the the client required support for IE6 as well as IE7. Now, IE 6 and lower do not support transparent PNGs out of the box, but I knew that there were workarounds for that.

The question was, which workaround to use? One method I saw involved using an Explorer "behavior." Unfortunately, this solution required loading and HTC file, which is an ActiveX control. ActiveX controls aren't loaded in IE6 with default security settings. Maybe there is a workaround for that, but I couldn't find it in a timely fashion. Besides, the HTC solution requires an HTC file and a special GIF file be stored on the server. Adding mysterious stuff to the client's file tree is something I really like to avoid.

Then I ran across a brand new article (based upon a much older article) at A List Apart: Super-Easy Blendy Backgrounds. This article describes a pure CSS technique of getting image transparency to work in IE 6.

Continue reading "Notes on getting PNG transparency in IE6 with pure CSS" »

August 31, 2006

Why do HTML elements have different widths in MSIE than they do in Firefox?

Why do HTML elements have different widths in MSIE than they do in Firefox? The answer is that IE uses a different box model than Firefox. What is the box model?

I looked in Wikipedia for the answer, and this is what I learned:

The box model allows block-level elements - such as paragraphs and block-quotations - to be drawn with padding, borders, and margins.

As defined by those CSS specifications, when a width is explicitly specified for any block-level element it should determine only the width of the content within the box, then the padding, borders and margins added afterwards. Internet Explorer (prior to version 6) instead includes the padding and borders within the specified width, resulting in a narrower box when displayed.

[PPK favors the IE box model, and says,] "Web designers who create boxes for holding content care about the *visible* width of the box, about the distance from border to border. The borders, and not the content, are the visual cues for the user of the site. Nobody is interested in the width of the content."

[Use of the ie box model] can make division of interior space (as one might do for colums in a layout) more difficult using the IE box model.

...if there are two boxes, one inside the other, and the inner box describes its width as 50%, it will be calculated based on the width of the outer box that is reported by the current box model. Since the inner box must exist within the border and padding of the outer box, using the IE box model, the inner box's 50% width will take up more than 50% of the content space available to it.

Internet Explorer box model bug - Wikipedia, the free encyclopedia

May 13, 2006

Reading Quirksmode on assuring JavaScript compatibility across browsers

Today I made some notes about Quirksmode's page on cross-browser compatibility via Object detection.

Initially he says that it's better to not rely on JS that detects a particular browser. He recommends against branching code based on detecting the browser type or version; and rather testing for the functionality that is necessary to run the script. In practice, this means testing for objects.

Scroll to the bottom of the page for a discussion of which objects for which it has historically been most important to test.

Continue reading "Reading Quirksmode on assuring JavaScript compatibility across browsers" »