[Top]
More advice for the full screen mode.
   
Sivut toimivat riittävän hyvin MS IE 4.0+, Opera 5.x+, Netscape 6.0+/ vast. Mozilla ja Konqueror 3.x selaimilla. Yleisesti ottaen sivut toimivat parhaiten uusimmilla Opera selaimilla. Sivujen toimivuus vanhemmissa selaimissa on heikko, erityisesti Netscape 4.x kohdalla.

I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.
 
 
Search:
[Help]
Table of topic groupsFront page of CSS-guideExtra pages > G What JavaScript tricks can be used with CSS

G What JavaScript tricks can be used with CSS

Topics

Flexible width control for MS IE

In all situations it is impossible to get the desired result only by using CSS. Especially defining width values for Web-pages are problematic. Well, it would be nice, if pages would work in most resolutions optimal. I personally hate phrases like:

This site works best 1024x768 or bigger resolution.

It is very easy to set flexible width control for Mozilla Gecko and Opera browsers. Just writing for the main content a class, for example content and following CSS for it (in this case inside a DIV element).

div.content {margin-left:auto; width:90%; margin-right:auto; max-width:620px}

This CSS would fit well also in 800x600 or lower resolution screens for MS IE 6.0 for Windows and MS IE 5.x for Mac if browsers work in the standard-compliant mode (I explain this mode in another extra page[S]). Because MS IE doesn't support the max-width property, that CSS would not be good in wide windows (texts remain inconvenient wide).

This matter can be fixed by using JavaScript, which have been set to the of the BODY element or at least before elements, which have been referred. It detects the width of the BODY element by DOM-based standard method document.body.clientWidth. If the width value is bigger than 800 px then for MS IE is a link to a CSS file (in the beginning are conditions for browser detections which purpose is that the script would concern only certain MS IE browsers; I handle browser detections in another extra page[S]):


	var nua, IE, OP, Gecko, Mac, ie_pos, IENu, IE6x, IE5x; 
	nua = navigator.userAgent;
	IE = (nua.toUpperCase().indexOf('MSIE')!=-1);  
	OP = (nua.toLowerCase().indexOf('opera')!=-1);
	Gecko = (nua.toLowerCase().indexOf('gecko')!=-1);
	Mac = (nua.toLowerCase().indexOf('mac')!=-1);
	ie_pos = nua.toUpperCase().indexOf('MSIE');
	IEnu = nua.substr((ie_pos+5),3);
	IE6x = (IEnu>=6.0);
	IE5x = (IEnu>=5.0);
	
if (IE5x && !OP&& !Gecko) {
	
	if (document.body.clientWidth>800) 
	{		
		if (IE6x || Mac)
		{ 
		document.write('<lin'+
		'k rel=\"stylesheet\" type=\"text/css\"'+
		'href=\"../Css/basicWidthSetIE6x.css\"'+
		'media="\screen\" />');
		}
	}
}

Note that MS IE does not count the right side scroll bar to the width value. If you want to set for fully open MS IE values, which fit into 800x600 resolution screen, the correct value is 780. In my example the value is not critical.

I a way the result is non-standard because LINK elements should be inside the HEAD element. Because the element has been generated by JavaScript it remains only in the RAM of the computer and it would never actually printed to the document, it doen't cause problems for validating the Web-page (instead of the LINK element could have been possible to generate a STYLE element or other HTML-elements, which affect the width of the content).

For wide windows could in principle just add the following CSS:

div.content {width:620px}

MS IE 6.0 for Windows/ 5.x for Mac could behave like Opera and Mozilla Gecko browsers except in situation, where the visitor changes the width of the window. MS IE measures the width of the BODY-element only once per each page. If the visitor has come with for example width 1000 px and then he sets the width as 700 px, he would not get the optimal CSS.

In order to get the optimal CSS the page should be reloaded. In order to avoid unnecessary reloading the page, the script should first test, if reloading is necessary. The script must be changed at the following way:

...
function changeCSS()
{
	if (((document.body.clientWidth>800) && (originalwidth<800) 
	&& (originalwidth!=document.body.clientWidth)) 
	|| ((document.body.clientWidth<800) 
	&& (originalwidth>800) && (originalwidth!=document.body.clientWidth)))
	{
	window.location.reload(); 
	}
}	

