Startseite wird im IE nicht richtig angezeigt

Status
Nicht offen für weitere Antworten.
G

GFX-Händchen

Erfahrenes Mitglied
Hi,

ich habe ein großes Problem welches ich nicht lösen kann :(, die Startseite meiner (geslicten) Photoshop-HP wird im IE nicht richtig angezeigt, doch ich finde den Fehler im Quellcode nicht, da ich noch nicht soooo gut HTML kann.:rolleyes:
Die Bilder haben an bestimmten Positionen Frei- bzw. Leerräume so dass dort alles verschoben ist und der weiße Hintergrund sichtbar wird.

Könnte sich bitte jemand mal den Code anschauen?

Originalcode, nach slicen in Photoshop:
Code: 
<html>

<head>
<title>hp</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (hp.psd) -->

<table id="Tabelle_01" width="1025" height="768" border="0" cellpadding="0"
cellspacing="0">
  <tr>
    <td colspan="5"><img src="Bilder/hp_01.png" width="1024" height="188" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="188" alt></td>
  </tr>
  <tr>
    <td rowspan="28"><img src="Bilder/hp_02.png" width="35" height="580" alt></td>
    <td rowspan="2"><img src="Bilder/hp_03.png" width="216" height="22" alt></td>
    <td colspan="3"><img src="Bilder/hp_04.png" width="773" height="5" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="5" alt></td>
  </tr>
  <tr>
    <td rowspan="27"><img src="Bilder/hp_05.png" width="145" height="575" alt></td>
    <td rowspan="26"><img src="Bilder/hp_06.png" width="614" height="509" alt></td>
    <td rowspan="27"><img src="Bilder/hp_07.png" width="14" height="575" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="17" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_08.png" width="216" height="11" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="11" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_09.png" width="216" height="23" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="23" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_10.png" width="216" height="10" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="10" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_11.png" width="216" height="23" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="23" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_12.png" width="216" height="11" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="11" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_13.png" width="216" height="22" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="22" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_14.png" width="216" height="11" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="11" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_15.png" width="216" height="23" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="23" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_16.png" width="216" height="10" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="10" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_17.png" width="216" height="23" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="23" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_18.png" width="216" height="12" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="12" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_19.png" width="216" height="22" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="22" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_20.png" width="216" height="11" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="11" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_21.png" width="216" height="23" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="23" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_22.png" width="216" height="10" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="10" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_23.png" width="216" height="23" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="23" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_24.png" width="216" height="10" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="10" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_25.png" width="216" height="23" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="23" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_26.png" width="216" height="12" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="12" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_27.png" width="216" height="21" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="21" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_28.png" width="216" height="11" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="11" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_29.png" width="216" height="23" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="23" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_30.png" width="216" height="10" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="10" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_31.png" width="216" height="24" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="24" alt></td>
  </tr>
  <tr>
    <td rowspan="2"><img src="Bilder/hp_32.png" width="216" height="156" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="90" alt></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_33.png" width="614" height="66" alt></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="66" alt></td>
  </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

Code, nachdem ich bearbeitet habe um extra Seiten hinzuzufügen:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<title>Willkommen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<leftmargin=" 0" topmargin="0" style="background-color: rgb(255, 255, 255);" marginheight="0" marginwidth="0">
<!-- ImageReady Slices (hp-besser.gescliced.psd) -->

<table id="Tabelle_01" border="0" cellpadding="0" cellspacing="0" height="768"
width="1025">
<tbody>
  <tr>
    <td colspan="5"><img src="Bilder/hp_01.png" alt height="188" width="1024"></td>
    <td><img src="Abstandhalter.gif" alt height="188" width="1"></td>
  </tr>
  <tr>
    <td rowspan="28"><img src="Bilder/hp_02.png" alt height="580" width="35"></td>
    <td rowspan="2"><img src="Bilder/hp_03.png" alt height="22" width="216"></td>
    <td colspan="3"><img src="Bilder/hp_04.png" alt height="5" width="773"></td>
    <td><img src="Abstandhalter.gif" alt height="5" width="1"></td>
  </tr>
  <tr>
    <td rowspan="27"><img src="Bilder/hp_05.png" alt height="575" width="145"></td>
    <td rowspan="26"
    style="background-image: url(Bilder/hp_06.png); vertical-align: top; color: rgb(255, 255, 255);"
    alt height="397" width="479"><!--webbot bot="HTMLMarkup" startspan --><IFRAME src="indextext.html" name="iframe" height="500" scrolling="auto" width="100%" border="0" frameborder="0" framespacing="0"><!--webbot
    bot="HTMLMarkup" endspan --><!--webbot bot="HTMLMarkup" startspan --></IFRAME><!--webbot
    bot="HTMLMarkup" endspan --></td>
    <td rowspan="27"><img src="Bilder/hp_07.png" alt height="575" width="14"></td>
    <td><img src="Abstandhalter.gif" alt height="17" width="1"></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_08.png" alt height="11" width="216"></td>
    <td><img src="Abstandhalter.gif" alt height="11" width="1"></td>
  </tr>
  <tr>
    <td><a href="infos.html"><img src="Bilder/hp_09.png" style="border: 0px solid ;"
    height="23" width="216"></a></td>
    <td><img src="Abstandhalter.gif" alt height="23" width="1"></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_10.png" alt height="10" width="216"></td>
    <td><img src="Abstandhalter.gif" alt height="10" width="1"></td>
  </tr>
  <tr>
    <td><a href="gb.html"><img src="Bilder/hp_11.png"
    style="border: 0px solid ; width: 216px; height: 23px;" height="23" width="216"></a> </td>
    <td><img src="Abstandhalter.gif" alt height="23" width="1"></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_12.png" alt height="11" width="216"></td>
    <td><img src="Abstandhalter.gif" alt height="11" width="1"></td>
  </tr>
  <tr>
    <td><a href="bilder.html"><img src="Bilder/hp_13.png" style="border: 0px solid ;"
    height="22" width="216"></a> </td>
    <td><img src="Abstandhalter.gif" alt height="22" width="1"></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_14.png" alt height="11" width="216"></td>
    <td><img src="Abstandhalter.gif" alt height="11" width="1"></td>
  </tr>
  <tr>
    <td><a href="forum.html"><img src="Bilder/hp_15.png" style="border: 0px solid ;"
    height="23" width="216"></a> </td>
    <td><img src="Abstandhalter.gif" alt height="23" width="1"></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_16.png" alt height="10" width="216"></td>
    <td><img src="Abstandhalter.gif" alt height="10" width="1"></td>
  </tr>
  <tr>
    <td><a href="shop.html"><img src="Bilder/hp_17.png" style="border: 0px solid ;" 216px 22px
    height width></a> </td>
    <td><img src="Abstandhalter.gif" alt height="23" width="1"></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_18.png" alt height="12" width="216"></td>
    <td><img src="Abstandhalter.gif" alt height="12" width="1"></td>
  </tr>
  <tr>
    <td><a href="tackle.html"><img src="Bilder/hp_19.png" style="border: 0px solid ;" alt
    height="22" width="216"></a></td>
    <td><img src="Abstandhalter.gif" alt height="22" width="1"></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_20.png" alt height="11" width="216"></td>
    <td><img src="Abstandhalter.gif" alt height="11" width="1"></td>
  </tr>
  <tr>
    <td><a href="archiv.html"><img src="Bilder/hp_21.png" style="border: 0px solid ;" alt
    height="23" width="216"></a></td>
    <td><img src="Abstandhalter.gif" alt height="23" width="1"></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_22.png" alt height="10" width="216"></td>
    <td><img src="Abstandhalter.gif" alt height="10" width="1"></td>
  </tr>
  <tr>
    <td><a href="votet.fuer.mich.html"><img src="Bilder/hp_23.png" style="border: 0px solid ;"
    alt height="23" width="216"></a></td>
    <td><img src="Abstandhalter.gif" alt height="23" width="1"></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_24.png" alt height="10" width="216"></td>
    <td><img src="Abstandhalter.gif" alt height="10" width="1"></td>
  </tr>
  <tr>
    <td><a href="links.html"><img src="Bilder/hp_25.png" style="border: 0px solid ;" alt
    height="23" width="216"></a></td>
    <td><img src="Abstandhalter.gif" alt height="23" width="1"></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_26.png" alt height="12" width="216"></td>
    <td><img src="Abstandhalter.gif" alt height="12" width="1"></td>
  </tr>
  <tr>
    <td><a href="kontakt.html"><img src="Bilder/hp_27.png" style="border: 0px solid ;" alt
    height="21" width="216"></a></td>
    <td><img src="Abstandhalter.gif" alt height="21" width="1"></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_28.png" alt height="11" width="216"></td>
    <td><img src="Abstandhalter.gif" alt height="11" width="1"></td>
  </tr>
  <tr>
    <td><a href="umfrage.html"><img src="Bilder/hp_29.png" style="border: 0px solid ;" alt
    height="23" width="216"></a></td>
    <td><img src="Abstandhalter.gif" alt height="23" width="1"></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_30.png" alt height="10" width="216"></td>
    <td><img src="Abstandhalter.gif" alt height="10" width="1"></td>
  </tr>
  <tr>
    <td><a href="disclaimer.html"><img src="Bilder/hp_31.png" style="border: 0px solid ;" alt
    height="24" width="216"></a></td>
    <td><img src="Abstandhalter.gif" alt height="24" width="1"></td>
  </tr>
  <tr>
    <td rowspan="2"><img src="Bilder/hp_32.png" alt height="156" width="216"></td>
    <td><img src="Abstandhalter.gif" alt height="90" width="1"></td>
  </tr>
  <tr>
    <td><img src="Bilder/hp_33.png" alt height="66" width="614"></td>
    <td><img src="Abstandhalter.gif" alt height="66" width="1"></td>
  </tr>
</tbody>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
 
Hi,

kann die Seite auch "live" betrachtet werden, denn ohne die eingebundenen Grafiken hat man keinen Anhaltspunkt, welche von ihnen einen Frei- bzw. Leerraum besitzen?
 
Hmm, geht wohl nicht.
Wollte url posten aber de.vu wird wohl irgendwie geblockt.:(

Ist denn so aus dem Quellcode nichts ersichtlich für euch Profis?:confused:
 
Dann nenn einfach den Anfang der URL, der Rest kann in der Adresszeile manuell drangehängt werden. ;)

Um der Ursache auf den Grund gehen zu können, muss man zunächst mal die Seite incl. der Grafiken anschauen können, um überhaupt zu erkennen, welche betroffen sind.
 
Der Leerraum beim Link "Shop" dürfte sich aus diesem Quellcode ergeben:

Code: 
<td><a href="shop.html"><img src="Bilder/hp_17.png" style="border: 0px solid ;" 216px 22px
    height width></a> </td>
der dem übrigen Seitenquelltext zufolge so lauten müsste:
Code: 
<td><a href="shop.html"><img src="Bilder/hp_17.png" style="border: 0px solid;" width="216" height="22"></a></td>
 
Genau war es:
Code: 
<td><a href="shop.html"><img src="Bilder/hp_17.png" style="border: 0px solid;" width="216" height="23"></a></td>
bei height 23 anstatt 22.;)

Und was ist mit dem Rest?:confused:
Ist ja noch mehr verschoben.:rolleyes:
Ich bin auch grad am schaun.;)
 
Dass 23 hier der richtige Wert für die Höhe ist, war für mich nicht ersichtlich.

Den Rest rücken wir mit folgender CSS-Regel zurecht:

Code: 
a img { display:block; }
Und korrigiere noch diese Zeile:

Code: 
<body>
<leftmargin="0" topmargin="0" style="background-color: rgb(255, 255, 255);" marginheight="0" marginwidth="0">
 
Dann muss ich aber jedem Image wieder ein Tag hinzufügen oder?:confused:
CSS habe ich dafür nicht verwendet, bin ich auch am lernen.:rolleyes:
Daher würd ich es evtl. gern ohne lösen.;-)
 
Nein, du brauchst kein weiteres Element vorne anstellen, denn die Regel bezieht sich auf die Grafik-Links <a href="..."><img src="..."></a>.

Und was spricht bitte gegen den Einsatz von CSS?

Ansonsten müsstest du alle Zeilenumbrüche und Einrückungen im HTML-Code entfernen, damit der IE sie nicht als "Whitespaces" interpretiert und eine Lücke zum nachfolgenden Element erzeugt.

Beispielsweise aus:

Code: 
<td><a href="gb.html"><img src="Bilder/hp_11.png"
    style="border: 0px solid ; width: 216px; height: 23px;" height="23" width="216"></a> </td>
müsste dann:

Code: 
<td><a href="gb.html"><img src="Bilder/hp_11.png" style="border: 0px solid; width: 216px; height: 23px;" height="23" width="216"></a></td>
werden.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück