Got Layout?

Jeremy Anderson — Mon, 26 Nov 2007 12:00:16 +0000

* html body {display: none;} … I haven’t figured out why some think this hack is discriminatingGeorg

position: relativity

Ever wonder why applying a position: relative to an element in Internet Explorer can fix bizarre rendering problems? The standing theory, which is also a highly technical one, is that sometimes you just need to remind IE that things need to flow in their natural order. As logical as that may sound, the problem really has to do with a little thing called hasLayout.

display: none inline-block

This is not a new cat, nor a new bag, for that matter. Web designers have long been plagued with the rendering inconsistencies offered up by Internet Explorer, such as the peek-a-boo bug. Each of us, individually and as a community, have mapped these inconsistencies out and made record of them in our own bag of CSS tricks. None-the-less, IE still proves to be the most loathsome part of the job for many.

Though IE7 has made some pleasing improvements over it’s predecessors, it’s still a pitch or seven away from being adequate. So, I was very excited when I found On Having Layout, an on going project focussed on understanding IE’s proprietary “Layout” property and how it is messing up our world.

hasLayout = true

Ingo Chao, one of the editors on this project has a background as a clinical physician as well as an editor. The clinical side definitely comes out in this article. It’s a comprehensive, well articulated study into “what the hell is going on with IE”. If you know what CSS is, you should read On Having Layout.

hasLayout = false

The concept of “Layout” as a property, is something only to be expected from Microsoft. And, as you see by following the link, if you are using Firefox at least, the Microsoft Development Center official resources for this strange little property are anything but laid out well.

Controlling Presentation with Measurement and Location Properties in Quirks Mode . . . umm?

A Definition of hasLayout

Just as some people have character and others, not so much, according to Internet Explorer, so too do some elements in html have Layout and others, not so much. Because IE applies a seemingly arbitrary discrimination over it’s elements, we are tasked with stamping out a multitude of rendering bugs, when we write code.

So what is Layout and how can I get me some?

“Layout” is an IE/Win proprietary concept that determines how elements draw and bound their content, interact with and relate to other elements, and react on and transmit application/user events.www.satzansatz.de

Layout is irreversibly triggered by CSS. hasLayout for elements can either be set to true or false. Some elements, such as , ,

and appear to have Layout by default. While others can be given Layout by applying select CSS properties, such as position: absolute, float: left|right and display: inline-block.

Unlike other proprietary CSS for browsers, there is no layout property to declare and we are forced to interact with it in this very indirect way.

Spilled Milk

The hasLayout stumbling block has affected all designers and coders in their attempts to cross-broswer their work, and will continue to do so, to be sure. Its’ unusual nature can upset the rendering of boxes, as well as their children. As indicated in On Having Layout, consequences of an element having, or not having layout can include:

Many common IE float bugs.
Boxes themselves treating basic properties differently.
Margin collapsing between a container and its
descendants.
Various problems with the construction of lists.
Differences in the positioning of background images.
Differences between browsers when using scripting.

These Bugs We Know

Anyone who has laid code for the web is well aware of IE rendering bugs. The work Holly Bergevin, Ingo Chao, Bruno Fassino, John Gallant, Georg SÃ¸rtun and Philippe Wittenbergh have put into creating this reference text is something every developer can benefit from and it could end up saving you considerable, hair-pulling time.

friends of PNG

Jeremy Anderson — Sat, 14 Apr 2007 17:57:18 +0000

Alpha PNG Backgrounds in IE

In the process of redesigning a site for a client, I stumbled into my long lost, woeful friend PNG. Actually, I shouldn’t be so hard on PNG. We all know who’s fault it really is. There are a ton of sources out there, offering solutions for the IE bug, but I needed something a little more comprehensive and involved a little less leg work.

My research led me to numerous sites, offering solutions to my PNG woes. Most of which either built upon or reiterated the techniques Michael Lovitt discussed in this article, way back in the day.

For all the of the progress we’ve seen with IE7 (which DOES support transparent PNGs), we’re still left with the fact that it’s just a carrot dangling on a stick for a while more. We still have to deal with its predecessor and thus, I needed a clean solution that would do the leg work for me.

Ping back PNG forward

To start with, there is a very simple solution to get IE6 to properly render transparent PNGs, using the Microsoft AlphaImageLoader. For simple tasks, I prefer to do this strictly using CSS and an IE6 conditional statement.

/* IE6 PNG transparency FIX {--MEH!--} ----*/
* html #nav ul li {background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader »
(src="http://www.domain.com/img/myPNG.png", »
sizingMethod="scale");}

(Line wraps are marked » -Ed)

This method of handling PNGs usually does the trick, for simple application. It’s concise and easy to implement. On an individual basis, it’s perfect. I should mention, there are two ways you can define your sizingMethod. The first, “scale” (shown above), is perfect for some repeating background images. There is a drawback. It works great for 1px by 1px images and 1px images for x or y repeats, but for tiling images you get some unappealing distortion happening. The other value for sizingMethod is “crop”. This is for non-repeating background images.

the All-Around PNG

This time, however, I needed something that would do a little more of the leg work for me. I needed something that would handle all of my PNGs at once. I stumbled across this article by John Labriola, which proved to be the best solution for my needs. He worked off of a solution Drew, of All in the Head and came up with a stream lined approach, using minimal JavaScript. Check it out.

Based on sleight he uses a simple function that loops through document.all to find all of your background PNGs and fix them. You can download his updated version of bgsleight.js here.

Better dropdowns and hidden divs, using transparent PNGs

Now you’ve got all you need to make sexy dropdowns, hidden divs, icons and whatever else you come up with.

Repeat Penguin » html