Fix Min/Max-Width for Browsers Without Native Support

This script checks all elements with a class of .fixMinMaxwidth and observes the window. It's only applied to browsers without native min/max-width support such as ie6 and below. Window resizing won't be a problem either.

<script type="text/javascript">
//anonymous function to check all elements with class .fixMinMaxwidth
var fixMinMaxwidth=function()
{
       //only apply this fix to browsers without native support
       if (typeof document.body.style.maxHeight !== "undefined" &&
               typeof document.body.style.minHeight !== "undefined") return false;

       //loop through all elements
       $('.fixMinMaxwidth').each(function()
       {
               //get max and minwidth via jquery
               var maxWidth = parseInt($(this).css("max-width"));
               var minWidth = parseInt($(this).css("min-width"));

               //if min-/maxwidth is set, apply the script
               if (maxWidth>0 && $(this).width()>maxWidth) {
                       $(this).width(maxWidth);
               } else if (minWidth>0 && $(this).width()<minWidth) {
                       $(this).width(minWidth);
               }
       });
}

//initialize on domready
$(document).ready(function()
{
       fixMinMaxwidth();
});

//check after every resize
$(window).bind("resize", function()
{
       fixMinMaxwidth();
});
</script>

Reference URL

Comments

  1. User Avatar
    justin

    hmm…when i try to implement this, ie6 is unable to parse the maxWidth and minWidth values. modern browsers can interpret them correctly. have you been able to use this successfully?

  2. User Avatar
    justin

    i figured it out. i’m using a global style of max-width: 100% on all images. since ie6 calculates that percentage relative to the image size rather than the parent element the effect was failing. i set maxWidth to the width of each image’s parent instead of the explicit 100% from the css and that seems to do the trick. not quite sure what to do for min-width. alternatively, a set of ie6 specific css targeting all possible max-widths would work with the existing code but would quickly get unwieldy.

  3. User Avatar
    John
    Permalink to comment#

    I think this is a more elegant solution for the same idea, and it works back including IE6. It’s designed for fullscreen flash with minimums, but the concept could apply without flash as well. (though it’s not designed for maximums, just min)

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag