Korrektur
Hallo,
falls jemand dieses Script eingesetzt hat und dabei einige Unklarheiten aufgefallen sind, so habe ich nun die verbesserte Lösung. Leider ist mir in der ersten Lösung ein Denkfehler unterlaufen. Es ist ja auch nicht ganz so einfach den [min-width] des BODY auf ein innenliegenden Container abzubilden.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>
<style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic">
/*<![CDATA[*/
* {
margin: 0;
padding: 0;
border-collapse:collapse;
border-spacing: 0;
}
html[xmlns] {
height : 100%;
padding-bottom : .005em;
}
html,
body {
color: #000000;
background-color: #FFFFFF;
line-height: 1.45;
}
body {
font-size: 100.01%;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
min-width: 46.25em; /* minBody */
padding: 0 10px; /* boxBodyfix = 20px */
background-color: #FFFF00;
}
#id-1
{
margin: 0 auto;
border: 2px solid #FF0000; /* boxIDsFix = 4px */
padding: 1em; /* boxIDsRelative = 2em */
background-color: #AADDFF;
max-width: 59em; /* maxIDs */
}
p {
font-size: .8em;
background-color: #55CCFF;
}
/*]]>*/
</style>
</head><body>
<div id="id-1">
textfluss...</p>
<p style="text-align: right;">...textfluss</p>
</div>
<!--[if lte IE 6]>
<div onresize="window.history.go(0);" id="em-lenght" style="width: 1em; height: 1em; position:absolute; top: -1000px; left: -1000px;"></div>
<script type='text/javascript'>
idList = new Array();
/* set [body] values by hand
*/
var minBody = 46.25; //min-width
var boxBodyFix = 20; //BoxModel (Pixel) (left+right)
var boxBodyRelative = 0; //BoxModel (EM) (left+right)
/* set [#id] values by hand
*/
var maxIDs = 59; //max-width
var boxIDsFix = 4; //BoxModel (Pixel) (left+right)
var boxIDsRelative = 2; //BoxModel (EM) (left+right)
/* set all [#id] width max-width by hand
*/
idList[0] = 'id-1';
//idList[1] = 'id-2';
//idList[2] = 'id-3';
/**** END EDIT **************************************/
function Element (id) {
this.id = id;
}
for (var cnt=0 ; cnt < idList.length; cnt++) {
idList[cnt] = new Element (idList[cnt]);
}
function checkBodyWidth() {
var em = document.getElementById("em-lenght").offsetWidth
var boxBodyValues = Math.ceil(em * boxBodyRelative) + boxBodyFix;
var boxIDsValues = Math.ceil(em * boxIDsRelative) + boxIDsFix;
var IEcorrection = 4; // Pixel weniger Platz zu Firefox
maxWidth = Math.ceil(em * maxIDs);
minWidth = Math.ceil(em * minBody) - IEcorrection;
var value = 'auto';
if ( document.body.offsetWidth > (maxWidth + boxIDsValues + boxBodyValues) ) {
value = maxWidth+'px';
}
if (document.body.offsetWidth < (minWidth + boxBodyValues) ) {
value = (minWidth - boxIDsValues)+'px';
}
for (var i=0 ; i < idList.length; i++) {
document.getElementById(idList[i].id).style.width = value;
}
return;
}
/* Set width value
*/
checkBodyWidth();
/* Control window.onresize
*/
function windowSize() {
if (document.body.offsetWidth) {
return document.body.offsetWidth;
} else {
return 0;
}
}
function newLoad () {
if (windowSizeSave != windowSize() ) {
window.history.go(0);
}
}
if (!window.windowSizeSave && document.body.offsetWidth) {
window.onresize = newLoad;
windowSizeSave = windowSize();
}
</script>
<![endif]-->
</body></html>