Internet Explorer 6 and min-width's [#152364]

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.

Comments

Comment #1

tema commented 18 July 2007 at 20:38

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 print $styles;


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!

Comment #2

mbuhmann commented 12 August 2007 at 19:31

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.