Latest TweetsGreat post about the latest power grab: www.eff.org/deeplinks/2018/09/…
Perishable Press

Beware of Margins or Padding when Using the min-width Hack for IE

While we all watch as Internet Explorer 6 dies a slow, painful death, many unfortunate designers and developers continue to find themselves dealing with IE6’s lack of support for simple things like minimum and maximum widths. Fortunately, there are solutions to this problem, primarily in the form of CSS expressions such as this:

/* set the minimum width for IE 6 */
#target_element {
	width: expression((document.body.clientWidth < 335)? "333px" : "auto"); /* min-width for IE6 */
	min-width: 333px; /* min-width for all standards-compliant browsers */
	}

Although ugly, invalid, and resource-intensive, this technique works well at setting min-width properties for IE6. But beware! There is a catch. Chris Herdt recently wrote in with an important discovery:

…inclusion of any padding or margin on the element that has the fix applied will cause IE6 to crash…

After checking out Chris’ online demonstration of the behavior, I returned to the lab and began running a few tests. In addition to verifying and understanding Chris’ demonstration, I also wanted to know the following:

  • Does this issue affect older (pre-6) versions of Internet Explorer?
  • Is this issue seen in similar hacks such as max-width or max-height?
  • What are some workarounds?

First of all, this issue seems only confined to Internet Explorer version 6. Although I didn’t test on IE4 or IE3 (why bother?), IE5 did not crash when put to the test. So, for all practical purposes, IE6 seems to be the only browser affected by this issue.

As for related CSS expressions, such as max-width and max-height, the addition of margins and/or padding does not seem to have such an effect. Only when using the CSS min-width expression (i.e., hack) on IE6 will the addition of margins and/or padding crash the browser.

To explore a couple possible workarounds for this bug, let’s first review the mechanism by which the min-width expression operates. Here it is again (so you don’t have to scroll up):

/* set the minimum width for IE 6 */
#target_element {
	width: expression((document.body.clientWidth < 335)? "333px" : "auto"); /* min-width for IE6 */
	min-width: 333px; /* min-width for all standards-compliant browsers */
	}

The element for which we are applying the min-width property is typically a div. Here, we see that the ID of such an element is #target_element, surprisingly enough. So we have this division, and we want it to remain at least 332 pixels wide, regardless of how the browser is resized1. To accomplish this in Internet Explorer, we must use the JavaScript expression seen in the example; however, to accomplish the same thing in all modern browsers (e.g., Safari, Opera, Firefox, IE7, et al), we need only specify a value for the min-width property (i.e., the second declaration in our example). On a side note, this sort of browser-wrangling is exactly one of the reasons why people are so excited about the inevitable death of Internet Explorer 6.

So this is all fine and well and good, right? Well yes, it certainly works, but only until you try adding a bit of horizontal margin or padding to the target element, as seen in this example:

/* set the minimum width for IE 6 */
#target_element {
	width: expression((document.body.clientWidth < 335)? "333px" : "auto"); /* min-width for IE6 */
	min-width: 333px; /* min-width for all standards-compliant browsers */

	margin-right: 1px; /* say goodnight, IE6! */
	}

That little margin-right declaration will crash IE6 in a bad way. In fact, any of the following horizontally effective declarations will crash IE6, regardless of their values:

  • margin-right: 1px;
  • margin-left: 1px;
  • margin: 0 1px 0 1px;
  • padding-right: 1px;
  • padding-left: 1px;
  • padding: 0 1px 0 1px;

This brings us to an easy workaround for this issue: don’t add horizontal (left and/or right) padding or margins to the target element of a min-width expression. You can add all the vertical (top and/or bottom) padding and margins that you need, but stay away from teh horizontal stuff!

If you do need to apply space between the target element and its parent, consider using Chris’ workaround:

…I applied padding to the body instead of the content div and then just changed the expression to document.body.clientWidth – [padding values] < [desired minimum width +1].

Simply apply the padding (or margins) to the parent of the target element and subtract the difference from the CSS expression:

/* first apply the padding to the parent element */
#parent_element {
	padding-right: 33px;
	padding-left: 33px;
	/* sum equals 66px */
	}
/* then set the minimum width for IE6 accordingly */
#target_element {
	width: expression((document.body.clientWidth - 66 < 335)? "333px" : "auto"); /* min-width for IE6 */
	min-width: 333px; /* min-width for all standards-compliant browsers */
	}

