min and max width centered layout that works for ie

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

I tried using just expressions to emulate min-width and max-width and they cause ie to become unstable and freeze my computer. these are what I used:

Code: Select all

#outercontainer {

	width: expression( document.body.clientWidth > 1024 ? "1024px" : "auto" );

}

#innercontainer {

	width: expression( document.body.clientWidth < 770 ? "770px" : "auto" );

}
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

The first two problems are easily solved; the third is the more frustrating and confusing. But it seems that IE will not properly set the width of #expander to 700 pixels more than #bodydiv unless there's an in-between element with an explicit full width of 100%.
When I read that... Oh... My... God... I didn't know my eyes could roll that far back in my head...

I can only wish I could get my hands on the stuff the dev team was smoking when they wrote the CSS interpreter for IE...
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Ok, it's obvious we are all a bit frustrated. Me too. But, at some point you have to be pragmatic and realistic. What is possible? And what "hack" allows us to approach the ideal design in IE?

The expressions do work. The freezing of IE has to do with a certain "race" condition being triggered when you resize the window and some width is reached. I remember having that problem. Solution is changing the measures a bit.
I’ve been able to avoid the IE-freeze issue in the past by NOT specifying identical widths in the expression; so instead of saying “if the width is less than 740px, set it to 740px”, change it to “if the width is less than 745px, set it to 740px”.

In short, specifying the “less than” width to be the same as the hacked min-width caused “a racing condition in IE at the moment when the size of the window hits the target width” (thanks, Dimitri).
http://www.cameronmoll.com/archives/000892.html

Code: Select all

#container, #footer {
	width: expression(document.body.clientWidth < 742? "740px" : document.body.clientWidth > 1202? "1200px" : "auto");
	}
Personally I like this solution the best. I haven't used the Jello layout, because I don't like to hack my normal CSS into some weird and complicated mess, just because IE doesn't understand min/max width. I'll just feed IE it's own expression hack with conditional comments. Works fine and keeps my normal CSS clean. For that small percentage of people using IE without support for the expression, the site is still accessible and usable. Either fluid or fixed, depending on how you set it up. I can live with that. If you are working with min- and max width, your layout is already flexible/fluid. So if IE users miss the max-width they just get a fully fluid layout. Nothing wrong with that.

At this point I see it like this: IE users choose to not switch to a better browser. Well, then they won't get the better experience. Sorry. If it's their boss who decided the company only is allowed to use IE? Well, go complain to your boss or go on strike!

The time that a browser like Firefox is the obscure, unknown browser which only some uber geeks down in their cellars use has passed. In most countries FF use is like 10-25%. Everybody knows it's there. More and more companies and governments switch or even make it he default browser in their apartments. It's free. So if you decide to stick with the old software setup, that's your problem.

So, to get back on topic before I'm banned for going too off-topic: try the better expressions, you can't go wrong with that.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

Oh that's cool... I tried this expression thing before but I gave up since it caused IE to freeze. Now I can use it - thanks man 8)

Edit: The only problem is that now the CSS doesn't validate :(
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Oren wrote:Oh that's cool... I tried this expression thing before but I gave up since it caused IE to freeze. Now I can use it - thanks man 8)

Edit: The only problem is that now the CSS doesn't validate :(
That's not a problem. If you feed IE it's own garbage stylesheet why would you worry about it not validating. IE is not valid in the first place ;)
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

Yeah but I'm a pedant and I like my XHTML and CSS to validate :P
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

See it like this: your (X)HTML and CSS validates. It's IE's CSS which isn't validating. Who cares?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Code: Select all

<style type="text/css">
#container {
  /* for IE - compliant anyway */
  width: 100%;
  text-align: center;
}

#centered {
  text-align: left;
  width: 600px;
  margin: auto;
}
</style>

<div id="container">
  <div id="centered">This is centered</div>
</div>
EDIT | I'm an idiot. Never mind :oops:
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

I have a solution for min-width. That's right, min-width IS possible in IE. Max-width... Umm..... You're on your own.

You can force a min-width by propping your element's open to be at least a certain width. This can be done with divs and such in FF, but not IE. The secret is text.

Really. It's an ugly solution, and I'd NEVER, EVER do it, but I'm pretty sure it works. Just... chose a mono-spaced font, give it a defined letter spacing, hide it somehow, and prop that sucker open. IE doesn't like for things to overflow unless you say so. (I think. If I'm wrong, then tell it not to overflow :-p)
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

I have no issue with setting up a min-width in ie. I have no problem setting up a max-width in ie. I have a problem setting up a min-width and max-width at the same time.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

And as for all of this expression business, it's just JavaScript. If you want your CSS to validate, then just do it in JavaScript. (Unless the expressions work on browsers that disable JavaScript. If not, then screw it!)
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

i know it's just javascript. and my css still validates because I put in the IE conditional

Code: Select all

    <!--[if IE]>

      <link rel="stylesheet" href="styles/internet-explorer-sucks.css" type="text/css" media="screen">

    <![endif]-->
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Cool naming :)
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

lol yea I take a shot at IE every chance I get...

Code: Select all

#container {

   width: 800px;

}

/* serve this to browsers that don't suck */
html > body #container {

    min-width: 800px;

    width: auto;

}

Code: Select all

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

// PNG fix for Internet Exploder

if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}
Post Reply