XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Internet Explorer verschluckt Grafik (http://xhtmlforum.de/showthread.php?t=46713)

Webentwickler Eric 05.07.2007 16:40

Internet Explorer verschluckt Grafik
 
Hallo,
im neuen Design meiner Seite (www.eric.arel-online.de/eric), habe ich zwei Textabsätze untereinander.
Vor jedem Absatz floatet eine Grafik. Im Firefox und Opera gibts keine Probleme aber der IE zeigt dir untere Grafik (die vor dem zweiten Absatz stehen sollte) nicht an. ER lädt die Grafik, diese verschwindet aber ganz schnell nach dem laden.
Das komische ist, dass der Alternativtext des Bildes angezeigt wird, das Bild selbst aber nicht.

Code:

body {
width:760px;
height:100%;
margin:0px auto;
}
.hauptteil {
height:100%;
width:510px;
float:left;
}
.kasten {
margin-top:150px;
width:240px;
float:right;
}

/* kasten */
.kasten .kastenoben {
height:30px;
}
.kastenmitte {
margin:0px 20px;
}
.kastenende {
height:30px;
}

/* hauptteil */
.oben {
height:150px;
width:510px;
margin:0px;
padding:0px;
}
.inhalt {
margin:0px;
padding:0px 20px;
}
.unten {
clear:left;
height:100px;
margin-bottom:0px;
padding:50px 20px 0px;
}

/* Newstext */
.artikel {
clear:left;
margin:30px 10px;
padding:0px;
}
.artikel p {
margin:0px;
font-family:Verdana, sans-serif;
font-size:0.7em;
line-height:1.5;
color:#4f4f4f;
}
.artikel img {
float:left;
padding:10px;
margin:10px;
margin-left:0px;
margin-top:0px;
border-style:solid;
border-width:1px;
border-color:#3cb900;
}

h1 {
margin:0px;
padding:0px;
font-size:1.3em;
font-family:'Times New Roman';
font-style:italic;
font-weight:100;
}
h1 sup {
font-size:0.5em;
font-style:normal;
font-weight:100;
font-family:Verdana, Arial, sans-serif;
margin-left:5px;
background-color:#3cb900;
color:#4f4f4f;
}

/* Navigation */
.nav a {
height:30px;
width:110px;
text-align:center;
float:left;
padding-top:10px;
margin:0px 1px 20px;
}
.nav a:hover {
color:#3cb900;
text-decoration:underline;
}
.nav {
margin:0px 10px;
}

Der Quelltext:
Code:

<body>
<div class="hauptteil">

<div class="oben">
</div>

<div class="inhalt">
<div class="nav">
<a href="test.html">Neuigkeiten</a>
<a href="test.html">Leben</a>
<a href="test.html">Misc</a>
<a href="test.html">Rubrik</a>
</div>
<div class="artikel">
<img src="images/birne1.gif" height="200px" width="200px" alt="kein Bild" />
<h1>Adobe Photoshop<sup>8. Juni 2007</sup></h1>
<p>
Super! Ich bin endlich im Besitz von Photoshop! Was ich damit zuerst gemacht habe, sehen Sie links.
Okay, nicht sehr sinnvoll, aber immerhin mein erstes Photoshop Projekt! Ich finde, es sieht gar nicht so schlecht aus - für den Anfang jedenfalls.
</p>
</div>
<div class="artikel">
<img src="images/birne1.gif" height="100px" width="100px" alt="test" />
<h1>Überschrift</h1>
<p>
Hier soll ein Absatz erscheinen, der rechts vom Bild steht. Außerdem soll das Bild auf der linken Seite genau bündig mit diesem Absatz erscheinen (an der Oberseite). Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>
</div>
</div>
<div class="unten">Hier stehen die Partner, Validierung und das Copyright. <a href="http://validator.w3.org/check?uri=http%3A%2F%2Feric.arel-online.de%2Feric%2F">Validierung</a></div>

</div>


<div class="kasten">
<div class="kastenoben"></div>
<div class="kastenmitte">
Ich heiße Sie recht herzlich Willkommen auf meiner Homepage!<br />
Mein Name ist Eric Ebel und ich hoffe, Sie werden den Aufenthalt auf meiner Webseite genießen können. Wenn Ihnen mein Internetauftritt gefällt, können Sie diesen gerne an Ihre Freunde
weiterempfehlen.
<form action="/eric/index.php" method="get">
<fieldset>
<legend>Aussehen ändern</legend>
<select name="style">
<option value="standard" selected="selected">--- Bitte wählen ---</option>
<option value="standard">Standard</option>
<!--[...usw. ...]-->
</select>
<input class="field" type="submit" value="Switch" />
</fieldset>
</form>
Weiterführender Text
</div>
<div class="kastenende"></div>
</div>


</body>


ArcVieh 05.07.2007 21:55

Gib h1 mal height:1%;.

Webentwickler Eric 06.07.2007 07:57

Vielen Dank. Jetzt funktioniert es. Kannst du mir bitte erklären, wieso ich h1 erst height:1% geben muss?
Ich verstehe in diesem Punkt den IE nicht.
Ich bitte um, Erklärung.

RoToRa 06.07.2007 09:35

Über hasLayout — das Konzept des hasLayout im IE/Win | Deutsche Übersetzung

Robin

Webentwickler Eric 06.07.2007 15:53

Vielen Dank. Die Seite hat mir sehr weitergeholfen.


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:57 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023