IE min/max-width im Standard Modus - Seite 2

ulle · #11 (**permalink**) 04.11.2005, 22:11

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.

ulle · #12 (**permalink**) 06.11.2005, 19:09

Hinweis:

Ein Kröte gibt es mit dem Einsatz des JavaScript zu schlucken. Da die Breite der umschliessenden Container evtl. durch das Script definiert werden, je nach Breite des Viewport und eingestelltem Schriftgrad, dies nach einlesen eines Print-CSS, so hat dies natürlich Auswirkung auf das Print-Layout. Im zweifel ist es zu Breit und der Text wird abgeschnitten. Sieht man übrigens sehr oft auf schlecht gemachten WEBpages, die kein extra Print-Style verwenden und Fixe Breiten jenseits der DinA4 Breite anlegen

Der beschriebene Effekt tritt natürlich bei allen nachträglich über JS bzw. Expression definierten Breiten auf. Es ist also keine Problem des vorgestellten IE-Addon.

Siehe auch max-width über Expression und die daraus entstehenden Probleme.

Maßnahme:

Alle Elemente die im Druckstyle nicht ausgeschlossen werden, also evtl. ganze Container innerhalb der "Wrapper" oder nur Element-Typen wie Absatz (p) oder Überschriften (h), einfach mit einer definierten Breite versehen.

Ich benutze dazu eine width: 170mm;, diese entspricht ca. einem Standard Hochformat im IE (also ohne veränderte Abstände zum Papierrand).

Das extra Print-Style für den IE natürlich auch mit CC vor guten Browsern verstecken

________________

Falls jemand dieses JavaScript (Addon) für den IE verwendet und negative Erfahrungen bei der Darstellung der Sites bekommt, so möge er diese doch hier mitteilen.

ulle · #13 (**permalink**) 07.12.2005, 23:58

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>

ulle · #14 (**permalink**) 10.01.2006, 17:09

Update -> Script

Code:

<!--[if lte IE 6]> 
<div onresize="location.href = location.href;" id="em-lenght" style="width: 1em; height: 1em; position:absolute; top: -1000px; left: -1000px;"></div> 

:
:
:
:


function newLoad () { 
	if (windowSizeSave != windowSize() ) {
   
		//window.history.go(0);
	  
		// gesicherter RELOAD aus dem Browser Cache
		location.href = location.href;
		 
	} 
}

location.href = location.href;

Bewirkt einen Neuaufbau der angezeigten Page nur aus dem Browser-Cache, sofern die Page eine "statische" Dateiendung besitzt (.htm, .html).
Bei Endungen die auf dynamische WEBpages (z.B. .php) schliessen lassen ist der IE bisher nicht davon abzubringen noch mal den WEBserver um Rat zu fragen.

window.history.go(0);

Bewirkt unter Umständen, d.h. bei Dokumenten mit E-Tag im Datei-Header, ein Reload vom WEB-Server. Es wird zwar nur ein "304" übertragen, trotzdem ist durch den Zeitfaktor ein "Flickern" sichtbar.

Code:

127.0.0.1 - - [10/Jan/2006:15:56:53 +0100] "GET /_test-case.htm HTTP/1.1" 304 -

ulle · #15 (**permalink**) 20.01.2006, 12:42

liquid-Design...

Artikel zum Thema:
bs-markup/BLOG => Herausforderung elastische Layouts

______

Nachdem ich weitere Probleme mühsam lösen mußte und das ganze eine riesen Rechnerei mit dem bisherigen Ansatz ist, habe ich mich nun mit einem weiteren umschliessenden Container beholfen.

Dieser erlaubt eine min-max-Width Berechnung und Festlegung, für den IE umgerechnet von EM (Schriftgrad) in Pixel, während die Page aufgebaut wird.

Dieser gezeigte CODE hat folgende Feature für den IE nachgebildet]][*]Print-Style in Format "portrait"; [url=http][/list]

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" id="fitness-in-motion"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>wrap</title> 

<style type="text/css" media="screen">    
/*<![CDATA[*/ 

*			{
			margin: 0;
			padding: 0;
			}

body		{
			font-size: 100.01%;
			}
			
/* --------------------------------------------------------
 * [#wrap]min-max-width
 *
 * margin- , padding- , border-left/right
 * in [#wrap] nicht moeglich wegen 
 * JavaScript-Function checkBodyWidth(); !!
 */

#wrap		{
			/* min-width => 47.75em ~ 764px 
			 */
			min-width: 47.75em; /* var minWidth = 47.75; siehe JavaScript */
			max-width: 65em;	/* var maxWidth = 65; siehe JavaScript */

			/* zentriert
			 */
			margin: 0 auto;
			
			/* TEST 
			 * symmetrie verschoben!!
			 */
			padding: 35px 0 6px 0;

			}

