IE7 was supposed to have supported min-width in CSS. It doesn’t work right. Their spec says it applies to “floating block-level elements”, but they don’t mention that it also requires an explicit width — “auto” won’t work. While that’s fine for “stretchy” layouts, it’s useless for what I want: a flexible, tableless form layout (with elements which can expand to their contents’ sizes). In fact, my previous IE6 hacks to force it with CSS expressions now don’t work, because while the min-width attribute is valid in IE7, the feature is not actually implemented. SO, while I previously could pick it up in IE6 with something like this:
SELECT {
min-width:11em;
_width:expression(this.currentStyle.getAttribute(‘min-width’));
}
IE7 now requires the same trick to be like so:
SELECT {
min-width:11em;
_width:expression(this.currentStyle.getAttribute(‘minWidth’));
}
Unfortunately, forking logic inside CSS expressions is a bit of a pain. That, combined with the limitations of this technique (IE6 treats width as min-width only when the contained elements can’t be wrapped), prompted me to write a solution script. Here it is:
/*
author: Rob Eberhardt
desc: fix MinWidth for IE6 & IE7
params: none
returns: nothing
notes: cannot yet fix childless elements like INPUT or SELECT
history:
2006-11-20 revised for standards-mode compatibility
2006-11-17 first version
*/
try{
if(!document.body.currentStyle){return} //IE only
}catch(e){return}
var elems=document.getElementsByTagName(“*”);
for(e=0; e<elems.length; e++){
var eCurStyle = elems[e].currentStyle;
var l_minWidth = (eCurStyle.minWidth) ? eCurStyle.minWidth : eCurStyle.getAttribute(“min-width”); //IE7 : IE6
if(l_minWidth && l_minWidth != ‘auto’){
var shim = document.createElement(“DIV”);
shim.style.cssText = ‘margin:0 !important; padding:0 !important; border:0 !important; line-height:0 !important; height:0 !important; BACKGROUND:RED;’;
shim.style.width = l_minWidth;
shim.appendChild(document.createElement(“ ”));
if(elems[e].canHaveChildren){
elems[e].appendChild(shim);
}else{
//??
}
}
}
}
It uses a shim technique to fix it only for IE (other browsers don’t support currentStyle). The remaining limitation here is that it only works on elements which canHaveChildren, so it does not work on childless elements, like form INPUTs or SELECTs. Any suggestions for this case are welcome!
To use it, just call fixMinWidthForIE() in the window.onload, or better yet when the DOM has loaded, and you’re set.
2006-11-20: I updated the script for better standards-mode compatibility (it was causing extra blank lines). I had missed the doctype switch in my current project. The good news is that IE7 in standards mode does do min-width. (I wish I’d noticed that sooner!) However, I still have a lot of IE6 miles to go before I can put it to sleep…
3 Responses to IE7 and minWidth