The Definitive FAQ on Screen Resolution

Your “fluid maximum width on images” tip sounds useful. I didn’t know about it - thanks!

Quite a few interesting facts and opinions in this article (I believe I can call it that). A job well done!

I’m one of those who switches between maximized and not, I usually unmaximize my browser when I across a fluid site like sitepoint here because the width of my screen is 1920px making it very wide and very hard to read long lines.

Nice one Simon.
I too haven’t tried the percentage width on an image - I’m going to test that later :slight_smile:


Doesn’t seem to work in IE6 >.<

Indeed it doesn’t. IE6 doesn’t support ‘max-width’.

It is possible to implement with expressions, but it only seems to work when the parent element has “layout”. The following expression will check if the parent element has layout, and, if so, set a maximum width to 100%. (Without the check all images whose parent doesn’t have layout will become 100% wide; with it they stay unaffected.)

img { max-width:100%; -width:expression(((w = typeof(w) == "undefined" ? new Array() : w)&&(w[this.src] = typeof(w[this.src]) == "undefined" ? this.clientWidth : w[this.src]))&&(this.parentNode.clientWidth <= w[this.src] && this.parentNode.currentStyle.hasLayout ? "100%" : "auto")); }

The “w” variable is so that it doesn’t forget the initial size. The [this.src] thing is so that it works for different images.

The dash in “-width” is a hack to target IE6 so that it doesn’t affect newer versions of IE that support ‘max-width’ natively.

You can’t have height="" attributes in the markup though.


It doesn’t seem to perform very well though; when applied here on SitePoint IE6 hangs. If you experience such problems you should probably make the selector more specific so that it only applies to the images you want to scale, and then it should work well.


Straight and to the point, and all explanations were in layman’s term…A great job, especially for someone like me who’s a total moron.

Interesting read, thanks for sharing. I suppose there’s a place for both liquid and fixed width if the information presented calls for it (like tabular info might look best fixed width).

On the contrary! Tabular info would probably benefit most from an elastic layout.

Hm, I probably would want to keep the tabular info presented in tact - so perhaps a bit of both to prevent info becoming incomprehensible when the webbrowser size is reduced beyond a certain limit. I’d hate to hunt info spread over too many lines.

That’s exactly why it should be elastic (em-based). :slight_smile:

With a fixed-width layout the table will reflow if you change the text size.
With a liquid layout the table will reflow if you change the window size.
With an elastic layout the table will not reflow. Everything stays where it is. The downside is that you may get a horizontal scroll bar if you enlarge the text size too much.

Oww my bad. I still had fluid in my head >.<

My train of thought also has been a bit influenced by the book I recently completed: designing without tables (just learning to break that habit) using CSS. There’s a chapter where they explain the use of a fixed-width layout in combination with tabular info (like event schedules etc).

However, when I read into the css samples now, I notice that they too include em-based parts into the design. So hence my slight confusion (and I should read better too).

I had a feeling that we were talking about the same thing, only using different words. I didn’t want to make any assumptions, though. :slight_smile:

yep…my stats show just a little under %7 still use 800x600…but prolly different with different targeted sites…

Very much stimulating and informatice Simon!!! Good job. Carry on!!!

Cheers!!!:eyebrow: :eyebrow:

Currently experiencing some screen size problems. This should definitely be of assistance. Good read. Nice job man.

Great thread Thanks

As a noob this is really helpful. It brings some sense to the madness i was doing before.

Great post! You have answered many many questions I have been wondering about. Genius!

Thanks for this great knowledge sharing with all of us.