if (IE5x && !OP&& !Gecko) {
{
	var originalwidth = document.body.clientWidth;
	window.onresize = changeCSS;...

Now most used MS IE browsers work almost as well as Opera and Gecko browsers (you can download the full script[S] from my Web-site). Because reloading page is slower than just reformatting page, changing the size of the window might take some extra download times. I have also found that MS IE doesn't always get the right CSS (widths of the window has been changed one after another too rapidly).

The previous mentioned CSS doesn't fit for older MS IE browser and MS IE 6.0 for Windows/ MS IE 5.x for Mac if browsers don't work in the standard-compliant mode. If the content use padding-left and padding-right properties the width values are always different. In addition older MS IE browsers don't support properly margin-auto. At least MS IE 6.0 for Windows in non-standard-compliant mode and older MS IE Windows browsers calculate especially incorrectly percentage defined width values (I'm not sure how MS IE 5.x for Mac behaves). That's why the original CSS should be different. The following CSS gives wider working result:

div.content {margin-left:5%; margin-right:5%; }
div[class="content"]{margin-left:auto; width:90%; margin-right:auto; max-width:620px} /* New values for Opera and Mozilla Gecko browsers by using attribute selectors, which are unsupported in MS IE browsers. */

CSS for MS IE 6.x for Windows/5.x for Mac in a big screen and for situations, where browsers work in the standard-compliant mode could be for example:

div.content {margin-left:auto; width:620px; margin-right:auto}

CSS for MS IE 5.x for Windows in a big screen could be for example:

div.content {margin-left:100px; width:650px; margin-right:auto}

In order to horizontally center the content in MS IE 5.x for Windows browsers, the content should be inside instead a DIV element inside a CENTER element (<DIV align="center> doesn't cause the correct result). Then margin-left could be set as auto. It is also possible to generate for MS IE 5.x with Javascript a CENTER-element outside the DIV element. If it doesn't have the termination tag (</CENTER>) it doesn't cause problems for MS IE browsers.

For MS IE 5.x for Windows could add following statement after if (IE6x || Mac) {...} statements:


		else
		{
		document.write('<lin'+
		'k rel=\"stylesheet\" type=\"text/css\"'+
		'href=\"../Css/basicWidthSetIE5x.css\"'+
		'media="\screen\" /><center>');
		}

If you want to apply this system for Netscape 4.x browsers use detecting the width of the window the window.innerWidth method (also many Opera browsers support this method and they don't support previous mentioned DOM-based method) and in the browser-detection the document.layers method.

As an alternative to the system, which I have explained is to use multilevel nested tables. Flexible width control with them doesn't work in Netscape 4.x and I have not tested functionality in Opera and Mozilla Gecko browsers. Rendering multilevel nested tables is for browsers slower than handling just one DIV or CENTER element and the structure becomes complex. Indeed it is not necessary to reload the opened page, when the width of the window has been changed.

It is possible to get flexible width control and other dynamic CSS-effects by using the value expression() and putting inside it (DOM-related) JavaScript commands (works starting from MS IE 5.0). Because other browsers don't support this method, I recommend that, other browsers would get CSS with some standard way. Below is an example:

expression(document.body.offsetWidth - 110 + "px");
WebFX: CSS Expressions.
[Top]

Floating elements and other tricks

Another important missing CSS-feature is MS IE for Windows browsers is support for position:fixed. It is possible to get blocks follow the mouse movement. Indeed JavaScript works worse than position:fixed. I got a script of Roy Whittle to work in my pages with MS IE browsers but not with any Gecko browser (indeed in the example page bottom positioned elements disappear from the screen in Opera browsers).

Javascript-FX: Floating Div.

It is worth to know that MS IE 5.x+ needs 5-10 times faster computer than Opera 7.x in order to run my pages approximately as good. Especially floating menus need fast computers.

MS IE supports much proprietary tricks. I don't recommend to use them because fully proprietary page systems don't belong to the basic idea of the Internet. Those what I have in this page handled are related with official standards.

[Top]
   
Copyright Tapio Markula 1999-2003, Salo, Finland
(table of topic groups, E-mail - add Tapio.Markula)
( tapio.markula@nic.fi)
Not into the public use without my permission. If you want to use my pages at some way read the copyrights.
Get Expression!

An editor for creating standard-compliant HTML and XML documents. Documents of this site have in most cases checked with HTML Tidy by Dave Ragget (W3C) and randomly with the official MarkUp Validation Service of W3C. The syntax of most pages in this site should conform with the XHTML 1.0 specification of W3C. Test this page!
Information about browsers, which render or print this site best.
[Get Opera!] [Get Mozilla!]
CSS-guide has been last edited 07.08.2004