Website "zerschossen" im IE7

[meickl]

Hey,

ich baue gerade eine Website, welche unter den gängigen Browsern reibungslos funktioniert (laut meines Tests). Die unfertige Seite ist unter zu finden.

Surfe ich die Seite jedoch mit dem IE7 an, so ist das Layout zerschossen und sieht wie folgt aus:



Woran könnte das liegen? Hier ein paar (hoffentlich) relevante Codeschnipsel:

Navigation:

<div id="menu" class="border"  onmouseover="deckkraftaus()" onmouseout="alleweg()">
    <ul class="liste" id="navi">
    <li><a id="start"  onmouseover="leuchten('start');"  onmouseout="weg('start')" href="index.html#start">Start</a></li>
    <li ><a id="osteopathie" onmouseover="leuchten('osteopathie'); schriftan('osteopathie')"  onmouseout="weg('osteopathie'); schriftaus('osteopathie')" href="osteopathie.html">Osteopathie</a></li>

    <li><a id="anwendung" onmouseover="leuchten('anwendung'); schriftan('anwendung')"  onmouseout="weg('anwendung'); schriftaus('anwendung')" href="anwendung.html">Anwendung</a></li>
    <li><a id="behandlung" onmouseover="leuchten('behandlung');schriftan('behandlung');"  onmouseout="weg('behandlung');  schriftaus('behandlung')" href="behandlung">Behandlung</a></li>
    <li><a id="uberuns" onmouseover="leuchten('uberuns');schriftan('uberuns')"  onmouseout="weg('uberuns');  schriftaus('uberuns')" href="uberuns">?ber uns</a></li>
    <li><a id="meinepraxis" onmouseover="leuchten('meinepraxis');schriftan('meinepraxis')"  onmouseout="weg('meinepraxis');  schriftaus('meinepraxis')" href="meinepraxis">Meine Praxis</a></li>
    <li class="letzesel"><a id="kontakt" onmouseover="leuchten('kontakt');schriftan('kontakt')"  onmouseout="weg('kontakt');  schriftaus('kontakt')" href="kontakt">Kontakt</a></li>
    </ul>

    	<!--Javascript aus? Kein Wirbel, Fenster zu klein? Kein wirbel -->
		<script type="text/javascript">
		startseite();
		</script>
        
    	<div id="menuoben"></div>
        <div id="menuunten"></div>
    
    </div> <!--Ende menu-->

Ein paar dazugehörige Css Ausschnitte..

#menu {
	margin-top:2px;
	padding:0px;
	color:rgb(68,93,48);
}


li {
	float:left;
	margin-right:27px; /*Abstand der Listenelemente */
	margin-top:6px; /*Elemte mittig in der Menüleiste positionieren */
}

.liste {
	font-size:16px;
	list-style-type:none;
	text-shadow:#b9d5a1 1px 1px 0px;
	max-width:675px;
	min-width:500px;
	padding:0;
	margin:auto;
	width:670px;
}

#menuoben {
	height:16px;
	background-color:rgb(167,198,111);
}

#menuunten {
	height:14px;
	background-color:rgb(157,191,98);
}

/* menuoben und menuunten sind die zwei Streifen, die den Hintergrund zu den Menüpunkten darstellen

Foto:

<img src="grafik/startbild.jpg" alt="Osteopathische Behandlung" id="bild"/>
     <div id="inhalt">

     
    	<div id="text" onmouseover="deckkraftaus()">
 		<h1>Herzlich willkommen auf meiner Internetseite.</h1>
			<p>Sie k?nnen sich auf meiner Seite ¸ber Osteopathie und meine Praxis informieren. Ich w¸rde mich freuen, wenn ich Ihnen durch meine Seite die Osteopathie etwas n?her bringen kann. 
Gerne stehe ich Ihnen f¸r weitere Fragen ¸ber Mail oder telefonisch zur Verf¸gung. Die hierzu ben?tigten Informationen finden Sie im oberen Men¸ unter dem Punkt "Kontakt".
<br /> <br />Unsere Behandlungsschwerpunkte in der Osteopathie sind S?uglinge, Kinder und Erwachsene.nsere Behandlungsschwerpunkte in der Osteopathie sind S?uglinge, Kinder und Erwachsene.></p>

    
    	</div> <!--Ende text-->
    </div> <!--Ende inhalt-->

Css:

.bild {
	width:275px;
	height:176px;
	float:right;
	padding:0px;
	text-align:right;
	margin:15px;
	margin-right:1px;
	margin-top:50px;
}

#text {
	line-height:1.3em;
	position:relative;
	margin:auto;
	margin-top:0px;/* damit der Abstand bei verkleinern der Seite geringer wird. Auto setzt es mittig*/
	padding-right:3%; /*damit der TExt nicht mittig und der rechte Abstand größer ist **/
	max-width:660px;
	min-width:500px;
	text-align: left;
	padding-left:15px;
}

