HOME | SERVICES | CONTACT | PORTFOLIO | MUSIC

CSS - Max width help

Trying to keep things simple, sometimes I use the 'max-width' and 'min-width' properties of CSS. Makes it simple if you are letting someone upload images to a site for you.

For example, blogCFC has a slideshow function. Here's an example. Ok.. so you've got this slideshow and you are letting someone else upload the images or create totally new slideshows.. Telling them to keep the images a to a certain width is all fine but.. People tend to "forget" and then you may have an image or two soooo big that they break your lay-out. Well, that's were the 'max-width' property would come in. In your style sheet you could add something like:


.slideshow img {
    max-width: 150px;
}
This would effectively make every image in the slideshow class have a max width of 150 pixels.

Another property is the 'min-width' which, the liquid skin of blogCFC uses in the layout css. It sets the minimum width of the page to 800 pixels.. looking like this in the style sheet:


#page{
    width:90%;
    min-width:800px;
    margin: 0 auto 0 auto;
    padding: 0 0 10px 0;
}
Now.. all this is great but.... doesn't really work in Internet Explorer for Windows prior to version 7. I was looking for some other solutions when I ran across this javascript from Doxdesk. Their minmax module fixes the css 'min | max' height problems. All you need to do is add this js to your site and call it by inserting a link:

<script type="text/javascript" src="/folder/minmax.js"></script>
I've attached the file to this entry.. If you make use of this please do not change the author credits found in the file. The author had a few other interesting javascripts.. I havent had time to check those out though. But you can! ;) Doxdesk.com

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Hi Robert,
Does the aspect ratio remain intact when using max-width?
D.
# Posted By doug | 5/3/07 9:28 PM
Well... yes and no.. Yes in mozilla, firefox, netscpae (Ithink) and just about every other browser except IE 5 or 6.. IE 7 does it a little better but it still needs help. I would suggest using the minmax javascript to help out.. But, still IE sometimes the image isn't as good as is could be.
# Posted By Robert Owen | 5/4/07 12:22 AM
Content Copyright © 2005 Owen Consulting - All Rights Reserved | This Blog Powered by BlogCFC version 5.9.1.002.