#site		{ 
			/* TEST 
			 * symmetrie verschoben!!
			 */
			margin: 0 14px 0 69px;
			}
/* --------------------------------------------------------
 * END /min-max-width  
 */


 
/* --------------------------------------------------------
 * #site  
 * Hauptcontainer umschliesst alle Inhalte
 * Ausnahme: #orga-Menu und #signatur
 */

#site 		{ 
			/* initial Containing Block
			 */
			position: relative;
			
			min-height: 28em;		
			/* min-height workaround IE
			 */
			height: auto !important;
			height: 28em;

			border:	 1px solid #000000;  
			padding: 1em;
			
			background-color: #FFFFFF; 
			}

h1,p		{
			padding-bottom: 1.5em;
			}				

/*]]>*/ 
</style> 

<style type="text/css" media="print">
/*<![CDATA[*/

/* --------------------------------------------------------
 * @print [#wrap]-Inhalt für IE auf 17cm (portrait)
 */
			
#wrap * 	{
			width: auto !important;
			/* IE wegen #wrap [width]-SCRIPT
			 */
			width: 170mm;
			
			float: none !important;
			} 

#wrap * *	{
			width: auto !important;
			/* IE wegen #wrap [width]-SCRIPT
			 */
			width: auto;
			} 

/* --------------------------------------------------------
 * END @print 
 */
 
/*]]>*/
</style> 

</head><body><div id="wrap" style="background-color: #2299FF;">
<!--[if lte IE 6]>
<div onresize="location.href = location.href;" id="empx" style="width: 1em; position: absolute; top: -1000px; left: -1000px;"></div> 
<script type="text/javascript">

/* [#wrap] min/max-width in EM
 *
 * by ulle
 */
var minWidth = 47.75; 
var maxWidth = 65;

function checkBodyWidth() {  

	var empx =  document.all.empx.offsetWidth;	 
	var viewport =  document.body.offsetWidth; 
	
	var IEcorrection = 4; 	// Pixel weniger Platz zu Firefox
	
	minWidth = Math.ceil(empx * minWidth) - IEcorrection;
	maxWidth = Math.ceil(empx * maxWidth); 
	
	var value = "auto";
	
	if ( viewport < minWidth ) { value = minWidth+"px"; } 
	if ( viewport > maxWidth ) { value = maxWidth+"px"; } 
	
	document.all.wrap.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() ) {
		location.href = location.href;
	} 
} 

if (!window.windowSizeSave && document.body.offsetWidth) { 
  window.onresize = newLoad; 
  windowSizeSave = windowSize(); 
} 
</script>
<![endif]-->




<div id="site">
	<h1>liquid-Design</h1>
	

Reduktion auf eine CODE-Zeile mit ausgelagerten JavaScript (Ladezeit/Übersicht)</p>
	<code>&lt;/head>&lt;body>&lt;div id="wrap">&lt;!--[if lte IE 6]>&lt;div onresize="location.href = location.href;" id="empx" style="width: 1em; position:absolute; top: -1000px; left: -1000px;">&lt;/div>&lt;script language="JavaScript" src="cc_ie_minmax_width.js" type="text/javascript">&lt;/script>&lt;![endif]--></code>
</div> 




</div></body></html>

Carolin · #16 (**permalink**) 26.11.2007, 17:21

Auch wenn das Thema 1. schon alt ist und 2. auch schon ein Link zu dieser Seite vorhanden ist, würde ich doch gerne noch darauf verweisen, eben weil sich dieser Artikel in der Knowledge Base befindet und hier sicherlich Leute auch aktuell nach Tipps suchen.

Für eine variable Seitenbreite, die auch im IE (Standardmodus) funktioniert.

stu nicholls | CSS PLaY | min width layout

newcoder · #17 (**permalink**) 06.02.2011, 13:06

Zitat:

Zitat von ulle

Folgende Überlegungen:
- min/max-width für den IE kleiner Version 7 soll realisiert werden
- mit Conditional Comments kann ich ja alles verstecken
- Expression ist JavaScript (leider nur einzeilig)
- Richtiges JavaScript

- Okay ist ja ein Addon

Etwas Ähnliches habe ich auch hier bei ProjectSeven gefunden, vielleicht hilft es ja bei der einen oder anderen Anwendung.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit CSS Menü	FuFi	CSS	1	05.01.2015 16:46
Verschiebungen bei größerem Bildschirm	seelefant	CSS	4	28.07.2014 16:43
Media Querys - Layout geht wird über den Displayrand angezeigt	DarkNemesis84	CSS	9	05.05.2013 23:00
CSS von Plugin beisst!	expand	CSS	0	28.09.2012 18:44
Mozilla zeigt DIV zu oft an	cracki	CSS	6	09.03.2008 16:22