Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 31.10.2005, 16:24
ulle ulle ist offline
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