Wickham's HTML & CSS tutorial

Maximum and minimum width: Javascript/ActiveX (1)

View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems gold icon warning: works in some situations or some browsers or needs care to display as you wish green icon OK in Firefox, Safari, Opera, Google Chrome and IE

View at different screen resolutions to see the differences.

Max-width and min-width attributes applied to a whole page using Javascript/ActiveX (1)

1 green icon IE7, Firefox and other modern browsers use the max-width and min-width attributes while an alternative for IE6 and older IE browsers not supporting max-width is to use a width: expression code which requires Javascript/ActiveX. It enables IE6 and older IE browsers to have a maximum width and minimum width so content will not get squashed in small windows. The disadvantage is that it needs Javascript/ActiveX enabled which item 1 on Maximum and minimum width and Jello Mold do not.

Typical code in the stylesheet or head section style tags (which has been used for the code of this page) would be:-

The above styles are for IE7, Firefox and other modern browsers. See the conditional comment below for IE browsers less than IE7.

The width: expression in IE6 and older IE browsers not supporting max-width or min-width gives a maximum width and minimum width.

In the case above the width: expression has been put in a conditional comment for IE browsers less than IE7 because the desired maximum width for browsers less than IE7 is 700px while the max-width for modern browsers is 900px. If the width: expression is in the general style tag with a larger max-width, IE7 and IE8 will use the width: expression which is lower in this case. If the required maximum width is the same for all browsers then the width: expression can be put in the general style where it will also apply to older IE browsers not supporting max-width. Older non-IE browsers do not operate the width:expression and are not covered by the conditional comment for lt ie 7 and will just have a flexible width.

The second size in each statement needs to be different or IE6 will go into an infinite loop. In IE6 if the window is opened narrower than the minimum, a scrollbar will show and the page will be at the minimum width. If the window is open at a smaller resolution than the maximum you can drag the window wider or narrower between the minimum and maximum or narrower than the minimum but once you exceed the maximum, you cannot drag it back to the minimum (IE6 knows that you can make your window wide enough!) and so it works as it should when you open the page the first time (or refresh it) whatever window resolution you have.

See w3.org item 10.4. and Perishable Press and the post from alias 3.55pm on 29th March 2006 webmasterworld.com.

Maximum and minimum width combined with header fixed vertically

2 gold icon Here are two examples of a header that stays visible during scrolling of content below while the whole page is also subject to a maximum and minimum widths. Neither example is perfect because the header scrolls in IE6.

Example 1 uses a fixed width for the header and content and uses position: fixed for the header. It works in IE7, IE8, Firefox, Opera and Safari. In IE6 the header scrolls.

Example 2 has max-width and min-width for the header and content and width:expression to enable max-width and min-width to work in IE6 and a fixed header in modern browsers. In IE6 the header scrolls.

Both examples are satisfactory provided you know the probable window resolution of your target viewers; if you set the minimum just below 800px width then most viewers on computers will have no problem, just those on small screen devices.

Maximum width for elements

3 green icon IE6 does not support the max-width tag although IE7 and Firefox do. However, a small bit of code (that needs ActiveX) will make it work in IE6 for images.
If you only have one image then it can be resized by adding width: **px; to the img code as in <img style="width: 150px;" src="image.jpg" alt="image description"> which will resize a larger image height in proportion to the width if no height is stated but it will also enlarge smaller images if they have the same code.
The max-width code below is useful if you are setting up a template which will have images of different sizes. It will leave images that are smaller than the maximum without resizing so you may need to check that a smaller width does not alter the layout. The max-width code will resize only images which are larger than the maximum as these would very probably disrupt the page layout if not resized.

The image below left has no width stated as an attribute so it just displays with its basic size of 200*50 px. If this image with a width of 200px is inserted in a div or table cell with a smaller width the div or table cell will expand to accommodate the larger image. The example below right is in a div width: 150px but the image is still displayed as 200px wide.

However, a width: expression code does work in IE6 with ActiveX. The following image 200*50px has been given a maximum width of 150px and as no height is stated the height is adjusted in proportion. An image 50*50px has also been included with a max-width code and this is unaffected:-

<p class="center"><img style="max-width: 150px; width: expression(this.width > 149 ? 150: true);" src="images/horses200x50.jpg" alt="horses">
<img style="max-width: 150px; width: expression(this.width > 149 ? 150: true);" src="images/beetle50x50.jpg" alt="beetle"></p>

horses beetle

4 green icon The width expression above does not work for text in IE6 but a slightly different code will work in IE6 (and IE7, Firefox and other modern browsers). The code needs Javascript/ActiveX.

This text is in a <p> tag with a class="max-width550" that works in IE6, IE7, Firefox and other modern browsers. The maximum width has been set to 550px. However, there is no minimum width and it is not a fixed width so the text will be squashed up if the window is made smaller (except that you cannot test that here because the whole page has a minimum width of 650px (modern browsers) but it will reduce in IE6 which uses the same javascript code for the whole page).

The style code in the head section is:-

The width: expression works for text in IE6 and older IE browsers not supporting max-width. The max-width: 550px is for IE7, Firefox and other modern browsers and works without Javascript/ActiveX. The width: expression should be separated in a conditional comment for IE6 if the maximum width is less than the max-width for modern browsers. If it is in the general style tag with a larger max-width, IE7 and IE8 will use the width: expression if it is less wide. In this case the max-width and the width: expression are the same value.

The code in the body html is:-

Notes

View/Source or View/Page Source in browser menu to see all html code.

The stylesheet tutorial.css for the remainder of styles is here.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

When looking at a page source for this site you may see code like <p>Little Egret</p> instead of <p>Little Egret</p>. The code < is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing html code tags which are to be activated.

top | Sitemap | prev