This page is the same as the first page and should work correctly in IE6. The CSS is the same as the last page, but after each div element is loaded, a JavaScript function is called that, if necessary, converts an auto width or auto height property to a fixed pixel value. This is unnecessary in Firefox and Opera because the getComputedStyle() function returns a pixel value and the function is skipped. In IE6, the auto width value will be replaced with a calculated fixed pixel value and the layout will be displayed correctly.
In order for the layout to be rendered as smoothly as possible, the autoSize() function is called after each element is loaded. The autoSize function and supporting functions must be loaded before the function is called, so they should be in the document head. If the page is small and loads quickly, the JavaScript code could be moved to a file and the calls to autoSize could be moved to an onload handler. In order to resize the page correctly in IE6, a call to onResize() also needs to be added to body.onresize().
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Functional CSS Layout</title> <link rel="stylesheet" type="text/css" href="include_css/simple.css" /> <script type="text/javascript" language="javascript1.5"> <!-- autoSize code here, I generally use a server side include --> </script> </head> <body onresize="onResize();"> <div id="header_div" class="layout_div"> </div> <script type="text/javascript">autoSize('header_div');</script> <div id="link_div" class="layout_div"> <div><? siteLinks(); ?></div> </div> <script type="text/javascript">autoSize('link_div');</script> <div id="content_div" class="layout_div"> </div> <script type="text/javascript">autoSize('content_div');</script> </body> </html> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | var pageWidth = getWidth(); var pageHeight = getHeight(); var widthResizeElements = []; var heightResizeElements = []; function getHeight() { return (document.documentElement) ? document.documentElement.clientHeight : document.body.clientHeight; } function getWidth() { return (document.documentElement) ? document.documentElement.clientWidth : document.body.clientWidth; } function getStyle(element) { return (element.currentStyle) ? element.currentStyle : getComputedStyle(element, null); } function autoSize(element) { if(typeof(element) == 'string') element = document.getElementById(element); var style = getStyle(element); if(style.width == 'auto') { widthResizeElements.push(element); resizeWidth(element, style); } if(style.height == 'auto') { heightResizeElements.push(element); resizeHeight(element, style); } } function resizeWidth(element, s) { var match, left, right; if(s.left && s.right && (left = s.left.match(/([\d]*)(px|%)/i)) && (right = s.right.match(/([\d]*)(px|%)/i))) { left = (left[2].toLowerCase() == 'px') ? left[1] : Math.floor(pageWidth * left[1] / 100); right = (right[2].toLowerCase() == 'px') ? right[1] : Math.floor(pageWidth * right[1] / 100); element.style.width = (pageWidth - left - right)+'px'; } else alert('didn\'t match width: '+element.id+' '+s.left+' '+s.right); } function resizeHeight(element, s) { var match, left, right, top, bottom; if(s.top && s.bottom && (top = s.top.match(/([\d]*)(px|%)/i)) && (bottom = s.bottom.match(/([\d]*)(px|%)/i))) { top = (top[2].toLowerCase() == 'px') ? top[1] : Math.floor(pageHeight * top[1] / 100); bottom = (bottom[2].toLowerCase() == 'px') ? bottom[1] : Math.floor(pageHeight * bottom[1] / 100); element.style.height = (pageHeight - top - bottom)+'px'; } else alert('didn\'t match height: '+element.id+' '+s.top+' '+s.bottom); } function onResize() { pageWidth = getWidth(); pageHeight = getHeight(); for(var n = 0; n < widthResizeElements.length; n++) resizeWidth(widthResizeElements[n], getStyle(widthResizeElements[n])); for(var n = 0; n < heightResizeElements.length; n++) resizeHeight(heightResizeElements[n], getStyle(heightResizeElements[n])); } |