Skip to content

The following articles were found with tag design:

Functional minimum width in IE6

Fri Sep 28, 2007 at 06.46

I learned a new fun trick to play on Internet Explorer 6 with this design. There was not much information on it, so it might just be common knowledge amongst the more practiced designers out there, but to me it is new and interesting and I thought I would share it with you.

The situation arose with coding the blog. Since I want to be able to share images that may or may not be hosted on my site and I am against the idea of manually resizing (or downloading the image and resizing it dynamically) I wanted to use a CSS rule to scale images that would break outside of the container down to a size that would fit inside the container. This is farily easy to accomplish in FireFox with a min-width, but IE doesn't play so nice. The solution I found was to use an expression within the stylesheet to get the image's width and use it as the width for the style rule if it is less than the desired width or the desired width if it is greater.

The rule for use in FireFox would be

img.blog-image { min-width: 600px; }

and in the IE stylesheet the rule would be

img.blog-image { width: expression((this.width > 600) ? "600px" : this.width + "px"); }

Viola you have a functional (as of now) implementation of a minimum width in IE6.

The Archives

Search the Archives

Subscribe

RSS - All

Recently Popular Tags (past 2 weeks)

All-time Popular Tags

Random Tag Delivery