Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Website "zerschossen" im IE7“

meickl

fauler *****user

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:
Code:
<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..
Code:
#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:
Code:
<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:
Code:
.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

undefined

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:
Code:
* {
margin:0;
padding:0;
}
 

Samuelll

Aktives Mitglied

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.
 
Zuletzt bearbeitet:

FreddyX2

Aktives Mitglied

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

Nicht mehr ganz neu hier

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 :eek:(
 

meickl

fauler *****user

AW: Website "zerschossen" im IE7

Danke schön für die Antworten.

Leider bewirkt
Code:
* {
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

undefined

AW: Website "zerschossen" im IE7

Leider bewirkt
Code:
* {
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

Benutzertitel aberkannt

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.158
Beiträge
2.581.880
Mitglieder
67.225
Neuestes Mitglied
Petra
Oben