# Startseite wird im IE nicht richtig angezeigt



## GFX-Händchen (27. Oktober 2007)

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.
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:

```
<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:

```
<!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>
```


----------



## Maik (27. Oktober 2007)

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?


----------



## GFX-Händchen (27. Oktober 2007)

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?


----------



## Maik (27. Oktober 2007)

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.


----------



## GFX-Händchen (27. Oktober 2007)

Ok hier 
www.Mainschleifen-Angler


----------



## Maik (27. Oktober 2007)

Der Leerraum beim Link "Shop" dürfte sich aus diesem Quellcode ergeben:


```
<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:

```
<td><a href="shop.html"><img src="Bilder/hp_17.png" style="border: 0px solid;" width="216" height="22"></a></td>
```


----------



## GFX-Händchen (27. Oktober 2007)

Genau war es:
	
	
	



```
<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?
Ist ja noch mehr verschoben.
Ich bin auch grad am schaun.


----------



## Maik (27. Oktober 2007)

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:


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


```
<body>
<leftmargin="0" topmargin="0" style="background-color: rgb(255, 255, 255);" marginheight="0" marginwidth="0">
```


----------



## GFX-Händchen (27. Oktober 2007)

Dann muss ich aber jedem Image wieder ein Tag hinzufügen oder?
CSS habe ich dafür nicht verwendet, bin ich auch am lernen.
Daher würd ich es evtl. gern ohne lösen.;-)


----------



## Maik (27. Oktober 2007)

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:


```
<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:


```
<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.


----------



## GFX-Händchen (27. Oktober 2007)

Ok, habe den CSS-Code mal eingefügt, kannst du bitte jetzt mal unter http://mainangler.ma.funpic.de/test/welcome.html schaun?
Habe dort mal die Startseite hochgeladen und wenn sie funktioniert, dann kommt sie in den Hauptordner.

Gegen CSS spricht eigentlich nichts, muss es nur zusätzlich erlernen.

Edit:
Hmm, im Firefox wird es jetzt aber total falsch angezeigt.

Edit2:
Rechtschreibfehler behoben.


----------



## Maik (27. Oktober 2007)

Ich kann bei mir keine Darstellungsfehler im FF (2.0.0.8) entdecken.

Im IE wird die Seite jetzt auch korrekt dargestellt.


----------



## GFX-Händchen (27. Oktober 2007)

Hmm, bei mir im FF 2.0.0.8 werden die Menügrafiken in einem Block anz unter der Seite zusammengefsst.
Das sieht man aber nur unter http://mainangler.ma.funpic.de/test/welcome.html da ich es in der Hauptdatei im Hauptordner noch nicht gemacht habe, eben wegen dem Test!.


----------



## Maik (27. Oktober 2007)

Tut mir leid, aber bei mir wird da nichts unterhalb der  Seite zusammengefasst:


----------



## GFX-Händchen (27. Oktober 2007)

Hast du auch ein paar mal die Seite aktualisiert (F5)?

Könnte man den weißen Rand (links und oben) auch noch wegmachen?
Dieser wird im Original auch nur auf der Startseite angezeigt, kannste dir ja gerne unter der Domain anschauen.

Wenn dann alles ok ist, dann ersetze ich die Datei im Hauptordner mit dieser aus dem Testordner.


----------



## Maik (27. Oktober 2007)

Ich hab jetzt extra den Browser-Cache geleert, aber es bleibt bei meiner Aussage.

Wie sich der weiße Rand abstellen stellst, erfährst du, wenn du meine Beiträge einfach aufmerksam durchliest, siehe http://www.tutorials.de/forum/1512898-post8.html


----------



## GFX-Händchen (27. Oktober 2007)

Hatte ich schon korrigiert aber dennoch habe ich den weißen Rand.

Hmm, warum das bei mir im FF so aussieht (siehe Seite davor mit Bild) weiß ich auch nicht.
Nun gut, wenn es bei dir geht (FF & IE), dann lasse ich noch andere Leute testen und wenn ich positives höre dann ersetze ich die Datei.

Danke für die Hilfe bis hierher.


----------



## Maik (27. Oktober 2007)

GFX-Händchen hat gesagt.:


> Hatte ich schon korrigiert aber dennoch habe ich den weißen Rand.


Wenn ich mir vom Browser den Seitenquelltext von http://mainangler.ma.funpic.de/test/welcome.html ausgeben lasse, steht da noch immer:


```
<body>
<leftmargin="0" topmargin="0" style="background-color: rgb(255, 255, 255);" marginheight="0" marginwidth="0">
```


----------



## GFX-Händchen (27. Oktober 2007)

Ahso, dann meintest du mit der roten Farbe wohl das weglassen der Klammern.
Im FF klappts bei mir nciht, immer noch so wie im Bild.
Den Rand habe ich auch weiterhin.

Andere Frage:
Was müsste ich wo einstellen damit sich die Seite an die Bildschirmauflösung anpasst?


----------



## Maik (27. Oktober 2007)

Bei mir ist der Rand nun verschwunden.

Wenn sich die Seite der Fenstergröße anpassen soll, müssten grundsätzlich alle feste Breiten- und Höhenangaben entfernt, und stattdessen relative (prozentuale) Werte definiert werden.


----------



## GFX-Händchen (27. Oktober 2007)

Ok, dann belasse ich es erstmal mit den Angaben so wie es ist.
Der IE zeigt die Seite bei mir jetzt wenigstens schon mal richtig an.
Im Firefox hab ich halt noch das Problem.
Ich lasse aber ein paar Leute testen und werde schaun wie es bei ihnen aussieht.


----------



## Maik (27. Oktober 2007)

Ansonsten setz mal die Polsterungseigenschaften des Dokumentkörpers mit Hilfe von CSS zurück:


```
html,body {
margin:0;
padding:0;
}
```
was die HTML-Attribute leftmargin, topmargin, marginheight und marginwidth überflüssig macht.


----------



## GFX-Händchen (28. Oktober 2007)

Danke, hat im FF nur keine Besserung gebracht (in Bezug auf den "Block" - siehe Seite 1 des beitrags ganz unten).

Ich warte noch was die anderen Tester sagen, wie bei denen die Seite aussieht.
Kann ja net sein, dass bei dir alles ok ist und bei mir im FF nicht.


----------

