I just stumbled on this nice little tutorial on how to fix the min-width problem with IE6 without using Javascript like I mentioned in an earlier post.
I’ll post the tutorial here anyway just in case you don’t feel like clicking the link. Everything after this comes from that site. I’m just rewording some things to make things a little easier to understand, at least I hope I’m making it easier.
Here is the style sheet that works with the browsers other than IE6:
<style type="text/css">
body
{
background:#fff url(rule.gif) 20px 0;
color:#000;
font-family:"trebuchet ms", "times new roman", times, serif;
margin:20px;
padding:0;
}
.width
{
width:50%;
min-width:300px;
background:#fff;
}
.content
{
border:1px solid #c00;
padding:5px;
}
.rule
{
width:300px;
background:#c00;
color:#fff;
margin:1em 0;
}
</style>
<html>
<body>
<div class="width">
<div class="content">
<h2>{width:50%; min-width:300px;} for non IE browsers</h2>
<p>
This div has a min-width of 300px and a width of 50%.<br />
The width can be any percentage and the min-width a
px or em value.
</p>
</div>
</div>
<div class="rule">this is 300px wide</div>
</body>
</html>
The following steps will be for IE only. Remember, “*html” is something that only IE6 and lower recognize. You just need to add this to the above CSS to get it working with all browsers.
The trick is to make a left border that is the same width as the minimum width that you desire, since the border doesn’t shrink along with the browser window. In the end, everything in the div will fit nicely in the border once the browser window is small enough. It’s a nice little illusion of the min-width property.
First, add a new div class called “minwidth” and make its left border 300px, or whatever minimum width you want. Also change the border color to match the background color. If you have an image as a background, rest assured, because there’s a way to address that issue as well, and it will be discussed further on in the tutorial.
* html .minwidth
{
border-left:300px solid #800;
}
This is what the HTML should now look like:
<div class="width">
<div class="minwidth">
<div class="content">
<h2>{width:50%; min-width:300px;} for non IE browsers</h2>
<p>This div has a min-width of 300px and a width of 50%.<br />
The width can be any percentage and the min-width a
px or em value.</p>
</div>
</div>
</div>
<div class="rule">this is 300px wide</div>
Now, we need to shift the text left by 300 pixels so that it occupies the border width as well as the normal width. This can be done by adding another div with a left margin set to -300 pixels.
* html .container {
margin-left:-300px;
}
The HTML should be modified to include the new div and should look like this:
<div class="width">
<div class="minwidth">
<div class="container">
<div class="content">
<h2>{width:50%; min-width:300px;} for non IE browsers</h2>
<p>
This div has a min-width of 300px and a width of 50%.<br />
The width can be any percentage and the min-width a
px or em value.
</p>
</div>
</div>
</div>
</div>
<div class="rule">this is 300px wide</div>
At this point, the contents will continue to shrink past 300px because of an IE rendering bug that causes the divs to have their “hasLayout” property set back to false. The “hasLayout” property is basically a boolean telling whether or not the current div has a layout or not. The layout is something like the CSS properties: display, height, width, position, float, etc. For example, have you ever tried to use a div as a spacer? You set the width to whatever you want, but there’s still no space where you want it. That’s an example of “hasLayout” being set to false. One way to solve this is to set the height property. Setting the height to 1px should be enough to set “hasLayout” to true; and viola, your space appears where you want it to.
Similarly, we apply the height property to a few divs to set their hasLayout property to true.
/*
* html .minwidth, * html .container {
height: 1px;
}
/*
The “/*” are so that IE5 can ignore it, since, according to the site, the “hasLayout” problem doesn’t affect IE5.
With one problem solved, another one appears. If you attempt to shrink the window, the text disappears behind the border. Thankfully, there is a simple solution to this. To the “container” div style, add position:relative. This should bring the text to the front of the border.
* html .container {
margin-left:-300px;
position:relative;
}
“What if I have an image as my background?”
First, replace the “minwidth” border with a padding instead using the same width as the border.
Then, you will need to add a new div to the HTML as such:
<div class="width">
<div class="minwidth">
<div class="layout">
<div class="container">
<div class="content">
<h2>{width:50%; min-width:300px;} for non IE browsers</h2>
<p>
This div has a min-width of 300px and a width of 50%.<br />
The width can be any percentage and the min-width a
px or em value.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="rule">this is 300px wide</div>
Then we need to add this new “layout” div to the “hasLayout” fix list.
/*
* html .minwidth, * html .container, * html .content, * html .layout {
height:1px;
}
/*
And there you have it. A fully functioning IE proof min-width technique. I find the whole border idea pretty interesting. I would have never thought to use a border in that way.
Here’s their example of how it should be in the end.
If you want the whole thing to be centered, it can be achieved using the normal method of ‘text-align:center’ for Internet Explorer and ‘margin:0 auto;’ on the outer width div for all other browsers. Like so.
RSS feed for comments on this post