Of course, there are probably other workarounds to consider as well. Perhaps there is a way to configure the layout that doesn’t even require the min-width property? I don’t know, but I do know one thing: if you are still required to design for Internet Explorer 6, you have my deepest sympathy.

Special thanks to Chris Herdt for discovering this issue and bringing it to my attention. With several articles now on the topic of using the CSS min-width expression, it is important to share any pertinent information that may affect its implementation. Hopefully, this article will prove helpful to those encountering issues with the technique.

Footnote

1 When using the min-width expression, always increase the value of your desired minimum width by (at least) 1 pixel. This is necessary to prevent Internet Explorer crashing, this time for a completely different reason. For more information, check out this comment.

Jeff Starr
About the Author Jeff Starr = Creative thinker. Passionate about free and open Web.
Archives
15 responses
  1. If you re-write the expression to take into account IE6’s box model then you can still use min-width s with IE6.

    I.e. using a javascript function:

    function IE6MinWidth( size, border, padding, margin )
    {
           if (document.documentElement.clientWidth > (size+border+padding+margin+1))
           {
                   return "auto";
           }
           else
           {
                  return size+"px";
           }
    }

    Then change your expression to something like:

    width: expression(IE6MinWidth(400,3,5,10));

    Example page up at http://webcoders.com.au/minWidth.html

  2. Simply forget about IE behaviour :)
    I’m joking, but I enjoy people seeing their browser crashing and saying: “this site has something wrong” or “this site has a bug”. :D

    By the way… hey Perishable, I’ve got problems sending posts with Firefox on this blog. I always have to use Opera or Internet Explorer (for my sadness) :D

  3. Jeff Starr

    @Joshua: Excellent! Thanks for sharing with us. Your method further distinguishes all of the parameters involved with setting the proper width of the target element (i.e., width, border, padding, margin, etc.) and presents them from an enhanced JavaScript function that looks like it may be included unobtrusively via external file. Meanwhile, you have vastly improved the appearance and semantical quality of the stylesheet, thereby keeping file content nice, clean and organized. The CSS is still not valid, but at least it looks better. Thanks again — well done!

  4. Jeff Starr

    @H5N1: Actually, you have the right idea.. as linked in the article, there is a rapidly growing movement to finally dump IE6 once and for all. I for one have embraced the idea, and no longer consider IE6 when designing/developing content. This article was posted for the sake of Chris (and other developers still required to work with IE6), who was sharp enough to discover the bug and thoughtful enough to share it with me. So I did my part and further transmitted the information to my readers, who will do with it as they please. Hopefully, it will help someone who is dealing with the issue.

    As for the non-Firefox posting, what’s up with that? I post all of my comments via Firefox, and am sure that many others do as well (given the fact that this is the first I am hearing of the issue). Is this the only site that gives you trouble on Firefox? Could it be some security extension that you have installed? I don’t know, just throwing stuff out there.. would definitely like to help resolve the issue.

  5. I get a FORBIDDEN error page if I submit a post via Firefox.
    I’ve got no security extensin, but now I’m actually behind a (fu**ing) ISA server :)

  6. Jeff Starr

    Could it be that the ISA server is sending blank-referer requests through Firefox? I currently have Apache configured to deny all no-referer requests for the comments.php file..

  7. I’m not the admin of ISA server.
    I’m in my customer’ office! :)
    I have no idea about what these buddies have done with their server :D

  8. Made the script simpler you can just call it like:

    widthg: expression(IE6MinWidth(this,500));

    And let it do the calculations for you. Makes writing the custom IE6 crap easier if you have to do it.

    http://webcoders.com.au/minWidth.html

  9. Jeff Starr

    Well keep an eye on it and let me know if you experience the issue anywhere else.. :)

  10. Christopher Ross October 11, 2008 @ 4:19 pm

    Dealing with margins/padding in IE is one of the banes of my existence. I get hired by government departments to make their Internet Explorer only websites compatible with FireFox … it’s painful. Thanks for a great article.

  11. Jeff Starr

    I feel your pain, brother! ;)

  12. If you use this: window.onload = checkAvailableWidth;window.onresize = checkAvailableWidth;function checkAvailableWidth(){var html = document.getElement("html");html.style.width = (document.body.clientWidth > 900)? "900px" : "auto";} then the problem should go away, along with having a much less resource-intensive way of solving IE6’s min and max problem. Javascript, of course.

[ Comments are closed for this post ]