By Jay Daverth@drupal.org on

Using 5.1 with the foundation theme and panels module, for some reason the min-width is not being respected by IE6 (works fine in IE7 and FF) which on small-res screens can shrink/break the layout. I have tried enforcing a mid-width on both foundation's style.css as well as the panel css (two-block-stacked) as well as trying to use IE6 tags to "trick" it, but to no avail. Any help would be greatly appreciated and accompanied by mutually enthusiastic dreams of an MS-free world! Here is the relevant code:

two-column-stack.css:

/* $Id: twocol_stacked.css,v 1.4.4.1 2007/03/15 20:16:53 merlinofchaos Exp $ */

body {
  width: 60%;
  min-width: 1000px;
}

.panel-2col-stacked { 
  /* border: 5px solid red; */ 
  overflow: hidden;
}

.panel-2col-stacked div div {
  margin: 5px;
}

.panel-2col-stacked .panel-col-top,
.panel-2col-stacked .panel-col-bottom {
  width: 80%;
  clear: both;
}
.panel-2col-stacked .panel-col-first {
  float: left;
  width: 39%;
}
.panel-2col-stacked .panel-col-last {
  float: right;
  width: 39%;
}
.panel-clearer {
  clear: both;
}

and I've made the following changes to foundation's style.css (added to bottom):


/* panel elements */
#front_page {
background-color: #bfebf6; background-image: url('http://www.thehindsightfactor.com/ise/files/logo.gif'); background-position: center center; background-repeat: no-repeat; width: 100%; _width: 110%;
}

#block-lucid_menu-2 {
margin-bottom: 85px;
margin-top: 35px;
}

#block-lucid_menu-77 {
margin-top: 65px;
margin-bottom: 35px;
margin-left: 75px;
}

#block-block-5 {
margin-top: 300px;
margin-right: 50px;
}

You can also view the page at http://www.thehindsightfactor.com/ise/?q=temp

⋅ Categories: Drupal 5.x

Comments

laura s’s picture

laura s commented

IE6 doesn't honor the min-width css parameter, alas.

Laura
_____ ____ ___ __ _ _
design, snap, blog

_____ ____ ___ __ _ _
Laura Scott :: design » blog » tweet

Jay Daverth@drupal.org’s picture

Jay Daverth@drupal.org commented

I don't suppose you know of any hack that works? I've found one guy who put together a javascript that claims to do the job, but I'd rather not go that route if possible!

ZuluWarrior’s picture

ZuluWarrior commented

Well, being a new drupaller, I am quite excited to be able to help with this one!!!

This worked for me, is compatible with all browsers and is based on some quite advanced css trickery....

I had the same problem. It is down to IE6 not supporting the min-width css attribute. You can achieve the desired effect however, with 3 divs and some css hackery...

here is what I did:

firstly in your page.tpl.php, create 3 container divs IMMEDIATALLY after the body tag, call them something like:

<body>
<div id="MinWidthContainer"><div id="PageContainer"><div id="PageContentContainer">

and also, finalise them just before the closing body tag, ie:

</div></div></div>
</body>

make sure everything else is within these tags, as these tags are just used to contain the page...

now, apply the following styles to your global css:

  
body {
  width: 100%;
  height: 100%;
  min-width:800px; /* This takes care of all the 'decent' browsers */
  margin: 0px; 
  padding: 0px;  /*optional*/
  /* Optionally set text-align: center; and increase the padding if you wish to have the page centered with margins... */
}

and, lastly, as we are only trying to fix ie, add these declarations to your fix-ie.css file....

/* Hide the following from IE/MAC as this doesn't need the fix... \*/
#MinWidthContainer {
	padding-left:800px;
	height: 1px; 
}
#MinWidthContainer #PageContainer {
	height: 1px; 
}
#MinWidthContainer #PageContainer #PageContentContainer {
	margin-left:-800px; 
	position: relative; 
	height: 1px;
}
?* End of IE/MAC hide */

What this does is like so:

firstly, the height: 1px; declarations simply force IE to expand the divs to contain all the content, rather than overflowing out of the div, these break other browsers so only for IE.

The padding-left in #MinWidthContainer forces the content out to the right, change the value according to your min-width setting.

The margin-left in #Min #PageContentContainer corrects the initial offset, so to display, it looks the same as it always did....

THe cool thing is that although IE does not register the min-width and therefor will allow any div to shrink to any width, it will ensure that divs can't shrink to a size less than their 'padding-area' according to the box model (That microsoft use). therefor as you try and narrow these divs, IE registers the margin and padding (ie the min width allowed for the div) and does not allow the div to shrink less than that value, instead pushing the edge of the div off the right of the page, ie minimum width!

One thing to note, DO NOT load the ie-fix.css file if the browser is IE 7! As this browser fixes this issue itself and applying the ie only css in IE 7 causes the divs to break.

