Javascript expression in CSS with IE6

I'm having a problem with IE 6. I know, everyone must be completely shocked.

My page is here: www pool-zone com.

If you view the page in IE 6 at 1024 x 768 or larger, then change your window size until the width reaches is minimum width and then maximize the window again, the header and footer disappear. I know it has something to do with the following code:

<!--[if IE 6]>
   <style type="text/css" media="screen">
   /*this style is to fix the rounded corners in IE6.  The broweser was not properly displaying the style.*/
      #centerarea { margin: 0px 217px; }
   /*This style is to fix a minimum width problem for IE6.*/
      #bodycontainer { 
          width: expression((documentElement.clientWidth < 1000) ? "1000px" : "auto" );
          height:1%;
          }
   </style>
<![endif]-->

Code (markup):

I put this code in place to give IE 6 a minimum width.

Does anyone have a better work around to give IE 6 a minimum width? Or does anyone have any suggestions as to how to make this one work?

 

I haven't used it before, but I think if I read somewhere if you put:

The first is for the other browsers, and the last is for IE6

As I said, never used it before, but hey its worth a shot

 

You have two options if you want to get min-width to work in Internet Explorer 6.

http://friendlybit.com/css/min-width-and-max-width-template/ (uses an expression)
http://www.pmob.co.uk/temp/min-width-ie.htm (uses extra HTML and CSS)

 

Thanks for the advice.

I already have the min-width working for IE 6. However, my header and footer disappear in IE 6 after I resize my browser. If I shrink my browser window so that the min-width JavaScript kicks in, and then maximize the window again, the header and footer disappear. This is the problem that I am trying to solve. Any ideas?

I kind of fixed the problem for now, but the problem still exists for many wide screen browsers.

 

There are a few things to keep in mind on using expression for min-width and max-width.

First, IE will often lock up solid if you resize using a less than and greater than compare at the same time. In general there's something 'wrong' with how less than is implemented... as such I only use greater than compares.

Second, I suggest allocating 32px PLUS any borders and padding between your compare and the actual container value just to be sure you get clear of the margin... you should also subtract any padding on the body or desired side margins.

Third, always include a fallback value to treat as width if javascript is off.

Finally, if you don't trip 'haslayout' on your expression container, elements inside the container will tend to miscalculate their widths or have other wierd layout issues.

So, my approach to the problem is thus: (ripped straight from my baseline semi-fluid template, heavy commenting added)

* {
	margin:0;
	padding:0;
}

body {
	text-align:center; // center in IE 5.x
	padding:8px;
}

#container {
	min-width:752px; // 800 - 32 scrollbar - 16 padding 
	max-width:976px // 1024 - 32 scrollbar - 16 padding
	text-align:left; // return to normal after IE 5.x centering
	margin:0 auto; // center in RoW
	overflow:hidden; // automatically wrap floats
}

* html #container { // lte IE6 only 
	// if .js is off, set fixed width 
	width:752px; 
	// otherwise use expression for min-width
	width:expression(
		(document.body.clientWidth>1024) ? "976px" 
			: ((document.body.clientWidth>800) ? "auto" : "752px")
	);
	height:1%; // haslayout 
	/*
		Tripping haslayout means IE will always recacluate 
		everything inside our container on resize - but the
		height:1% is incompatable with the overflow:hidden
		we use to make RoW wrap floats - but haslayout ALSO
		tells IE to wrap floats, so we just switch overflow
		back to visible.
	*/
	overflow:visible;
}

Code (markup):

Which works in every browser perfectly... and means you don't need to *** around with that clearfix nonsense in dealing with your floats either.

 

Seems like that CSS expression would only get evaluated when the page is rendered the first time, have you tried attaching an onResize listener to the window that re-evaluates that expression for the element it applies to ?

 

Instead of using javascript, I would use PHP as your stylesheet. You can change the header with PHP so the file is delivered with a .css extension based on the browser. Users can't turn off PHP because it is server side. I just started doing this because of IE6. It has made my life much easier. I am still testing it, but it seems to work great. I was worried about caching, but it hasn't been a problem thus far. If you want my script, I will be happy to post it. Of course you do have to have a linux server, I haven't written an ASP version yet.

 

Thanks for the clarification DeathShadow. I'll definitely try your code. Thanks for posting it.

I haven't considered using an onResize trigger, Joebert, I'll give that a shot.

Atticus1, I would certainly like to look at your code. I do have a Linux server, and I can see many different uses for a script like this.

Thanks for all your help.

 

Because it's an expression it SHOULD run on resize without the listener - BUT, elements inside it may not. Adding haslayout as I did in my example makes it resize the container AND it's childer.