So, hoffe das genügt. Danke schonmal im Voraus

Beste Grüße
meickl

 

[cebito]

AW: Website "zerschossen" im IE7

Die Suche hätte sicher weitergeholfen: Setze als erstes mal die vom Browser vorgegebenen Abstände auf 0, dann kannst du nochmal schauen...

In die css einfügen:

* {
margin:0;
padding:0;
}

 

[Samuelll]

AW: Website "zerschossen" im IE7

Da es nicht zu deiner Frage gehört, ist es wohl eher Offtopic.
Ich habe trotzdem noch einen Tip :

Eine gepunktete Linie als Trenner, brauchst du nicht darzustellen, in dem du die Punkte im Code hinterlegst.

Viel einfacher ist CSS : border : 1px dotted #FFF;

Oder, da du eh ein Bild für den Hintergrund nimmst, füge die Punkte dort ein.

 

[FreddyX2]

AW: Website "zerschossen" im IE7

Hat zwar garnichts mit Deinem Problem zu tun, aber les Dir bitte folgenden Absatz durch.

Unsere Behandlungsschwerpunkte in der Osteopathie sind Säuglinge, Kinder und Erwachsene.nsere Behandlungsschwerpunkte in der Osteopathie sind Säuglinge, Kinder und Erwachsene.>

So soll der da sicher nicht stehen, oder?

 

[ans316]

AW: Website "zerschossen" im IE7

Scheint mir das allseits bekannte Problem mit dem Box-Modell zu sein.
Der InterneExplorer geht mit den px-Maßen einfach anders um, brauchst Du ein IE-Hack (z.B. _height).

Warum setzt Du die Listenelemente noch mal in ein Div?
Listenelemnte sind doch Blockelemte, kannst Dir das Div sparen und die Eigenschafften dem Listenelement zuweißen ;o)

Übrigens im IE 6 ist es noch krasser, der kennt kein min und max bei den höhen oder breiten (

 

[meickl]

AW: Website "zerschossen" im IE7

Danke schön für die Antworten.

Leider bewirkt

* {
margin:0;
padding:0;
}

nichts

Die Idee mit dem dotted border ist natürlich sehr gut. Da hab ich gar nicht dran gedacht...
Der Text auf der Startseite ist sozusagen noch PLatzhalter und wird komplett überarbeitet.

Zurück zum Thema:
Weiß leider nicht, welche Eigenschaft von welchem Element ich genau ändern soll... Scheiß IE. Notfalls lass ich die Bilder im IE7 weg und konstruiere ein Alternativmenü für diesen Browser. Für den IE6 zu optimieren hab ich aufgegeben. Irgendwann muss man diverse Browser als tot erklären, auch wenn noch ein paar risikofreudige Menschen damit unterwegs sein sollten...

 

[cebito]

AW: Website "zerschossen" im IE7

Leider bewirkt

* {
margin:0;
padding:0;
}

nichts

Trotzdem immer gut drin zu haben, so lösen sich die meisten Darstellungsprobleme. Frag mich jedoch, wozu dein #text eine min- und max-width braucht, zumal dein Layout statisch ist. Dein Bild hast du rechts gefloatet, der Text nimmt sich den restlichen Platz doch automatisch (abzüglich der margins und paddings). Dann gibts auch keine Verschiebung, weil irgendein Browser diese Werte nicht kennt oder falsch interpretiert. Wenn du dennoch dabei bleiben willst -> siehe ans316 - schau mal nach IE_Hacks.

 

[Llynyania]

AW: Website "zerschossen" im IE7

Das Bild befindet sich außerhalb des Textes. Ich würde es eher in den Text-div schieben und danach die Breite anpassen. Denn so liegen 2 Elemente übereinander und der Text-div ist reichlich breit.

Alternativ formatiert man innerhalb des Text-divs den Bilderfloat neu - so bleibt die Textbreite und wirkt sich nicht auf die Folgeseiten aus.