IE min/max-width im Standard Modus

ulle · #1 (**permalink**) 31.10.2005, 15:24

Hallo,

das leidige Thema IE

Diesem eine max-width über mit Hilfe von Expression (JavaScript innerhalb von CSS) und Conditional Comment beizubringen ist keine große Sache. Abgesehen davon dass der IE sich nur die Pixel-Breite des Viewports auslesen läßt, also nicht etwa andere Einheiten wie "em", aber gut - wir nehmen ja was geht.

Code:

<!--[if lt IE 7]> 
   <style type="text/css"> 

#id1,
#id2	{ 
		width:expression(document.body.clientWidth > 900 ? "54em": "auto" );
		}

          
   </style> 
<![endif]-->

min-width dagegen läßt sich leider nicht so trivial einstellen. Da müssen schon schwerere Geschütze an den Start.
"IE :hover/:focus auf alle Elemente (expression)" konsequent weitergedacht bedeutet zwar einen gehbaren Lösungsansatz, bedarf aber auch einem Event (leider).

Code:

<!--[if lt IE 7]> 
   <style type="text/css"> 

body     { 
         ulle:  expression( 
				this.onmouseover =  
				new Function ("if (document.body.clientWidth < 760) { this.className = 'body-min-width'; }")
         		); 
         }    

  </style> 
<![endif]-->

Als einziger verbleibender Event für den BODY bleibt wohl nur onmouseover-Event, da die Mouse wohl meist im Fenster steht

Dies ist aber eher SUB-optimal, onload-Event wäre wohl optimal, leider funktioniert dieser nicht in der "expression" Konfiguration. Somit ist zusätzlich "echtes" JavaScript für dieses Addon wohl vorausgesetzt.

Trotzdem poste ich mal den Ansatz, evtl. hat ja jemand noch eine weitere Idee

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;
			
			min-width: 46em;
			}

.body-min-width
			{
			width: 46em;
			}




#id1,
#id2		{
			margin: 1em auto;
			border: 1px solid #000000;
			padding: 1em;
			
			background-color: #FFFFFF;
			
			max-width: 54em;
			}
			
		
			
			

/*]]>*/ 
</style> 

<!--[if lt IE 7]> 
   <style type="text/css"> 

body     { 
         ulle:  expression( 
				this.onmouseover =  
				new Function ("if (document.body.clientWidth < 760) { this.className = 'body-min-width'; }")
         		); 
         }    


#id1,
#id2	{ 
		width:expression(document.body.clientWidth > 900 ? "54em": "auto" );
		}

          
   </style> 
<![endif]--> 


</head><body>

<div id="id1">
	textfluss......
</div>

<div id="id2">
	link-test
</div>

</body></html>

heiko_rs · #2 (**permalink**) 31.10.2005, 15:45

Kein direkter Beitrag zu Deinem Thema, sondern nur ein kleiner Hinweis:

Statt [if lt IE 7] reicht auch einfach [if IE]

Aber bevor man nicht wirklich weiß, was der IE7 bringt, ist es natürlich nicht verkehrt, diesen durch Deine Variante erstmal außenvor zu lassen

(das ginge übrigens auch durch [if lte IE 6], wobei das "e" für "equal" steht, so daß die Comment-Aussage "lower than/equal" ist, also "kleiner/gleich").

Schöne Grüße,
Heiko

klopfdreh · #3 (**permalink**) 02.11.2005, 12:22

Hallo,

ich habe eine schicke Lösung für dich, welche min-width beim IE simuliert ohne Javascript zu verwenden.

http://www.cssplay.co.uk/boxes/minwidth.html

Es werden die Themen min-width im Quirks und Normalen Modus behandelt.

Dein Problem wurde übrigens von mir hier schon zur Frage gestellt und beantwortet

ulle · #4 (**permalink**) 02.11.2005, 22:46

@heiko_rs - ja ist mir bekannt, trotzdem Danke

@klopfdreh - es soll aber im Standard Modus funktionieren!

_______________

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

Wichtig -> es soll ein RESIZE des Window und der Schriftgrad behandelt werden. Es gibt bestimmt eine Menge Scripts die dies können, aber einlesen, einfach benutzen wollte ich nicht. Leider bin ich mit JavaScript ungefähr genauso im Dialog wie mit einem Japaner

. Ich würde es auch gar nicht einsetzen, aber ich bin die Erklärungen an die IE-Nutzer leid.

Nach 2 Tagen "try and error" habe ich folgende Lösung für umschliessende Container. Diese sind mit der Einheit EM definiert um den Schriftgrad zu berücksichtigen. In der Annahme das sehschwache Nutzer auch einen großeren Bildschirm benutzen, aber nicht müssen (scrollbalken).

Um den Schriftgrad zu erkennen habe ich einen Container als Referenz zusätzlich eingesetzt, dieser ist 1em hoch bzw. breit und wird ins Nirvana verschoben. Somit ist der Bezug von einem EM in Pixel gegeben und die Berechnung für die Eigenschaften min/max-width möglich. Gleichzeitig wird dieser zusätzlich Container auf RESIZE überwacht, das wäre eine Schriftgradveränderung, und reagiert.

Die berechneten Werte werden beim Laden des Dokuments gesetzt.

Ich habe meinen Develop-Alert noch im Script gelassen, somit ist ein einfacheres Nachvollziehen bzw. Testen möglich. Evtl. gibt es ja jemand der JavaScript besser beherrscht und das Script verbesseren kann. Das gesamte "Teil" wird am Ende des Dokuments eingesetzt, Container-ID und min/max-Werte sind einzustellen:

Zitat:

