A look at pure CSS IE6 min-width solutions
As a large user base are still using Internet Explorer 6, with it’s extremely poor support for essential CSS, we as front-end developers need to come up with creative solutions to Internet Explorer’s limitations. One such limitation is the min-width property. In this article I will be looking at 2 pure CSS solutions each with their strengths and weaknesses.
1. Using borders to create min-width effect
This technique was inspired by the very clever Stu Nicholls over at CSSplay. It uses a left and right border to create the min-width effect in IE6.
The xhtml
The CSS
How it works
You set up 2 containers 1 which has the min-width property for all the standard compliant browsers. You then target that same div with the * html selector and apply a border with half the value of the min-width you wish to have and apply that to the left and right of the border attribute. The second container is within IE conditional comments so it doesn’t render in anything but IE6 this is then applied with a negative margin equivalent of the border values previously set. Position relative and float left are applied to fix the negative margin bug.
The Pros
- Minimal mark-up and CSS.
- Simple to implement.
- Great for simple layouts.
The Cons
- Border colours can’t be set to transparent in IE6 this can cause problems when setting background images/colours on the container with the border applied. See example here. There is a “fix” to create transparent borders in IE6 but it relies on the Chroma Filter property this allows background colours to come through the border but does not fix the issue of backgrounds on the div with the border, see the chroma filter in action here.
- Not for every layout. The more complex and graphic intensive a design becomes, the less viable this solution is.
Chroma filter fix
2. Using padding to create min-width effect
This technique works in a similar way to the borders but without the issues and hassles of using borders. I have not yet seen this technique used anywhere else.
The xhtml
The CSS
How it works
This uses 3 containers, the main parent container has the min-width property set for the good browsers and also uses the * html selector to apply the padding to the left and right so the padding will equal that of the min-width you wish to use. The 2nd and 3rd containers are in conditional comments as they are only needed for IE6. The 2nd container has width: 100% applied to give IE6 layout. This is set to width because it is the least destructive property to cause layout in IE6, you could use zoom: 1 but this is a propriety CSS property and is better to avoid. Refer here for all properties that cause layout. Finally the last container uses negative margins to pull it back into the padding, again the position and float are there to fix the negative margin bug.
The Pros
- Uses padding rather borders
- No issues with having background colours/images
The Cons
- It’s a little heavier on the mark-up but this is only rendered in IE6, through the use of conditional comments.
There we have 2 ingenious techniques to accomplish what is a very easy task in all the good browsers. With a few workarounds these are hack free, clean and simple to implement.