Könnte jemand mal dieses
Test-Case im IE5 bzw. 5.5 testen, es ist das gleiche wie oben - ich habe lediglich den JS-Alert gelöscht.
Im IE6 funktioniert es gut und ergibt bis auf einen kleinen Rundungsfehler die gleichen Ergebnise wie im FF 1.07 und Opera 8.5.
Es reagiert auf Änderungen im Schriftgrad und der Fenstergröße.
DANKE
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: #DDDDDD;
line-height: 1.45;
}
body {
font-size: 100.01%;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 5px;
background-color: #AAAAAA;
}
#idname1,
#idname2,
#idname3 {
margin: 0 auto 1em;
border: 1px solid #FF0000;
padding: 1em;
background-color: #FFFFFF;
max-width: 56em;
min-width: 45.3em;
}
p {
font-size: .8em;
background-color: #BBBB00;
}
/*]]>*/
</style>
</head><body>
<div id="idname1">
textfluss...</p>
<p style="text-align: right;">...textfluss</p>
</div>
<div id="idname2">
textfluss...</p>
<p style="text-align: right;">...textfluss</p>
</div>
<div id="idname3">
textfluss...</p>
<p style="text-align: right;">...textfluss</p>
</div>
<!--[if lt IE 7]>
<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 min-width / max-width in (em) by hand
*/
var min = 45.3;
var max = 56;
/* set boxModel Values from BODY and IDs (addition)
*/
var boxModelFix = 12; // Pixel
var boxModelRelativ = 2; // EM
/* set all #id
*/
idList[0] = 'idname1';
idList[1] = 'idname2';
idList[2] = 'idname3';
function Element (id) {
this.id = id;
}
for (var cnt=0 ; cnt < idList.length; cnt++) {
idList[cnt] = new Element (idList[cnt]);
}
function checkBodyWidth(handle) {
var em = document.getElementById("em-lenght").offsetWidth
boxModelValues = Math.ceil(em * boxModelRelativ) + boxModelFix;
maximal = Math.ceil(em * max);
minimal = Math.ceil(em * min);
var value = 'auto';
if (document.body.offsetWidth > (maximal + boxModelValues) ) {
value = maximal+'px';
}
if (document.body.offsetWidth <= (minimal + boxModelValues) ) {
value = minimal+'px';
}
for (var i=0 ; i < idList.length; i++) {
document.getElementById(idList[i].id).style.width = value;
}
return;
}
/* Set width value
*/
checkBodyWidth('load/Markup');
/* 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>