/* 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';

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);
	
	beginbody = document.body.offsetWidth;
	
	var value = 'auto';
	
	if (document.body.offsetWidth > (maximal + boxModelValues) ) {
		value = maximal+'px';
	}
	maxv = value;
	
	if (document.body.offsetWidth <= (minimal + boxModelValues) ) {
		value = minimal+'px';
	}
	minv = value;
	
	for (var i=0 ; i < idList.length; i++) {
		document.getElementById(idList[i].id).style.width = value;
	}

	alert ( 'Handle: '		+ handle +'\n'
			+'- - - - - - - - - - -\n'		
			+'body(begin): '	+ beginbody +'\n'	
			+'em: '		+ em +'\n'
			+'- - - - - - - - - - -\n'		
			+'maximal: '+ (maximal + boxModelValues) + ' / '+max+'em ' + '+ boxModel\n'
			+'value(max): '	+ maxv +'\n'
			+'- - - - - - - - - - -\n'		
			+'minimal: '+ (minimal + boxModelValues) + ' / '+min+'em ' + '+ boxModel\n'
			+'value(min): '	+ minv +'\n'
			);

	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>

ulle · #5 (**permalink**) 03.11.2005, 19:04

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>

toscho · #6 (**permalink**) 03.11.2005, 21:28

Ulle, ich gratuliere dir!
Läuft sehr gut im IE 5.01 und im IE 5.5, nur Firefox 1.04 zickt rum: Der baut einen ebenso sinnlosen wie verwirrenden Scrollbalken ein und zeichnet nach dem Ändern der Fenstergröße komische Fragmente übers Bild (im Screenshot ein weißer Streifen), die im Ernstfall auf Lesetext liegen können…

Anbei die Screenshots:

ulle · #7 (**permalink**) 03.11.2005, 21:57

Hallo toscho,

danke für Deine Mühe.

Zitat:

Zitat von toscho

Ulle, ich gratuliere dir!

Danke, nur so Heldenhaft finde ich das Script gar nicht. Mit Stolz erfüllt mich nur der Geistes Blitz einen Referenz-Container für den EM Value einzusetzen und diesen mit 'onresize' zu überwachen.

Zitat:

Zitat von toscho

Läuft sehr gut im IE 5.01 und im IE 5.5,

Das ist doch mal ein Wort.

Zitat:

Zitat von toscho

nur Firefox 1.04 zickt rum: Der baut einen ebenso sinnlosen wie verwirrenden Scrollbalken ein und zeichnet nach dem Ändern der Fenstergröße komische Fragmente übers Bild (im Screenshot ein weißer Streifen), die im Ernstfall auf Lesetext liegen können…

Und ich dachte die Conditional Comments sind eine saubere Sache. Verstehen kann ich es jetzt nicht, weil im CODE ( XHTML / CSS ) ist ja absolut nichts schlimmes und auch der Firefox 1.04 sollte es behandeln wie einen normalen Kommentar. Vielleicht beinhaltet die CC Zeichenfolgen die den Firefox verwirren.

Ideal für oben gezeigten Anwendungsfall wäre wohl die min-width im BODY festgelegen und nur die max-width Values in den zentrierten Containern. Zuerst hatte ich auch nur mit dem BODY gestestet, das gab aber Probleme mit der Event-Erkennung des RESIZE, da ja der BODY dann eine definierte Größe hatte. Und die 'onresize' Überwachung in den BODY aufnehmen wollte ich auf keinen Fall, sollte ja nur ein Addon sein.

Die RESIZE-Überwachung für den Viewport habe ich dann doch bei Selfhtml gefunden.

Ob die Methode [window.history.go(0);] wirklich in jedem Fall aus dem Browser-Cache einen Reload zieht habe ich auch noch nicht ausgetestet, aber ich gehe davon aus dass diese wie der Zurück-Button des Browser funktioniert.

Ich werde wohl noch eine Verbesserung versuchen.

toscho · #8 (**permalink**) 03.11.2005, 22:22

Ich habe jetzt mal nachgeforscht: Schuld an dem weißen Streifen sind die 0.8em für P. Die kollidieren mit meiner Mindestschriftgröße von 14px, was in anderen Browsern kein Problem darstellt, bei Mozilla aber offenbar zu Umrechnungsfehlern führt. Entferne ich die Mindestgröße oder die Verkleinerung aus dem Testcase, verschwindet auch der Streifen.

Hat also nichts mit dem eigentlichen Ansatz zu tun.

ulle · #9 (**permalink**) 03.11.2005, 22:26

Zitat:

Zitat von toscho

Hat also nichts mit dem eigentlichen Ansatz zu tun.

Na, da bin ich ja froh. Mit anderen Browsern als mit dem IE wollte ich zu diesem Thema nicht auch noch kämpfen.

DANKE

toscho · #10 (**permalink**) 04.11.2005, 05:05

Oh, und nur als Hinweis für Mitleser: Der Geisterbalken im FF kommt daher:

Code:

html[xmlns]   { 
         height : 100%; 
         padding-bottom : .005em; 
         }

Das »padding« wird zu den 100% addiert und sorgt so für den zwar sichtbaren aber funktionslosen Scrollbalken. Nicht machen, niemals!

Hat also auch nichts mit dem eigentlichen Problem zu tun.

Gruß
Thomas

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 15:46
Verschiebungen bei größerem Bildschirm	seelefant	CSS	4	28.07.2014 15:43
Media Querys - Layout geht wird über den Displayrand angezeigt	DarkNemesis84	CSS	9	05.05.2013 22:00
CSS von Plugin beisst!	expand	CSS	0	28.09.2012 17:44
Mozilla zeigt DIV zu oft an	cracki	CSS	6	09.03.2008 15:22