• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Darstellungsproblem mit IE

C

chrismich

New member
Hallo,

meine website Maria Magdalena Special School - Verein Hilfe zur Selbsthilfe Munyu/Kenia e.V. schaut im FF prima aus, im IE aber verrutschen die Fotos und der Text.
Fotos sollten eigentlich alle rechts angeordnet sein, der Text links.

Hier der html code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="css/style.css" rel="stylesheet" media="screen" />
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<TITLE>Maria Magdalena Special School - Verein Hilfe zur Selbsthilfe Munyu/Kenia e.V.</TITLE>
<LINK REV="made" href="mailto:post@munyu.de">
<META NAME="keywords" CONTENT="Selbsthilfe, Kenia, Kenya, Munyu, Nairobi, Verein, MItarbeiter, Ehrenamt, ehrenamtlich, NGO, Patenschaften, Afrika, Wasser, OASA, Hilfe zur Selbsthilfe, Mitgliedschaft, Helfen, Mitglied, Spende, Behindertenschule, Unterstützung, Projekte, Gatuanyaga, Bewässerung, Kindergärten, Nähschule, Special School, Strom, Hühnerzucht, Regenwasser">
<META NAME="description" CONTENT="Wir unterstützen die Maria Magdalena Special School in ihrem Bestreben, in den nächsten Jahren selbst den laufenden Schulbetrieb finanzieren zu können. Dazu helfen wir beim Aufbau einer Hühnerzucht, beim Bau eines Lagerhauses, bei einem System zur Speicherung von Regenwasser und beim Anschluss an das örtliche Stromnetz.">
<META NAME="author" CONTENT="Verein Hilfe zur Selbsthilfe Munyu/Kenia e.V.">
<META NAME="ROBOTS" CONTENT="ALL">

</head>

<body>

<div id="container">

	<div id="header"></div>

<div id="menu">
<ul class="menu">
  <li><a href="index.html"><span>Home</span></a></li>
  <li><a href="ueberuns.html"><span>Über uns</span></a></li>
  <li><a href="projekte.html" class="active"><span>Projekte</span></a></li>
  <li><a href="service.html"><span>Service</span></a></li>

  <li><a href="kontakt.html"><span>Kontakt</span></a></li>
</ul>
</div>


<div id="navileft">
<div class="uebernavi"><a href="projekte.html">Projekte</a></div>
<ul class="navileft">
  	<li><a class="navileft_active" href="MMSS.html">Maria Magdalena Special School</a>
		<ul class="navileft2">
    	<li><a class="navileft" href="MMSS-patenschaften.html">Patenschaften</a></li>

    	<li><a class="navileft" href="MMSS-wasser.html">Wasser</a></li>
    	<li><a class="navileft" href="MMSS-werkstatt.html">Werkstatt für Behinderte</a></li>
    	<li><a class="navileft" href="MMSS-huehner.html">Hühnerprojekt</a></li>
    	<li><a class="navileft" href="MMSS-stromversorgung.html">Strom</a></li>
    	<li><a class="navileft" href="MMSS-maismuehle.html">Maismühle</a></li>
    	</ul>

    </li>
<li><a class="navileft" href="kindergaerten.html">Kindergärten</a></li>
<li><a class="navileft" href="grundschule.html">Grundschule in Athi</a></li>
<li><a class="navileft" href="naehschule.html">Nähschule</a></li>
<li><a class="navileft" href="gatuanyaga.html">Bewässerung Gatuanyaga</a></li>
<li><a class="navileft" href="bildergalerie-projekte.html">Bildergalerie</a></li>
  </ul>
  </div>
  
  
  

