Implementing ZoneZ Part 4 - Backward Compatibility
Even though Elastic Dimensioning is recognized by IExplorer 7.0, but not by the earlier versions (i.e. Versions 5 and 6), while it has been recognized by other major Browsers, for a long time. Consequently, backward compatibility may possibly be a concern only for earlier versions of IExplorer, if you want to appease them.
The best solution would be to find a way that ZoneZ will be rendered as intended in all Browsers - including IExplorer 7.0, but down grade somewhat gracefully in IExplorer 5 & 6 only.
Method 0:
This is this the simplest application of the ZoneZ concept, with dimensioning & positioning using proportional units (%). Consequently, no fall-back scheme is required.
See a Demo.
Method 1:
One way to achieve this is, by first specifying their size using Plastic Dimensioning in relative units (%), and then overriding these settings by the child selector. Since the child selector is recognized by all other browsers, as well as IExplorer 7.0, only IExplorer 5 & 6 will render the page in proportional units (%).The resultant page will not be rendered as it is intended in IExplorer 5 & 6, and may even look funky! This is due to the inherent flaw in using proportional units (%) in page layout.
See a Demo.
Method 2:
Another approach to is to use a JavaScript work-around, in junction with a conditional comment. In other words, the JavaScript will be activated only for IExplorer 5 & 6. The resultant page will be displayed as intended even in IExplorer 5 & 6. The JavaScript code used in the demo has been written by Christian J - WDG Forum Moderator. Thank you Christian!
See a Demo.
Method 3:
This combines the Method 1 & Method 2, to address the of issue of JavaScript function of the browser being turned off. If the JavaScript is turned off, then the resultant page will be rendered in proportional units (%).
See a Demo.
Please Note That....
The Demo pages for the three Methods mentioned here use Internal Style Sheets, to allow anyone to look at the entire code, both CSS and HTML.
- Feed-back & Comments:
- Please send any comments, opinions, and even contributions on this subject, using the Feed-Back Form.
- Further Reading:
- You can review the list of Related Articles, with brief descriptions and links on the Auxiliary Panel,
|
|
Web Design & Engineering: Dr. Z
|
