How to make IE respect max AND min-width

Question

Possible Duplicate:
How to make IE support min-width / max-width CSS properties?

I have a site that has it's main navigation in a list (floated left).

The li elements need to have a min AND max width. This css of course works fine in all good browsers. But IE (9) doesn't react to it.

    ul.dropdown li {
            line-height: normal;
                    text-align: center;
            max-width: 145px;
            min-width: 88px;
            min-height: 30px;
        }

If I use this code on one condition, for example max width IE respects it. http://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/

But of course I can't use the same for min-width.

I need a solution that IE respects max AND min width.

Is there a solution?

Thank You!

edit: I forgot to mention i already added

<!DOCTYPE html>

;)

No it ain't because i already added the doctype and ie doesn't respect it, because if I use one condition (i.e. max-width) the min width is not respected. — GrampaRay, Jun 26 '12 at 12:29

score 2 · Accepted Answer · answered Jun 26 '12 at 13:50

2

Ok, I found the problem. It wasn`t in the code, my IE just automatically switched into Quirks mode. Changed it by going in the console (F12) and changed the Document Mode to IE9!

Thank You!

answered Jun 26 '12 at 13:50

GrampaRay

170
1
13

Thank you for coming back and posting the solution to your issue. – ScottS Jun 26 '12 at 14:46

benoît · Answer 2 · 2012-06-26T13:12:53.073

0

Try this (it's work on my ie8)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>template</title>
<style type="text/css">
 #content{
   height:400px;
   background:yellow;
   *width: expression(if(document.body.clientWidth < 534){"533px";}else if(document.body.clientWidth > 776){"777px";}else{ "auto"; }); /* set min-width for IE */
   background: red;
 }

</style>


</head>
<body>
<div id="content">
hello
</div>
</body>
</html>

I don't know how to write this with ? and :.

Hack width with this : http://paulirish.com/2009/browser-specific-css-hacks/

edited Jun 26 '12 at 13:12

answered Jun 26 '12 at 12:35

benoît

1,473
3
13
31

That doen't do the trick, sorry. Same Problem, that IE just reatcs to one expression! – GrampaRay Jun 26 '12 at 12:49
it's work for me, I had my xhtml code… – benoît Jun 26 '12 at 13:13
I used your code right here: http://tinyurl.com/ceaao4k as you might see, it doesn't seem to work... – GrampaRay Jun 26 '12 at 13:19
To debug, you need to work on simplified version. – benoît Jun 26 '12 at 13:40

How to make IE respect max AND min-width

2 Answers2