Begründungen für den GHOST-Scrollbalken im Gecko, bitte an entsprechender Stelle diskutieren.
Diskussion
Mozialla-Zucken wegen Scrollbalken
______________________________
FINAL
Nach weiteren mühsamen Tests habe ich nun folgende Lösung für ein vernüftigen min-width / max-width einer WEBpage, auch im IE kleiner Version 7.
Warum min-width ?
=> Damit die Page auch bei größerem Schriftgrad darstellbar bleibt. Realisiert mit einem min-width im BODY.
Warum max-width ?
=> Damit die Page auch bei sehr breiten Auflösungen des Bildschirms lesbar bleibt, sprich nicht aus dem Ruder läuft. Realisiert mit einem max-width in allen umschliessenden Container ( zb. top, content und footer)
Warum keine fest Breite ?
=> Warum sollte die Page nicht eine verfügbare vernüftige Breite nutzen, bzw. warum sollte die Page evtl. mehr horizontale Scrollbalken erzeugen als notwendig.
Ideal für mich ist ein =>
liquid design
Einstellungen des Scripts:
Zitat:
/* set min-width BODY / max-width ID in (em) by hand
*/
var minWidthBody = 47.3;
var maxWidthIDs = 65;
/* set boxModel Values (relative EM and fix PX) from BODY and IDs (addition)
*/
var boxModelFix = 14; // Pixel
var boxModelRelativ = 2; // EM
/* set all Containing no-wrap-Blocks #id
*/
idList[0] = 'idname1';
idList[1] = 'idname2';
idList[2] = 'idname3';
|
Das gesamte JavaScript-Teil kann natürlich ausgelagert werden.
Hier das TEST-Case:
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: 6px; /* boxModelFix */
background-color: #AAAAAA;
min-width: 47.3em; /* minWidthBody */
}
#idname1,
#idname2,
#idname3 {
margin: 0 auto 1em;
border: 1px solid #FF0000; /* boxModelFix */
padding: 1em; /* boxModelRelativ */
background-color: #FFFFFF;
max-width: 65em; /* maxWidthIDs */
}
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 BODY / max-width ID in (em) by hand
*/
var minWidthBody = 47.3;
var maxWidthIDs = 65;
/* set boxModel Values (relative EM and fix PX) from BODY and IDs (addition)
*/
var boxModelFix = 14; // Pixel
var boxModelRelativ = 2; // EM
/* set all Containing no-wrap-Blocks #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() {
var em = document.getElementById("em-lenght").offsetWidth
boxModelValues = Math.ceil(em * boxModelRelativ) + boxModelFix;
browserBorder = 9;
maximal = Math.ceil(em * maxWidthIDs) + browserBorder;
minimal = Math.ceil(em * minWidthBody) + browserBorder;
var value = 'auto';
if (document.body.offsetWidth > (maximal + boxModelValues) ) {
value = maximal+'px';
}
if (document.body.offsetWidth <= minimal ) {
value = (minimal - boxModelValues)+'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>
Für ein sauberes verhalten des
Browser-Cache (Client-Caching) sollte gesorgt sein.