<div id="content">
  <p class="h1">Maria Magdalena Specia School (MMSS)</p>
  <p class="h1">Schule für geistig Behinderte</p>
  <br>
  <div class="picture right" style="width:322px;"> <img src="img/schueler-versammlung-mmss.jpg" width="320" height="206" alt="Schüler der Maria Magdalena Special School"/><br/>Die Schüler/innen versammeln sich.</div>
	<div class="picture right" style="width:322px;"> <img src="img/schueler-versammlung-mmss2.jpg" width="320" height="206" alt="Schüler der Maria Magdalena Special School"/><br/>Schüler/innen der Maria Magdalena Special School.</div>

      <div class="picture right" style="width:322px;"> <img src="img/schueler-stricken.jpg" width="320" height="206" alt="Schüler der Maria Magdalena Special School beim Stricken"/><br/>Schüler/innen beim Stricken.</div>
   <p class="fliesstext">Diese Sonderschule ist ein Internat für 90 Kinder und Jugendliche mit geistiger  Behinderung. Wir unterstützen sie in ihrem Bestreben, in den nächsten Jahren selbst den laufenden Schulbetrieb finanzieren zu können. Dazu helfen wir beim Aufbau einer Hühnerzucht, beim Bau eines Lagerhauses, bei einem System zur Speicherung von Regenwasser und beim Anschluss an das örtliche Stromnetz.</p>
   <p class="fliesstext">Die Schülerinnen und Schüler stammen meist aus armen Familien. Viele Eltern können sich die Schulgebühren nicht leisten. Deshalb vermitteln wir <a href="files/Munyu_Patenschaft.pdf" target="_blank">>Patenschaft</a>en, um auch diesen Kindern und Jugendlichen ihren Schulplatz zu sichern.</p>
   <p class="fliesstext">Bereits abgeschlossen ist die Bereitstellung einer Handpumpe an einem 70 Meter tiefen  Brunnen, aus dem Trinkwasser gefördert wird.</p>
   <p class="fliesstext">Langfristig suchen wir nach Möglichkeiten, den Schulabgängern einen Arbeitsplatz zu bieten.</p>

   <br/><br/>
   <p class="h2">Geschichte</p>
   <p class="fliesstext">Die Schule wurde 1991 durch Pfarrer  Michael Schrode für anfangs 11 Schüler mit geistiger Behinderung gegründet. Die Schule wurde  seit der Gründung durch die Organisation „Terre des Hommes Niederlande“ unterstützt. Im Laufe der Zeit kamen weitere Wohngebäude, Unterrichtsräume und Werkstätten hinzu, so dass heute 90 Schüler unterrichtet werden können. Sie leben und wohnen in sechs Hausgruppen und werden von jeweils zwei Frauen oder Männern  betreut.</p>
   <p class="fliesstext">Aktuell steht die Schule vor einem  großen Umbruch, da die Organisation „Terre des  Hommes Niederlande“ die Unterstützung zu den laufenden Kosten im Dezember 2008 beendete. Der Staat Kenia bezahlt zwar die ausgebildeten Lehrkräfte, der übrige  Schul- und vor allem Internatsbetrieb muss aber weitgehend von der Schule  selbst finanziert werden. Dies geschieht durch Schulgebühren und verschiedene Projekte, sogenannte income generating activities (= Einkommen erwirtschaftende Aktivitäten): <a href="MMSS-huehner.html" target="_self">>Hühnerprojekt </a> <a href="MMSS-maismuehle.html" target="_self">>Maismühle</a></p>
   <p class="fliesstext">Da sich viele Familien schon jetzt kaum das  Schulgeld leisten können und die bisherigen income generating activities noch nicht ausreichend den finanziellen Bedarf decken, vermittelt unser Verein zur Unterstützung der Maria Magdalena Special School (MMSS) seit 2008 auch <a href="MMSS-patenschaften.html" target="_self">>Patenschaften</a>.<br/>In den letzten Jahren half unser Verein bei der Verbesserung der Infrastruktur.</p>

   <p class="fliesstext">Bericht von Hubert Senger über den Open Day am 20.06.08 zum Herunterladen (pdf-Datei): <a href="files/News-from-Kenya_6_05-07-08.pdf" target="_blank">>Kurzbericht 6, vom 05.07.08</a></p>
   <br/>
   <p class="fliesstext"><a href="bildergalerie/mmss/index.htm" target="_blank">>Bildergalerie MMSS allgemein</a></p>
   <p class="fliesstext"><a href="bildergalerie/mmss-paten/index.htm" target="_blank">>Bildergalerie Patenschaften MMSS</a></p>
   <p class="fliesstext"><a href="bildergalerie/mmss-wasser/index.htm" target="_blank">>Bildergalerie Wasserversorgung MMSS</a></p>
  </div>


<div id="footer"><a href="impressum.html">Impressum</a> | ©2009 munyu.com</div>

</div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-926102-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>


und hier das css script
PHP: 
body {
background-color: #f1f1f1;
font-size: 100%;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color:#333333;
line-height: 18px;
padding:0px;
margin:0px;
}
a {color: #6d1d11; text-decoration:none;}
a:visited {color:#6d1d11;}
a:hover {font-size: 100%; color:#2a110c; font-weight:bold; }
a:active { color:#2a110c; }

img.download {vertical-align:middle;}




/* ----------container zentriert das layout-------------- */
#container {
width: 800px;
margin: 20px auto;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
background: #86351b url(img/content.gif) repeat-y;
border: 1px solid #333333;
border-color: value;
}





/* ----------header for logo-------------- */
#header { 
background: #ccc url(img/header.gif) no-repeat;
height: 100px;
}




/* --------Haupt-Menü oben--------------- */
#menu
.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url('img/menu.png') repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:30px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('img/menu.png') 0px -30px no-repeat;}
.menu li a span{line-height:30px; float:left; display:block; padding-right:30px; background:url('img/menu.png') 100% -30px repeat-x;}
.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('img/menu.png') 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li a.active span, .menu li a.active:hover span{background:url('img/menu.png') 100% -90px no-repeat;}





/* ----------------Menü links, Liste-------------------- */

#navileft {
float: left;
width: 200px;
margin: 0px;
padding: 45px 20px 0px 0px;
}

