zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden IE min/max-width im Standard Modus

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 31.10.2005, 16:24
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard IE min/max-width im Standard Modus

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>
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 31.10.2005, 16:45
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.11.2005, 13:22
Benutzer
neuer user
 
Registriert seit: 30.10.2005
Beiträge: 34
klopfdreh befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 02.11.2005, 23:46
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

@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>
Mit Zitat antworten
  #5 (permalink)  
Alt 03.11.2005, 20:04
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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>
__________________
</ulle>
Mit Zitat antworten
  #6 (permalink)  
Alt 03.11.2005, 22:28
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

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:
Angehängte Grafiken
Dateityp: png ulle.max-width.ff-1.04.png (11,2 KB, 3364x aufgerufen)
Dateityp: png ulle.max-width.ie-5.5.png (14,5 KB, 3354x aufgerufen)
Dateityp: png ulle.max-width.ie-5.01.png (14,6 KB, 3353x aufgerufen)
__________________
toscho.de
Mit Zitat antworten
  #7 (permalink)  
Alt 03.11.2005, 22:57
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
</ulle>
Mit Zitat antworten
  #8 (permalink)  
Alt 03.11.2005, 23:22
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
__________________
toscho.de
Mit Zitat antworten
  #9 (permalink)  
Alt 03.11.2005, 23:26
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 04.11.2005, 06:05
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

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
__________________
toscho.de
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:09 Uhr.