<td> <-- hier ist das Tranpsarente PNG als Hintergrund drin
<div> <-- hier wird der Inhalt per PHP includet und es wurde ein overflow gesetzt
</div>
</td>

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./hintergrund/contentbg.png');

/* Stil Body */		
body		{
			background-image:url(../hintergrund/hintergrund1.jpg);
			background-repeat:no-repeat;
			background-position:center;
			background-attachment:fixed;
			overflow:hidden;
		}
		

/* Stil Tabelle Content */
table#content	{	
			text-align:center; 
			vertical-align:middle; 
			table-layout:fixed;
			overflow:scroll
			border-style:none;
		}
		
		
/* Stil div Content */
div#contenter	{	
			width:590px;
			height:220px;
			overflow:auto;
		}
		
				
/* Stil TD Content */
td#contenter	{	
			text-align:center; 
			vertical-align:top; 
			border-style:solid;
			border-width:thin;
			border-color:#000000;			
          background-repeat:no-repeat;
			background-attachment:fixed;
			background-position:center;
		       filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./hintergrund/startseitebg.png', sizingMethod='crop');
		}
		
tr > td#contenter
		{
			background-image:url(../hintergrund/startseitebg.png);
		}

Problem Nummer 2 ist da schon hartnäckiger. Dave Massy hat in seinem Weblog eine
Problemlösung via Filter, und zwar den AlphaImageLoader (URL:
http://msdn.microsoft.com/library/de...erence/filters
-79- Webstandards anhand einer Schulwebsite – Fachbereichsarbeit
/alphaimageloader.asp),
angeführt(http://blogs.msdn.com/dmassy/archive...5/209428.aspx). Diese
Methode ist die kürzeste, und einfachste Methode die ich auf meiner Suche nach einer
Lösung gefunden habe. Hier werden die jeweiligen png Grafiken einfach mit einer
Codezeile über diesen Filter eingefügt. Diese Codezeile schaut bei der Header Grafik
so aus:

	
Code:
	
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMetho
d="crop", src='images/header.png');
So wird der Filter geladen und dann die Grafik dargestellt. So ergeben sich für alle drei
verwendeten Png-Grafiken folgende Zeilen, die sich ebenfalls in der ie.css befinden:

	
Code:
	
h1{
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMetho
d="crop", src='images/header.png');
}
#box{
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMetho
d="scale", src='images/globalhg.png');
}
#footer{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMetho
d="crop", src='images/footer.png');
}
Wir haben bei allen dreien den Hintergrund zuerst entfernt und dann mit dem Filter
wieder eingefügt. Hier ist der Unterschied zwischen crop und scale zu beachten. Das
Attribut crop gehört zu den Bildern, die nicht wiederholt werden, scale zu denen, die
wiederholt werden sollen.
Dieser Filter ist jedoch eigentlich keine CSS Eigenschaft, und somit nicht valid. Doch da
-80- Webstandards anhand einer Schulwebsite – Fachbereichsarbeit
dieser Code unbedingt notwendig ist, und auch keine weiteren Nachteile mit sich bringt,
verzichten wir auf den validen CSS2 Code in der ie.css. Die beiden anderen Dateien,
sollten allerdings sehr wohl valid sein.
Somit stellt auch der Internet Explorer 6, alles ungefähr gleich dem Mozilla Firefox dar.
Allerdings fällt auf, dass seit dem Einsatz dieses Filters mysteriöserweise kein Link
mehr klickbar ist. Um diesen Fehler zu beseitigen müssen wir die Division box noch
relativ positionieren. Mit dieser Eigenschaft kann der Internet Explorer die box als
wichtiges Attribut wieder in den Vordergrund stellen. Somit ist unsere Website auch auf
diesem Browser voll Einsatz fähig.

	
Code:
	
#box{
position:relative;
}