Frage stellen
Das Problem:
Bei der Ansicht im Internet Explorer v.6 liegen werden die Bilder hinter dem <div> Container angezeigt.
Hingegen der Mozilla Firefox v.2 verzeiht mir meinen Fehler im Code
Frage:
Wo liegt der Fehler im Code und was soll ich verändern das die Bilder bei der Ansicht im IE im Vordergrund angezeigt werden.
zur Lösung:
Mir ist zwar bekannt das .png Bildformate unterumständen nicht angezeigt werden. aber in diesem fall rutscht das ganze in den Hintergrund...
[edit] kann es sein das der IE v. 6 .jpg formate überließt ?
Da ich im Moment nicht weiß woran es genau liegt kopiere ich den CSS code, sowie den html Bereich indem die Bilder dargestellt sind.
Url zur Seite
http://freenet-homepage.de/fpso/seiten/umwelt/kas/kas.html
- Code: Alles auswählen
CSS
html,body {
font-family: Verdena, Helventica, Arial, sans-serif;
font-size: 100.01%;
text-align: center;
background-color: #E4E4E4;
height: 100%
}
.abstand {
margin: 0;
margin-top: 5px;
margin-bottom: 5px;
padding: 0;
}
.abstand2 {
margin: 0;
margin-top: 5px;
padding: 0;
}
#wrapper {
margin: 0 auto;
width: 750px;
text-align: left;
height: 100%;
}
#header {
height: 55px;
background-color:#E4E4E4;
color: #000;
padding: 5px 0px 5px 0px;
border-bottom: 2px solid;
border-top: 2px solid;
border-left: 2px solid;
border-right: 2px solid;
clear: both;
}
#headerklein {
height: 30px;
background-color:#E4E4E4;
color: #000;
padding: 5px 0px 5px 0px;
border-bottom: 2px solid;
border-top: 2px solid;
border-left: 2px solid;
border-right: 2px solid;
clear: both;
}
.headlinks {
width: 300px;
float: left;
}
.headrechts {
padding: 15px 20px 5px 5px;
width: 70px;
float: right;
}
.headrechts2 {
padding: 15px 40px 5px 5px;
width: 70px;
float: right;
}
.headrechtsklein {
padding: 5px 20px 5px 5px;
width: 70px;
float: right;
}
.headrechts2klein {
padding: 5px 20px 5px 5px;
width: 70px;
float: right;
}
/* Content-Bereich */
#content {
background-color: #FFFFFF;
color: #000;
padding: 5px 0px 10px 0px;
border-bottom: 2px solid;
border-top: 2px solid;
border-left: 2px solid;
border-right: 2px solid;
position: relative;
}
.headline {
font-weight:bold;
}
#content .pfad {
font-family: COURIER NEW;
margin: 2px 2px 10px 10px;
font-size: 11px;
}
.left {
padding: 15px;
float: left;
}
.right {
padding: 15px;
float: right;
}
#content .liste {
Background-color: transparent;
color: #000;
}
#content .liste ul {
list-style-position: outside;
list-style-type: circle;
padding: 0px 0px 0px 20px;
}
table#table p {
margin: 1px 1px 1px 1px;
}
#content p, #content li {
font-size: 85%;
line-height: 140%;
margin: 10px 40px 10px 60px;
}
#content h1, #content h2, #content h3 {
margin: 25px 0px 15px 60px;
}
#content h1 {
font-size: 140%;
letter-spacing: 1pt;
background-color: transparent;
color: #3d3d3d;
}
#content h2 {
background-color: transparent;
color: #3d3d3d;
font-size: 115%;
}
#content h3 {
background-color: transparent;
color: #3d3d3d;
font-size: 115%;
}
#content a {
text-decoration: none;
border-bottom: 1px solid #000;
background-color: transparent;
color: #0000FF;
}
#content a:visited {
background-color: transparent;
color: #450000;
}
#content a:hover {
background-color: transparent;
color: #f00;
}
#content a:active {
background-color: transparent;
color: #f00;
}
#content a:focus {
background-color: transparent;
color: #f00;
}
.clear {
clear:both;
}
- Code: Alles auswählen
HTML
<div id="content" class="abstand">
<p class="pfad">Sie befinden sich hier: <a href="http://freenet-homepage.de/fpso/seiten/umwelt/umwelt.html">Umwelt</a>\Die Kastanie im Blumentopf</p>
<h1>Die Kastanie im Blumentopf</h1>
<p>Aus dem Tagebuch einer Roskastanie. </p>
<div class="liste">
<ul>
<li></li>
</ul>
</div>
<p class="headline"><a name="9">28.02.2007 Ein frische Trieb</a></p>
<p></p>
<br>
<p class="headline"><a name="8">09.02.2007 Der Frühling kommt</a></p>
<p></p>
<br>
<p class="headline"><a name="7">Winter 2006-2007 Stillstand</a></p>
<p></p>
<p></p>
<br>
<p class="headline"><a name="6">20.07.2006 Wieder zurück</a></p>
<p class="right"><img src="http://people.freenet.de/fpso/seiten/umwelt/kas/20.07_01.jpeg" alt="seitlich" border="1"></img></p>
<p></p>
<p class="left"> <img src="http://people.freenet.de/fpso/seiten/umwelt/kas/20.07_02.jpeg" weidth="397" height="350" alt="von oben" border="1"></img></p>
<br class="clear" />
<p align="center"><a href="#top">Seitenanfang</a> | <a href="http://people.freenet.de/fpso/seiten/imp/imp.html">Impressum</a></p>
</div>
Dank an dieser Stelle
Ich bemühe mich das Thema zu beobachten. Und nach Kräften zu Antworten, und weitere Informationen zu liefern.
Mit freundlichem Gruß
Oliver
