Internet Explorer 6 and min-width's
MrGood - June 16, 2007 - 16:30
| Project: | Zen |
| Version: | 5.x-1.x-dev |
| Component: | IE Problems |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | won't fix |
Jump to:
Description
Hi, im using the Zen theme with min and max widths. Only problem is, with IE6 my rightbar and sometimes content moves down when it gets squashed on lower resolutions. I've looked all over the site and tried several things. Is it possible to write a min-max width ie6 hack in the css?
Any help greatly appreciated.
#1
I belive You should try to UTFG before asking.
Here's a long-aged recipe. I modified it to use 'min-width' in pixels (it derives from header's images as usual) and 'max-width' in ems, so Your page width is ready for changing browser's font-size.
Place in page.tpl.php after
<?phpprint $styles;
?>
<!--[if IE]><link rel="stylesheet" type="text/css" href="/[path.to.your.theme]/ie.css" /><![endif]-->and before closing body tag:
<div id="em" class="clear-block" />This block is used to get current size of 1em in pixels.
In ie.css:
body {text-align: center;}#em {width: 1em; height: 0; overflow: hidden;}
#page {
text-align: left; margin: 0pt auto;
width: expression((d=document)&&(fs = d.getElementById('em').offsetWidth)&&(po=2*fs)&&(bo=3)&&(min=865)&&(max=85*fs)&&(cw=d.body.clientWidth)&&(px='px')&&(cw-po>=max+bo?max+px:cw-po<=min+bo?min+px:'auto'));
}
Last ugly line is too long to explain it here. Just change 'min=865' (px) and 'max=85*fs' (em) to your 'min-width' and 'max-width' values and enjoy!
#2
I had a similar problem with IE6 and I tried various tactics but ended with the following simple solution which worked well enough. Take a look here: CSS Header Question and IE6 Min Width
In layout.css I modified the body.both-sidebars tag (since I have a 3 column site)to look like
body.both-sidebars {
min-width:900px;
width: auto !important;
width:900px;
/*min-width: 980px;*/
}
This works well for my purposes.
#3
Artem’s solution look like the only solution to IE6 not supporting min-widths. Unfortunately, the
expression()syntax is just embedded javascript.I don’t want to implement a javascript fix for a CSS design issue.