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

Question

Are these properties not considered standard CSS?

I'm using something like this, which works properly on Chrome 12, FF4, Opera 11, and Safari 5, but on IE9 the min-width is not respected if width < min-width.

<span style="float:left; width:11%; min-width:150px;">
    ...
</span>

Edit: a little annoyed at the liberal editing and migrating of my question, but w/e. Here's a fuller example that shows a clear difference in IE9 vs other browsers.

<html><body>
<p style="width: 600px">
<span style="float: left; width: 11%; min-width: 150px">Hello.</span>
<span style="float: left; width: 11%">World.</span>
</p>
</body></html>

Edit 2: As noted in Kevin's comment below, adding <!DOCTYPE html> to the beginning solves the IE issue.

NB: I do understand there are workarounds to accomplish the same thing on IE. I'm not asking how to accomplish a workaround. I'm asking what the logic is behind IE's failure to support these particular properties. Oddly, [w3schools says that IE supports min-width](http://w3schools.com/css/pr_dim_min-width.asp). — Dan Burton, May 11 '11 at 17:37
Also see this SO for IE6: http://stackoverflow.com/questions/93274/min-width-in-msie-6#93530 — pixelbobby, May 11 '11 at 18:25
Another NB: The original intent of the question was to understand IE's reasoning for not behaving like other browsers in respecting min-width. — Dan Burton, May 11 '11 at 18:52
Did you really originally post this on webapps.stackexchange.com?? :) Are you really trying to make IE support min-width CSS properties?? Like if I wrote a plug-in that you could install for IE x.x that **forced** IE x.x to support min-width, would you use it? Is that what you're asing? — pixelbobby, May 11 '11 at 18:56
@pixelbobby yes, no (I'd like it to by default, though), no, and no. Someone edited my original title to its present form; it wasn't originally a how-to question. Yes I originally posted on webapps; I wasn't sure exactly where this kind of question was supposed to go. Kevin's linked spec is along the lines of the kind of answer I was looking for. — Dan Burton, May 11 '11 at 19:05

Kevin Peno · Accepted Answer · 2011-05-11T19:23:34.550

13

If what you are saying is true, IE9 would be deviating form the spec. However, I cannot duplicate your complaint. Using your example, IE9 respects min-width if width is less than 150px per this jsfiddle.

EDIT:

NOTE: Quirks Mode follow different rules and does not comply with standard CSS in any browser. If you add a doctype to the page, this should resolve the problem (add: <!DOCTYPE html>).

To expand on the issue, Quirks Mode is not standardized. There are some things that most browser implement, but new features are undefined in those defacto standards. Thus, some browsers are allowing new CSS to be used (as you have observed), but IE9 is ignoring new css values, as they have no place in Quirks Mode.

edited May 11 '11 at 19:23

answered May 11 '11 at 18:04

Kevin Peno

9,107
1
33
56

Maybe I should provide more of the surrounding example code, but IE9 definitely did not respect my min-width (when 11% of the containing element's width was less than 150px). – Dan Burton May 11 '11 at 18:18
@Dan, I'd have to re-read the spec, but I'm pretty sure that `width` overrules `min-width` on that particular instance. – Kevin Peno May 11 '11 at 18:31
1

@Dan, I stand corrected. IE9 deviates from the spec if what you are saying is true. See [the spec](http://www.w3.org/TR/CSS2/visudet.html#min-max-widths) – Kevin Peno May 11 '11 at 18:33
@Kevin the linked jsfiddle is blank (?) But see my extended example code above. – Dan Burton May 11 '11 at 19:08
I tried putting my extended example in jsfiddle but the error mysteriously didn't appear. However, if you make an html file and load it into the different browsers, you can see the discrepancy in IE9. Or see it on my flimsy website: http://unknownparallel.com/csstest.html – Dan Burton May 11 '11 at 19:14
@Dan, sorry! I forgot to hit save when I did the jsfiddle. I've saved a js fiddle with your updated example and I still see no deviation in IE7+. IE7+ is conforming to the spec and respecting `min-width` if `width` is less than `min-width` – Kevin Peno May 11 '11 at 19:17
2

@Dan, this is because you are operating in Quirks Mode! Quirks Mode follow different rules and does not comply with standard CSS in any browser. If you add a doctype to the page, this should resolve the problem (add: ` `). – Kevin Peno May 11 '11 at 19:19
@Dan, I'm glad we got to the bottom of it. – Kevin Peno May 11 '11 at 19:40
lol.. i had valid xhtml / css when tested at w3c. Only thing i did not have doctype (you can choose doctype when testing at w3c) Anyway solved also my problem. Thank You Kevin :) – Jarno Apr 23 '12 at 19:49
2

bytheway.. this also fixed a problem with centering divs: IE shows the page correctly without text-align:center in css (ie-hack i found earlier for centering issue) – Jarno Apr 23 '12 at 20:18

score 4 · Answer 2 · answered May 17 '12 at 18:16

4

I found that <!DOCTYPE html> was insufficient — I had to go strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

answered May 17 '12 at 18:16

Drew Beck

49
1
1

score 3 · Answer 3 · edited May 16 '13 at 07:19

3

Try following code:

#limit-size
{
min-width: 998px;
width: expression(this.width < 998 ? 998: true);
min-height: 250px;
height: expression(this.height < 250 ? 250: true);
}

//html:
<div id="limit-size"></div>

edited May 16 '13 at 07:19

Prasad Jadhav

5,090
16
62
80

answered May 16 '13 at 06:57

Chưa biết

919
8
6

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

3 Answers3

Linked

Related