Topic: Need a better min-width & min-height fix for IE
I have been struggling with this for a couple of days now, and can find a catch all solution to the problem. When you use either min-height or min-width in a style sheet to set the minimum height of minimum width of an element, it looks fine in moz browsers, but in IEPC and in Safari it breaks. I have found that if you can simulate it by setting the width or height of a block level element inside the parent element. This works fine if the last block level element is the same for each instance of the parent-child element being displayed. Example of my min-height usage:
#contentarea {
float: left;
width: 520px;
margin: 0;
padding: 0 0 18px 18px;
border-left: 2px dotted #fff;
text-align: justify;
font-size: .9em;
min-height: 500px; /* sets the minimum height of the conetent area box */
}
#contentarea p {
height: 500px; /* workaround for IEPC lack of support for min-height */
}
The above example works fine ONLY if your LAST block level element inside of the <div id="contentarea"> is a <p>. But if your main content area is dynamically generated, there is no guaranty that the last block level element inside of the content area is a <p>. I would hate to have to create a rule for each element that would be the last displayed in my dynamically generated content area. Also, and this is a big also, there can only be one instance of the block level element inside of your content box. For example, if I had two instances of the <p> element, the height of each <p> element would be set to 500px. This will create a lot of unnecessary space between the 2 <p> tags. Sometimes <p> is not the last element. On some pages I have just a form, and when this occurs the page breaks in IE.
Does anyone know of a global fix for IE other than the one I described above?
I hope this was not to confusing.
Thanks.