tom_1235: div bild problem mit ie und firefox

Hey Leute,

ich hab ein Problem und zwar habe ich eine HTML Seite gebastelt auf der ich Bilder und Texte mithilfe von div's positioniert habe. Da ich an einem Mac arbeite habe ich alles in Safari kontrolliert und danach gebaut (Fehler im nachhinein, werd ich nie wieder tun). Nun bei der überprüfung im Firefox und IE werden bestimmte Bilder nicht angezeigt die in div containern liegen, aber manche schon. Alle bilder sind richtig verlinkt. Im IE gehen alle Bilder nicht und in Firefox nur ein Paar nicht.

Hier ist der Code:

________________________________________

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>-</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--

a:link { color:#4D463F; text-decoration:"none" }
a:visited { color:#4D463F; text-decoration:"none" }
a:active { color:#4D463F; text-decoration:"none" }
a:hover { color:#000000; text-decoration:"none" }

.Fliestext {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #4d463f;
}

#Bild {
position:absolute;
top: 30px;
left: 60px;
}
#starttext {
position:absolute;
top: 30px;
left: 320px;
}
#kuenstler {
position:absolute;
top: 180px;
left: 60px;
}
#az {
position:absolute;
top: 330px;
left: 60px;
}
#pic {
position:absolute;
top: 180px;
left: 320px;
}
#pfeil {
position:absolute;
top: 30px;
left: 960px;
}
#pfeil_reverse {
position:absolute;
top: 30px;
left: 930px;
}
#text {
position:absolute;
top: 180px;
left: 320px;
}
#text2 {
position:absolute;
top: 180px;
left: 625px;
}
#comp1 {
position:absolute;
top: 70px;
left: 320px;
}
#comp2 {
position:absolute;
top: 70px;
left: 625px;
}

-->
</style>
</head>
<body>
<br>
<br>
 <div id="Bild"><img src="img/logo_final.jpg" width="80" height="41" ></div>
<div id="kuenstler">
<table>
  <td>
  <span class="Fliestext">Bert de Beul<br>
 <br>
 Ohne Titel, 1999<br>
 Öl auf Leinwand<br>
 50 x 60 cm
 </span>
 </td>
</table>
</div>
<div id="az"><a href="index_kopie.html" target="_self" style="text-decoration:none" class="Fliestext">A-Z</a></div>

PROBLEM BILDER

<div id="pic"><img src="img/De Beul_7222dpi.jpg"></div>
<div id="pfeil"><a href="de_beul_text.html" target="_self"><img src="img/pfeil.jpg"></a></div>
<div id="pfeil_reverse"><a href="index.html" target="_self"><img src="img/pfeil_reverse.jpg"></a></div>

</body>
</html>

Ich hoffe ihr könnt mir helfen.

Grüße
Tom

  1. Hi,

    Hier ist der Code:

    Das waere an Hand eines Online-Beispiels sicher leichter und schneller nachvollziehbar.

    (Wenn du ein solches bereitstellst, dann bitte validierendes HTML und CSS.)

    MfG ChrisB

  2. Mahlzeit,

    ich hab ein Problem und zwar habe ich eine HTML Seite gebastelt auf der ich Bilder und Texte mithilfe von div's positioniert habe.

    Sagen wir mal so: hauptsächlich hast Du eine ziemlich merkwürdig schmeckende <div>-Suppe geköchelt ... ;-)

    Im IE gehen alle Bilder nicht und in Firefox nur ein Paar nicht.

    Was heißt "sie gehen nicht"?

    <style type="text/css">
    <!--

    HTML-Kommentare haben im CSS-Teil nichts zu suchen.

    <body>
    <br>
    <br>

    Sowas solltest Du besser mit http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=CSS machen, z.B. mit einem entsprechenden http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin@title=Rand.

    #Bild {
    position:absolute;
    top: 30px;
    left: 60px;

    <div id="Bild"><img src="img/logo_final.jpg" width="80" height="41" ></div>

    Warum gibst Du nicht dem <img> selbst direkt die entsprechenden Positionsanweisungen? Das <div> außen herum ist überflüssig.

    Entsprechend bei nahezu allen <div>s, die keine weitere Funktion haben als ein einziges unformatiertes Element zu enthalten.

    MfG,
    EKKi

    --
    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
    1. Sagen wir mal so: hauptsächlich hast Du eine ziemlich merkwürdig schmeckende <div>-Suppe geköchelt ... ;-)

      ungleich des css, kann dafür aber keine absolution erteilt werden

    2. Vielen Dank für die schnelle Antwort !

      Die Bilder gehen indem sie nicht angezeigt werden und nur das Brwoserspezifische "?" oder "x" kommt.

      Wie kann ich die Bilder im <img> tag pixelgenau ausrichten damit ich keine <div>'s benutzen muss ?

      Grüße
      Tom

      1. Hi,

        Die Bilder gehen indem sie nicht angezeigt werden und nur das Brwoserspezifische "?" oder "x" kommt.

        Dann stimmt entweder die Adresse nicht, oder beim Hochladen auf den Server ist was schiefgegangen.

        (Angesichts durchaus unguenstiger Namen wie "img/De Beul_7222dpi.jpg" ist vielleicht ersteres wahrscheinlicher - einheitliche Kleinschreibung hat sich bewaehrt, um Probleme zu vermeiden, und ein Leerzeichen ist in einem URL nicht erlaubt, muesste als korrekterweise als %20 oder + kodiert werden - auch wenn das die Browser idR. selber uebernehmen, wenn der Seitenersteller es verpennt hat.)

        Wie kann ich die Bilder im <img> tag pixelgenau ausrichten damit ich keine <div>'s benutzen muss ?

        Na wie wohl - so, wie du derzeit die Divs positionierst, kannst du auch direkt die Bilder positionieren.

        (Ob so viel absolute Positionierung "gut" ist, das waere wieder eine andere Frage. Normalerweise ist sie es eher nicht - erst recht nicht, wenn sie von Anfaengern eingesetzt wird, die ihre Auswirkungen noch nicht ueberschauen koennen.)

        MfG ChrisB