As this is my first explanation and its quitte complex, please hit me back if any of the details are un-clear! Obviously, I'de recommend trying these techniques out on a blank xhtml page first...

Another note, the site I am producing is validated to XHTML Strict doc-type (a requirement) and this fix also validates to this standard ;)

Jay Daverth@drupal.org’s picture

Jay Daverth@drupal.org commented

Zulu, you are truly a mighty hack warrior! Thanks so much, I don't think I can remember a time in my life when I WASN'T working on this!! I hereby buy you a virtual beer!

ZuluWarrior’s picture

ZuluWarrior commented

my pleasure mate. It took me 2 days to crack it (with alot of credit to various internet sites). And am very glad it can be re-used! Sharing is the future!!!

Strange isn't it? Hearing Open source dogma from a Microsoft qualified programmer (Me)!!!!

A couple of further notes on this:

The only downside to this (apart from the 3 extra containing divs) is that you now have to set your min-width in 3 places, not just 1... Make sure you get all 3, otherwise the results can be just plain 'wierd'...

This hack also fixes the width: 100% bug in IE, so any element within the containers can be set to width: 100% without breaking/overflowing the container.

You can use this (and 2 extra divs) to add some rather nice neat overflow: hidden effects to the content area (ie, if you had your page centered with a 20px margin either side (use the padding on body for this, btw) you can also insure your content never overflows the left and right margin.)

mediafrenzy’s picture

mediafrenzy commented

Any chance you know how to get this solution working on the Garland theme? I tried your 3 step method from above, but it didn't seem to do much to Garland in IE6?

brianuol’s picture

brianuol commented

Frenzy,

I use a 1024x1px transparent gif absolutely positioned at the bottom of the page...

mediafrenzy’s picture

mediafrenzy commented

Yeah I had that suggested to me by a friend a while back too - thanks for reminding me. Hard to believe the dirty old transparent spacer gif is still needed in this day and age, but whatever works eh (within reason!!) . Cheers

ingomueller.net’s picture

ingomueller.net commented

Works great for me! I should do some more extensive testing, but it works great on IE 5.5, FF 3.1 and Chrome 8.0!

avramd’s picture

avramd commented

Hello,

I found the solution posted using all the divs to be complex, and both that and the transparent gif solution require modifying your HTML. I wanted a CSS-only solution, so I came up with the following.

Most of the credit for this goes to Angus Turnbull and his CSS based iepngfix solution here: http://www.twinhelix.com/css/iepngfix/. I didn't really use any of his code, but it is from his script that I learned what I needed to do this.

In short, you can get IE5.5/6 to do the equivalent of min-width solely via CSS rules, with the following ".htc" style javascript. This is not heavily tested, I'm sure it could be more robust. For example, it does not verify that the element is in fact capable of supporting a child IMG element.

Instructions are embedded in the script in comments:

<public:component>
<script type="text/javascript">

// Copyright 2008 Avram Dorfman (dorfman@est.org)
//
// This script can be used as a substitute for the CSS min-width property in IE 5.5 & 6 
// which do not support it. You use it like this:
// put it with other related javascripts in your site, w/ the extension .htc
// put a transparent single-pixel gif somewhere that is also accessible (see below)
//
// Then include the following in your CSS file
// selector { 
//   behavior: url(/javascripts/ieminwidthfix.htc); 
//   left: 500px;
// }
// It steals the "left" css property, which hopefully isn't already meaninful to your element
// and injects a new img element at the end of it that is transparent, 1px high, and the width
// you desire; thus forcing the element to be at least that wide.
//
// You may well want to use a different CSS attribute depending on your situation. It has to be
// valid and supported by IE 5.5/6.

var IEMinWidthFix = window.IEMinWidthFix || {};

// This must be a path to a blank image, relative to the HTML document(s).
// In production use I suggest '/images/blank.gif' or similar. That's all!
IEMinWidthFix.blankImg = '/images/transparentpixel.gif';


IEMinWidthFix.process = function(elm, init) {
	if (
		!/MSIE (5\.5|6)/.test(navigator.userAgent) ||
		typeof elm.filters == 'unknown'
	) { return;	}

  attr=elm.currentStyle.left;
  if (attr.length >= 2) {
    if (attr.slice(-2) == "px") {
      minWidth = attr.slice(0,-2);
      c=document.createElement("img");
      c.src="/images/transparentpixel.gif";
      c.width=minWidth;
      c.height="1";
      elm.appendChild(c);
    }
  }
};

IEMinWidthFix.process(element, 1);

</script>
</public:component>
phpmaven’s picture

phpmaven commented

I found this while researching this issue. All it requires is the addition of a couple of containing divs and no JavaScript. Seems a much more elegant solution to the problem:
http://www.cssplay.co.uk/boxes/width2.html