Code: Select all
#outercontainer {
width: expression( document.body.clientWidth > 1024 ? "1024px" : "auto" );
}
#innercontainer {
width: expression( document.body.clientWidth < 770 ? "770px" : "auto" );
}Moderator: General Moderators
Code: Select all
#outercontainer {
width: expression( document.body.clientWidth > 1024 ? "1024px" : "auto" );
}
#innercontainer {
width: expression( document.body.clientWidth < 770 ? "770px" : "auto" );
}When I read that... Oh... My... God... I didn't know my eyes could roll that far back in my head...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%.
http://www.cameronmoll.com/archives/000892.htmlI’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).
Code: Select all
#container, #footer {
width: expression(document.body.clientWidth < 742? "740px" : document.body.clientWidth > 1202? "1200px" : "auto");
}
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 placeOren 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
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>Code: Select all
<!--[if IE]>
<link rel="stylesheet" href="styles/internet-explorer-sucks.css" type="text/css" media="screen">
<![endif]-->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
}
}
}