Getting the max-width property to work in IE

As you may know, the max-width property is very useful. With it you can set the maximum width of an object; whether it be an image or the body of your website. Most browsers can read this code and produce the correct results.

#footer{
max-width:500px;
}

What that code does is make an element with a maximum width of 500 pixels. The only problem with that code is Internet Explorer versions six and earlier cannot process this. Here is what you need to add to get the same results in those browsers:

#footer{
max-width:500px;
width:expression(this.width > 500 ? “500px” : this.width);
}

That expression makes it so that early versions of IE can understand this crucial property.


The voice of the people

  1. Michael

    Nice solution, always been looking for something like this! Stupid IE…
    Can the same thing be incorporated for a min-width attribute? I would assume so, just flip the inequality.

    I understand how it works, but maybe you could explain it more for those who don’t? Otherwise this wouldn’t be an actual tutorial…

  2. Greg

    Thank you, and yes the same thing works for the min-width property.

  3. Sdsadfsaf

    sfsadfsafsafasfdasdvfasdfwegesd

  4. vashyoung

    way to go Greg… i never encounter a solution like this thanks a lot men you save my day

  5. vashyoung

    ? how come its not working for me?

  6. Greg

    You probably need to change the quote marks (”) to actual quote marks. For some reason wordpress changes them to another form that doesnt work.

  7. vashyoung

    it work but i use width:expression(document.body.clientWidth > 500? “500px”: “auto”);

Leave a Reply

Recently