Menu
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.
424
Max-width and min-width can be used together to target a specific range of screen sizes. @media only screen and (max-width: 600px) and (min-width: 400px) {...} The query above will trigger only for screens that are 600-400px wide. This can be used to target specific devices with known widths.
The min-width CSS property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width .
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.
100
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">
21
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