.uebernavi {
text-align: left;
color: #49180a;
font-weight:bold;
font-size: 80%;
padding: 0px 0px 0px 20px;
}
.uebernavi a:link { color:#6d1d11; text-decoration:none;}
.uebernavi a:visited { color:#6d1d11; }
.uebernavi a:hover { font-size: 90%; color:#2a110c; font-weight:bold;}
.uebernavi a:active { color:#2a110c; text-decoration:none; font-weight:bold;}


.navileft ul {
	padding:0;
	padding: 10px 0px 10px 15px;
	}
	
.navileft li {
	display:inline;
	list-style-position:outside;
	}

.navileft li a {
	display:block;
	padding:0.2em 0.1em;
	width:140px;
	font-size:70%;
	text-decoration:none;
	
	}
	
.navileft li a:link { color:#6d1d11; text-decoration:none;}
.navileft li a:visited { color:#6d1d11; }
.navileft li a:hover { 	font-size: 80%; color:#2a110c; font-weight:bold;}
.navileft li a:active { color:#2a110c; text-decoration:none; font-weight:bold;}
.navileft_active { color:#2a110c; text-decoration:none; font-weight:bold;}

.navileft2 li {
	text-decoration:none;
	}

.navileft2 li a {
	display:block;
	padding:0.3em 0.2em;
	width:100px;
	font-size:65%;
	}
	





/* -----------------Inhalt--------------------- */
#content {
background: #86351b url(img/content.gif) repeat-y;
background-color: #ffffff;
padding: 30px 30px 30px 10px;
margin-left: 200px;
margin-right: 0px;
margin-bottom: 80px;
}


p, pre{
padding: 5px 10px;
margin:0px;
}


.h1 {
color: #2a110c;
font-size: 105%;
font-style: bold;
padding: 0px 0px 0px 0px;
line-height: 12px;
padding-top: 10px;
padding-bottom: 10px;
}
.h2 {
color: #333333;
font-size: 100%;
font-style: bold;
padding: 0px 0px 0px 10px;
line-height: 12px;
padding-top: 0px;
padding-bottom: 10px;
}
.h3 {
color: #333333;
font-size: 90%;
font-style: bold;
padding: 0px 0px 0px 10px;
line-height: 12px;
padding-top: 0px;
padding-bottom: 10px;
}
.h4 {
color: #333333;
font-size: 60%;
font-style: bold;
padding: 0px 0px 0px 10px;
line-height: 12px;
padding-top: 0px;
padding-bottom: 10px;
}
.links {
color: #3f1d0e;
font-size: 11px;
font-style: inherit;
padding: 10px 10px 10px 5px;
line-height: 50px;
padding-top: 0px;
padding-bottom: 0px;
} 

.fliesstext {
text-align: left;
color: #2a110c;
font-size: 80%;
}


.picture {
background-color: #F9F9F9;
font: 10px/1.4em Tahoma, sans-serif;
color:#49180a;
text-align:center;
border: thin silver solid;
padding: 1px;
float:right;
margin: 0px 0px 20px 15px;
}

.picture-img { 
border: 1px solid #CCCCCC;
vertical-align:middle; 
margin-bottom: 3px; 
display:block;
}

.picture-right { 
margin: 30px 30px 30px 30px;
padding: 2px; 
float:right; 
}


.text ul
{
list-style-position:outside;
padding: 0px 0px 0px 25px;
margin: 0;
}

.text li
{
list-style-type:circle;
text-align: left;
color: #2a110c;
font-size: 80%;
padding: 0px 0px 3px 0px;
}



.clear {
clear: left;
font-size: 1px;
line-height: 0;
}




/* -----------footer--------------------------- */

#footer {
text-align: center;
font-size: 10px;
clear: both;
margin: 0px;
padding: 0px;
}
#footer a { 
color: #999999; 
}


Danke für eure Hilfe!

Christiane
 
Ach, und in XHTML müssen alle Tags klein geschrieben werden
und leere Tags müssen mit einem Backslash geschlossen werden...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben