✔ Ausrichtung der Bilder funktioniert im ie nicht

Status
Nicht offen für weitere Antworten.
C

Coldfist

Mitglied
Moin!
Hab diesen InternetExplorer satt!

Ich bereite gerade mit einem Freund einen Produktkatalog vor. Jetzt habe ich alles fertig und eine Änderung steht an.

Bitte hier klicken

Der Internet Explorer zeigt die kleinen Bilder unten ziemlich weit unten an, während mein Opera diese - So sollte es auch sein - direkt unter dem großen Bild anzeigt.

Das Problem ist erst entstanden, als ich die Listentags bei der Produktbeschreibung eingegeben hab. Egal was ich aber mit der Tabelle oder mit den Tags mache, ich bekomme die Bilder im IE nicht hochgeschoben.

Ich wäre euch wirklich dankbar, wenn ihr mir zeigen könntet wo das Problem liegt...

Ich musste auch schon <br><br> in <p> umwandeln weil der Ie die br's nicht zählen kann....
I hate Ie!!
 
Hi,
der Quelltext ist mehr als suboptimal...ich würde das nochmal komplett überarbeiten.
Alles andere wäre Gepfusche in meinen Augen.

HTML: 
<tr bgcolor="#66CCFF">
nicht gut, gehört in <td> sowas

HTML: 
<div align="center"><span class="style1"><br>
          <strong>Feuersichere Dokumentenkassette </strong><br>
              <br>
    </span></div>
brrrrrrr, mir stellen sich die Haare auf!

HTML: 
 </li><p>
      <li>f&uuml;r wichtige wie z.B. Policen, Wertpapiere, Bargeld etc.
      </li><p>
was willst du damit bezwecken?

Um nur ein paar Beispiele zu nennen.

Grüße
pk
 
Zuletzt bearbeitet:
Habe mal den HTML-Quelltext überarbeitet (aufgeräumt, validiert) und das vorhandene Stylesheet erweitert:

Code: 
ul {
list-style-type: square;
}

li {
margin-top: 5px;
}
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Produktkatalog 2006 - Dokumentenkassetten</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!-- Original:  Jenny Blewitt (webmaster@webdesignsdirect.com) -->
<!-- Web Site:  http://www.webdesignsdirect.com -->

<!-- Begin
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);

function doPic(imgName) {
if (ns3up || ie4up) {
imgOn = ("" + imgName);
document.mainpic.src = imgOn;
   }
}
//  End -->
</script>
<style type="text/css">
<!--
.style1 {font-family: Verdana, Arial, Helvetica, sans-serif}
body,td,th {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
}

ul {
list-style-type: square;
}

li {
margin-top: 5px;
}
-->
</style>
</head>

<body>
<table width="650" border="0" align="center" cellpadding="0" cellspacing="2">
  <tr>
    <td colspan="2" bgcolor="#66CCFF"><div align="center"><span class="style1"><br>
          <strong>Feuersichere Dokumentenkassette </strong><br>
              <br>
    </span></div></td>
  </tr>
  <tr>
    <td width="260" rowspan="2" align="left" valign="top"><br><strong>Produktbeschreibung:<br>
      </strong>
        <ul>
          <li>stabile feuerfeste Dokumentenkassette bietet Brandschutz</li>
          <li>für wichtige wie z.B. Policen, Wertpapiere, Bargeld etc.</li>
          <li>im Din A4 Format</li>
          <li>Gewicht: 9,3 kg</li>
          <li>30 Minuten Sicherheit bei Temperaturen bis 840 Grad</li>
          <li>Laborgeprüfter Widerstandsgrad</li>
          <li>Zylinderschloss für zusätzlichen Diebstahlschutz</li>
          <li>Sicherheitsverriegelung aus solidem Stahl</li>
          <li>verdeckte Scharniere für ein formschönes Design</li>
          <li>stabiler Tragegriff für Transport und auf Reisen</li>
        </ul>
        <strong>Abmessung</strong> xxx x xxx x xx mm<br>
      <strong>Art.-Nr.</strong> 2015 </td>
    <td align="left" valign="top"><div align="center"><img src="2015.jpg" name="mainpic" border="0" alt="">
</div></td>
  </tr>
  <tr>
    <td align="left" valign="top"><div align="center"><a href="javascript:doPic('2015.jpg');"><img src="2015.jpg" width="96" height="96" hspace="10" border="0" alt=""></a><a href="javascript:doPic('2015-2.jpg');"><img src="2015-2.jpg" width="96" height="96" hspace="10" border="0" alt=""></a></div></td>
  </tr>
</table>
</body>
</html>
  • Browsercheck: FF 1.5, IE 6.0, MOZ 1.7, NN 7.0, OP 8.50 | Win2000
 
ich für meinen Geschmack hätte noch die ganzen unnötigen divs und spans rausgemacht, und zumindest dem <strong> eine style definition verpasst...wo's doch so schön als deprecated gilt :)
 
Hi,
Danke erstmal für die Arbeit, die ihr euch gemacht habt.
Naja, dass mit der Validierung hatte ich noch nie so raus, zudem es in meinen Augen auch nicht sehr viel bringt, weil Ie und Opera dass immer noch unterschiedlich anzeigen. Wieso sollte man im Html-Code auf einen Standard gehen, wenn noch nicht mal die Browser alles gleich interpretieren. Naja, ich lass das lieber sonst gibts wieder bashe.

Ich hab aber noch folgendes bemerkt:
Ich habe der rechten Spalte die feste Größe von 260px gegeben damit die kleinen Bilder nicht immer die Position wechseln. Wenn ich jetzt die Schriftgröße z.B. auf 10pt erhöhe, so rutschen die thumbs wieder weiter runter. Dafür gibt es keinen Grund, da die Linke Spalte ja ein Rowspan enthält.

Bei Opera ist immer noch alles korrekt, aber der Ie verzieht alles.
Also irgendwie kannn dass doch nicht sein.

Ich bin leider bei der ganzen Sache ziemlich auf Wysiwyg angewiesen, weil ich das per Hand zu lebzeiten nicht schaffen würde...

thx und fg
Cold
 
Sorry, für dieses IE-spezifische Verhalten / Problem habe ich derzeit leider keine Lösung parat.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück