CSS Problems with Maximum Width
Many modern websites use cascading stylesheets (CSS), a Web standard designed to manage the style, structure and design of HTML elements and pages. The "max-width" property was introduced with CSS2 and works identically with the newer CSS3 standard. By using "max-width" you can set a fluid, adjustable value for your content rather than a static one. This can be used effectively for images and for layouts that scale to the visitor's screen resolution. The maximum width can be set in pixels, centimeters or as a percentage of total screen width.
Other People Are Reading
-
Browser Support
-
For the most part, browsers support the "max-width" attribute in CSS. This means most Internet users will have no trouble with your layout, especially those who use Firefox, Chrome and Opera browsers. However, there are significant bugs regarding max-width in Internet Explorer 5.5, 6.0 and 8.0, as well as Safari 1.3. Some of these browsers are no longer in use, but between Internet Explorer 6 and 8, almost 30 percent of online users have browsers that either do not support this basic CSS, or have significant issues displaying it.
Conflicting Values
-
You can use both "width" and "max-width" in the same element, so long as they use different values. For instance, if you want your page to fill 75 percent of the width of the screen, but not go any larger than 1000 pixels, you would express this as:
#element {
width: 75%;
max-width: 1000px; }If you define both "width" and "max-width" by the pixels, it's always going to default to the max width -- making use of the element erroneous and wasteful.
-
Internet Explorer Problems
-
Internet Explorer is full of bugs regarding the max-width property. Internet Explorer 7 and earlier had no support for the "inherit" value for "max-width," which tells an element to use the same value as the parent element. In Internet Explorer 8, you can use "inherit" so long as you set a valid doctype for your page. While Internet Explorer 8 does support max-width in theory, max-width is ignored in Internet Explorer 8 when an element is floated, the overflow value is set to "scroll" or "auto," and it has a max-height set. Child elements also do not scale to the proper size in IE8. These errors were not present in Internet Explorer 7. Internet Explorer 6 and earlier do not support max-width at all.
Potential Repairs
-
For Internet Explorer 8 users, you can achieve better CSS2.1 and limited CSS3 support by telling the document to run using IE8 standards. To do this, insert this meta tag directly below the <head> tag in your document:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Modifying this meta tag allows you to change how Internet Explorer interprets your page. For instance, if you want it to display your page using Internet Explorer 7 standards, you would set content to "IE=7".
German programmer David Mueller designed a simple repair script for browsers that do not support the max-width CSS. This code is available on the CSS Tricks website as "Fix Min/Max-Width for Browsers Without Native Support." By incorporating this, you can help make your layout more functional in browsers that don't support "max-width," but may not be so helpful on browsers that have poor support for the property.
-
References
Resources
- Photo Credit Handout/Getty Images News/Getty Images
