Comments on: Min-width and Max-width template http://friendlybit.com/css/min-width-and-max-width-template/ You have found Friendly Bit, a web development blog. I focus on client side technologies like CSS, HTML and Javascript. You find my articles below and categories to the right. Fri, 21 Nov 2008 19:50:16 +0000 http://wordpress.org/?v=2.7-beta3 hourly 1 By: Kravvitz http://friendlybit.com/css/min-width-and-max-width-template/comment-page-1/#comment-25891 Kravvitz Tue, 03 Jul 2007 21:45:52 +0000 http://friendlybit.com/css/min-width-and-max-width-template/#comment-25891 Setting a width triggers hasLayout, so using height:1% is unnecessary here. Setting a width triggers hasLayout, so using height:1% is unnecessary here.

]]> By: jonny_noog http://friendlybit.com/css/min-width-and-max-width-template/comment-page-1/#comment-25161 jonny_noog Mon, 11 Jun 2007 22:52:06 +0000 http://friendlybit.com/css/min-width-and-max-width-template/#comment-25161 Hi Emil, The problem I have found recently with quite a number of hand-held devices is that they are not picking up on hand-held stylesheets. Sadly it seems that many manufacturers are either unaware of this feature, or do not wish to implement it. :( Hi Emil,

The problem I have found recently with quite a number of hand-held devices is that they are not picking up on hand-held stylesheets. Sadly it seems that many manufacturers are either unaware of this feature, or do not wish to implement it. :(

]]> By: Jeena Paradies http://friendlybit.com/css/min-width-and-max-width-template/comment-page-1/#comment-25090 Jeena Paradies Sat, 09 Jun 2007 19:29:12 +0000 http://friendlybit.com/css/min-width-and-max-width-template/#comment-25090 Hej Emil, There is no document.documentElement.clientWidth in IE 5.x, but there is document.body.clientWidth. The problem: IE6 frezes with document.body.clientWidth in standard compilant mode. Sorry I was a little bit confused when I wrote ma last comment :-D Hej Emil,

There is no document.documentElement.clientWidth in IE 5.x, but there is document.body.clientWidth. The problem: IE6 frezes with document.body.clientWidth in standard compilant mode.

Sorry I was a little bit confused when I wrote ma last comment :-D

]]> By: Emil Stenström http://friendlybit.com/css/min-width-and-max-width-template/comment-page-1/#comment-25023 Emil Stenström Wed, 06 Jun 2007 18:51:47 +0000 http://friendlybit.com/css/min-width-and-max-width-template/#comment-25023 @Jeena: The code I posted works on IE6 in standards mode so I'm not sure how your code fixes anything? I always develop in standards mode, so I don't need fallback in quirks. Other than that your code does exactly the same as the one posted. @Jeena: The code I posted works on IE6 in standards mode so I’m not sure how your code fixes anything? I always develop in standards mode, so I don’t need fallback in quirks. Other than that your code does exactly the same as the one posted.

]]> By: Emil Stenström http://friendlybit.com/css/min-width-and-max-width-template/comment-page-1/#comment-25022 Emil Stenström Wed, 06 Jun 2007 18:47:24 +0000 http://friendlybit.com/css/min-width-and-max-width-template/#comment-25022 @Kevin Moore: My suggestion for that problem is to have a handheld CSS that changes the layout to something that works on mobile phones. @Kevin Moore: My suggestion for that problem is to have a handheld CSS that changes the layout to something that works on mobile phones.

]]> By: Jeena Paradies http://friendlybit.com/css/min-width-and-max-width-template/comment-page-1/#comment-25020 Jeena Paradies Wed, 06 Jun 2007 17:31:55 +0000 http://friendlybit.com/css/min-width-and-max-width-template/#comment-25020 Hi, There is a problem with IE 6 in standard compilant mode, it uses an other method to get the width than all other IEs. Therefore I developed this version: * html #foo { width: 995px; width: expression( (document.documentElement && document.documentElement.clientHeight) ? (document.documentElement.clientWidth > 1265 ) ? "1265px" : "auto") : (document.body.clientWidth > 1265 ) ? "1265px" : "auto") ); } Hi,

There is a problem with IE 6 in standard compilant mode, it uses an other method to get the width than all other IEs. Therefore I developed this version:

* html #foo {
width: 995px;
width: expression(
(document.documentElement && document.documentElement.clientHeight) ?
(document.documentElement.clientWidth > 1265 ) ? “1265px” : “auto”) :
(document.body.clientWidth > 1265 ) ? “1265px” : “auto”)
);
}

]]> By: Kevin Moore http://friendlybit.com/css/min-width-and-max-width-template/comment-page-1/#comment-25000 Kevin Moore Wed, 06 Jun 2007 04:02:28 +0000 http://friendlybit.com/css/min-width-and-max-width-template/#comment-25000 This is a very good suggestion, particularly on the max-width end. My only concern about min-width is that more people are browsing with their cell phones and other hand-held devices that have much smaller screens. Also, users tend to disable javascript to minimize downloading time. Setting a minimum width could create access problems for them. This is a very good suggestion, particularly on the max-width end. My only concern about min-width is that more people are browsing with their cell phones and other hand-held devices that have much smaller screens. Also, users tend to disable javascript to minimize downloading time. Setting a minimum width could create access problems for them.

]]> By: lewis http://friendlybit.com/css/min-width-and-max-width-template/comment-page-1/#comment-24826 lewis Thu, 31 May 2007 04:00:48 +0000 http://friendlybit.com/css/min-width-and-max-width-template/#comment-24826 having moved from a 19" to a 22" monitor in the past few weeks not only has it provoked a re-evaluation of how i view the web but i've developed a habit for browsing in vertically tiled windows (two pages/sites side by side). don't ask me why when you can use tabs, but nevertheless... this raises the question of designing (reverting for some who design at 1024x minimum) in 800x wrappers again. where once i would find an 800x width too small i now embrace it. regardless, it does re-emphasize the importance of liquid layouts. this issue is something i'm going to enjoy pondering at some point this summer. cheers for highlighting it emil. having moved from a 19″ to a 22″ monitor in the past few weeks not only has it provoked a re-evaluation of how i view the web but i’ve developed a habit for browsing in vertically tiled windows (two pages/sites side by side). don’t ask me why when you can use tabs, but nevertheless…

this raises the question of designing (reverting for some who design at 1024x minimum) in 800x wrappers again. where once i would find an 800x width too small i now embrace it.

regardless, it does re-emphasize the importance of liquid layouts. this issue is something i’m going to enjoy pondering at some point this summer.

cheers for highlighting it emil.

]]> By: Jens Wedin http://friendlybit.com/css/min-width-and-max-width-template/comment-page-1/#comment-24799 Jens Wedin Wed, 30 May 2007 07:21:38 +0000 http://friendlybit.com/css/min-width-and-max-width-template/#comment-24799 Thanks, shorter is better, right? Thanks, shorter is better, right?

]]> By: Emil Stenström http://friendlybit.com/css/min-width-and-max-width-template/comment-page-1/#comment-24763 Emil Stenström Tue, 29 May 2007 14:37:38 +0000 http://friendlybit.com/css/min-width-and-max-width-template/#comment-24763 @Jens: well, this one is shorter :) That one does a lot of other stuff that you don't really need. It enables support for max-height among others... @Jens: well, this one is shorter :) That one does a lot of other stuff that you don’t really need. It enables support for max-height among others…

]]> By: Jens Wedin http://friendlybit.com/css/min-width-and-max-width-template/comment-page-1/#comment-24756 Jens Wedin Tue, 29 May 2007 12:00:04 +0000 http://friendlybit.com/css/min-width-and-max-width-template/#comment-24756 What is the difference with this script and the one on: http://doxdesk.com/software/js/minmax.html What is the difference with this script and the one on:

http://doxdesk.com/software/js/minmax.html

]]> By: Emil Stenström http://friendlybit.com/css/min-width-and-max-width-template/comment-page-1/#comment-24745 Emil Stenström Tue, 29 May 2007 06:22:16 +0000 http://friendlybit.com/css/min-width-and-max-width-template/#comment-24745 @Matthijs: Another healthy fix, thanks! (I've never encountered the freeze but I trust you that it can happen in some instances). Added it to the template. @Matthijs: Another healthy fix, thanks! (I’ve never encountered the freeze but I trust you that it can happen in some instances). Added it to the template.

]]> By: Matthijs http://friendlybit.com/css/min-width-and-max-width-template/comment-page-1/#comment-24742 Matthijs Tue, 29 May 2007 05:30:52 +0000 http://friendlybit.com/css/min-width-and-max-width-template/#comment-24742 Emil, you might want to adjust the expression a bit to prevent a nasty bug in IE. It freezes up when resizing the window if you use the expression you described. See <a href="http://www.cameronmoll.com/archives/000892.html " rel="nofollow">this post</a> on Cameron's site. I encounterd this bug once and it's definitely a bad bug.. Keep up the good work. Emil, you might want to adjust the expression a bit to prevent a nasty bug in IE. It freezes up when resizing the window if you use the expression you described. See this post on Cameron’s site. I encounterd this bug once and it’s definitely a bad bug..
Keep up the good work.

]]> By: Emil Stenström http://friendlybit.com/css/min-width-and-max-width-template/comment-page-1/#comment-24731 Emil Stenström Mon, 28 May 2007 21:13:34 +0000 http://friendlybit.com/css/min-width-and-max-width-template/#comment-24731 @Martin: Great addition, added it to the sample. @Martin: Great addition, added it to the sample.

]]> By: Martin Jansson http://friendlybit.com/css/min-width-and-max-width-template/comment-page-1/#comment-24730 Martin Jansson Mon, 28 May 2007 21:03:20 +0000 http://friendlybit.com/css/min-width-and-max-width-template/#comment-24730 Nice template, it's tricky to get it right sometimes. May I suggest a fallback width for IE? Expressions are dependent on javascript to work, and if the user has scripting turned of, the width of the element will be 100% no matter what the width of the browser window is, which may cause very long lines. The fix is to have a width-declaration of, say, 960px for this example, before the width-declaration containing the expression. Nice template, it’s tricky to get it right sometimes.

May I suggest a fallback width for IE? Expressions are dependent on javascript to work, and if the user has scripting turned of, the width of the element will be 100% no matter what the width of the browser window is, which may cause very long lines.

The fix is to have a width-declaration of, say, 960px for this example, before the width-declaration containing the expression.

]]>