Wickham's XHTML & CSS tutorial

Search | prev

Maximum and minimum width: Javascript/ActiveX (2)

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 (2)

1 green icon IE7, Firefox and other modern browsers use the max-width and min-width attributes while an alternative for IE6 and other older browsers not supporting max-width is to use a width: expression code which requires Javascript/ActiveX. It enables IE6 and other older browsers to have a maximum width but no minimum width so content will 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:-

<style type="text/css">
#maxmin { max-width: 900px; min-width: 650px; margin: 0 auto; border: 0; padding: 0; } </style>

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

<!--[if lt ie 7]>
<style type="text/css">
body { font-size: 13px; }
#max-width900 { width:expression( document.body.clientWidth > (700/13) * parseInt(document.body.currentStyle.fontSize)? "54em": "auto" ); margin: 0 auto; border: 0; padding: 0; }
</style>
<![endif]-->

The width: expression works for text in IE6 and other older browsers not supporting max-width if the body does not have relative font-size like small; use font-size in px.
See svendtofte and tom-lee who used clientWidth > (500/12) where the desired max-width of 500px for his page using 12pt font was 42em but I require 54em in IE6 so my code is different.

This code depends on the relationship between font-size and ems for the width of the element which is always a ratio of 500/12, (500/12 = 42, 546/13 = 42, 583/14 = 42, as discovered by tom-lee) but the font-size must be given in px, pts or ems (the program will relate them) but not in relative terms like medium or small. Work out roughly how many ems you require for your maximum width, it doesn't have to be exact.

There is a way you can work out the ems you require for the code ( 54em in the code above). In both cases put your normal font-size in the body style:-
body { font-size: 13px; }
Create a temporary colored div and change the number of ems until it is the length you require for a maximum page or element, note the number of ems you used and then delete the temporary div.
<div style="width: 54em; background-color: #eee;">&nbsp;</div>
Pts are different from px but it won't make a lot of difference whether your body font-size is px or pts so long as it is one or the other, not relative like medium or the javascript code will not work.

Although the code is based on the relationship of 500/12 normally, by altering the ratio you can either make the text have a maximum width and be flexible as the window is made less wide; have a maximum and be fixed or not have a maximum at all and be flexible in width. For this page I used the ratio 700/13 = 54 (the desired maximum width in px / the font-size) and a maximum width of 54em. Use trial and error in fixing both the ratio and the width in ems that suits you. It seems that to work best the ratio must equal the width in ems so 700/13 = 54 and my maximum width stated is 54em.

The width: expression in IE6 and other older browsers not supporting max-width gives a maximum width but no 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 730px while the max-width for modern browsers is 900px. If the width: expression is in the general style tag with a larger max-width, modern browsers 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 other older browsers not supporting max-width. In this case older browsers are not covered by the conditional comment and will just have a flexible width.

See w3.org item 10.4 and About.com and Doxdesk for general information.


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.

horses
horses
 

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 > 150 ? 150: true);" src="images/horses200x50.jpg" alt="horses"/>
<img style="max-width: 150px; width: expression(this.width > 150 ? 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 ActiveX/Javascript.

This text is in a <p> tag with a class="max-width550" that works in IE6, IE7, Firefox and other modern browsers. The required maximum width is 550px to match the max-width for modern browsers. The maximum width has been set to 42em which, according to the relationship discovered by tom-lee, is approximately 550px using 13px font-size (13*42 = 546 using the standard ratio of 42). 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 on modern browsers because the whole page has a minimum width of 650px. On IE6 the main page content reduces in width below the maximum but this paragraph is fixed at its maximum width).

The width-expression does not work if the font-size is relative like small or medium; use a font-size in px or ems (it has been changed from small to 13px just for this page in the head style. IE6 does not allow a fixed font-size to be enlarged with View/Text Size so it has been left as small in stylesheet to be variable on other pages).

The max-width: 550px is for IE7, Firefox and other modern browsers and the width: expression is for IE6. The style code in the head section is:-

body { font-size: 13px; }
.max-width550 { max-width: 550px; width:expression( document.body.clientWidth > (500/12) * parseInt(document.body.currentStyle.fontSize)? "42em": "auto" ); }

The width: expression works for text in IE6 and othe older browsers not supporting max-width if the body does not have relative font-size like small; use font-size in px. 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, modern browsers will use the width: expression. In this case the max-width and the width: expression are the same value.

See svendtofte and tom-lee who used clientWidth > (500/12) where the desired max-width of 500px for his page using 12pt font = 42em and 546px for my paragraph in IE6 using 13px font = 42em.

This code depends on the relationship between font-size and ems for the width of the element which is always a ratio of 500/12 = 42, 546/13 = 42 or 583/14 = 42, but the font-size must be given in px, pts or ems (the program will relate them) but not in relative terms like medium or small. See the general principles described in item 1.

The code in the body html is:-

<p class="max-width550">...Text in p tag...</p>

Ems can be used instead of px. See svendtofte and tom-lee for further details.


Notes

View/Source or View/Page Source in browser menu to see all xhtml 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 &lt;p>Little Egret&lt;/p> instead of <p>Little Egret</p>. The code &lt; 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 xhtml code tags which are to be activated.

© Wickham 2006 updated 2007


top | prev

 

Google
web www.wickham43.com/