Focus 44 Blog

To 'hasLayout' or not to 'hasLayout.' That is the question...

2009-04-07T04:00:00+00:00

Like my last post, "Enabling :hover Pseudo Class in IE6," this blog entry deals with the fantastic world of Internet Explorer 6. Anyone who has done any amount of design and bothered to check the results in IE6 has most likely run into the infamous and frustrating "Peek-a-boo" bug.

Though this problem does at times affect IE7, it is a virtually unavoidable "feature" of IE6 for new designers. I say new designers because it does not take many infected design attempts before we inevitably scour the internet for a solution. I know I did. The numerous discussions about Internet Explorer's "hasLayout" property can leave the un-initiated feeling dizzy and disoriented.

The "hasLayout" property is a mystical and magical phenomenon that is extremely difficult to predict or trouble shoot. It is an element built into Internet Explorer that helps decide how elements are rendered and relate. I am including a few links for the students among us who wish to study the matter more fully. For the rest of you, fee free to skip to the solution.

» Ingo Chao's detailed explanation "On Having Layout"
» MSDN's "HasLayout Overview"

Our Solution

Part 1: IE6-Specific Style Sheet or CSS

The first step is creating an IE6-specific style sheet and linking it to our site (the code below actually applies to every version of IE, 6 and below). This solution will not validate with a css validator so we want to affect as few browsers as possible. We are going to create an "if" statement in the <head> of each page we want to link this fix to. We create our sites using an ASP.Net Master Page, allowing us to link the fix to each page of our site in one place.


<!--[if lte IE 6] >
    <link href="./themes/IE6_Styles.css" type="text/css" rel="stylesheet" media="all"/>
<![endif]-->

This style sheet is where you will put all of your styles that will affect your site when viewed in IE6 or older. Make sure that you link any other style sheets above this "if" statement. That way the IE6 style will override your normal style sheet(s) for duplicate classes.

Part 2: A Little Magic of Our Own

I used to try to correct every issue on an individual basis using a combination of "position:relative" and "zoom:1" tags. Unfortunately, that takes a ton of time and energy. One could go crazy...

While trying my best to explain the bug to my business partner one day, he asked, "why not just fix every element on the page at once." Indeed, why not? My brain thought best practices, standards, accessibility... Then I thought, retire your browser people! One of us is getting too old for this, and my IRA says it is not me just yet...

So I gave in and put the following in my IE6-specific style sheet:


body *     { zoom:1; }

Amazingly, applying a zoom:1 to every element in the body tag eliminated my peek-a-boo troubles in IE6. However, it also screwed up all of the <ol>'s and <ul>'s royally. I lost my list bullets, the margins and padding were off, and every item in my <ol>'s thought it was "1."

That is when I went really crazy and changed my fix to this:


body *     { zoom:1; }
ul, ol, li { zoom:0; }

Viola! I out-grew peek-a-boo and retained my list functionality. I have not spent more than an hour trying to decide whether something hasLayout or not since...

I doubt that w3 would endorse this solution. You may want to do your own studying before adopting any hacks or tricks into your design work flow.

Enabling :hover Pseudo Class in IE6

2009-03-27T21:26:00+00:00

Let's be honest... IE6 is nobody's favorite browser, least of all a web designer. Most of us have learned to live with it, however, as it still taints a large section of the browsing community.

The issues are numerous. The peek-a-boo bug and poor CSS 2.0 support being at the forefront. With the help of my business partner, we have stumbled across a solution to one of the most frustrating IE6 features (or lask there of): the lack of :hover pseudo class support. The :hover class is an extremely useful gem in any web designer's treasure chest, allowing them to communicate with the user as they mouse around. Now we can extend that conversation to include the viewers using the seemingly immortal Internet Explorer 6.

The solution:

We must start with Peter Nederlof's Whatever:hover. It is a patch for IE6 written in a text file called an .htc file (HTML Component). Simply save the file in your site. I prefer to keep it in a themes folder with my style sheet(s). You link the file in your CSS on the body element using the behavior tag:


body { behavior: url("./Themes/csshover3.htc"); }

Simple enough, right?

For most static designs, this works just fine. However, due to the relative nature of the link, any sites using URL re-writing of any kind, MVC for example, will find that it is very difficult to make sure all of your pages can locate the file.

We primarily create sites in .NET/C# and use a ASP.Net Master Page. We link the .htc file in the <head> tag of the Master Page like this:


<!--[if lte IE 6] >

  <style>

    body { behavior:url('<%=ResolveUrl("~/themes/csshover.htc") %>'); }

  </style>

<![endif]-->

Notice that we are only linking the .htc file for IE6 or less, as it is not needed for other browsers. This is a great place to link IE6-specific style sheets to take care of any other design nuisances as well.

The ResolveUrl in the url will tell the server to start it's search in the root directory of the site and follow the path from there. That way it doesn't matter where the page thinks it is, it will always be able to locate the .htc file.

A special thank you to Peter Nederlof for this great solution to a very frustrating bug!

CSS intellisense with Visual Studio 2008 using virtual links.

2009-03-27T19:33:00+00:00

We all love intellisense. Visual Studio is great. With the 2008 release it allows us to have javascript and css intellisense. CSS Intellisense will work if you provide an aboslute link or a relative link.

With our design style over here it seams more often then not that we use the same Masterpage within different levels of folders. Relative links were never an option... Absolute links might bite you in the butt later. We almost always require virtual paths for files.

The idea is pretty simple.

There you have it folks! Thats all for now.