Page 2 of 2
Posted: Wed Apr 25, 2007 6:41 pm
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" );
}
Posted: Wed Apr 25, 2007 11:53 pm
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...
Posted: Thu Apr 26, 2007 1:34 am
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.
Posted: Thu Apr 26, 2007 5:06 am
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
Edit: The only problem is that now the CSS doesn't validate

Posted: Thu Apr 26, 2007 6:54 am
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
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

Posted: Thu Apr 26, 2007 7:30 am
by Oren
Yeah but I'm a pedant and I like my XHTML and CSS to validate

Posted: Thu Apr 26, 2007 7:51 am
by matthijs
See it like this: your (X)HTML and CSS validates. It's IE's CSS which isn't validating. Who cares?
Posted: Thu Apr 26, 2007 9:13 am
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

Posted: Tue May 01, 2007 6:05 pm
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)
Posted: Tue May 01, 2007 6:07 pm
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.
Posted: Tue May 01, 2007 6:08 pm
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!)
Posted: Tue May 01, 2007 6:15 pm
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]-->
Posted: Tue May 01, 2007 10:40 pm
by matthijs
Cool naming

Posted: Tue May 01, 2007 11:43 pm
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
}
}
}