Internet Explorer hat komische Abstände im Layout

derfleuz · 28 September 2007

Hallo.

Ich bastle zur Zeit ehrenamtlich an einer Website.
Zum dritten mal entwerfe ich die Seite ringcon.de
Nun habe ich ein Problem mit der Startseite für 2008.
Firefox zeigt die Seite korrekt an. Aber der Internetexplorer hat in der Mitte seltsame Abstände zw. den Grafiken.
Seht selbst:
Ring*Con >> auf 2008 (Website) klicken

Hier der Code:

Code:

<html>
<head>
  <title>Ring*Con 2008</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <meta name="language" content="de">
  <meta http-equiv="author" content="TREKWORLD MARKETING">
  <meta http-equiv="copyright" content="FedCon GmbH">
  <meta http-equiv="robots" CONTENT="index, nofollow">
  <meta name="Description" CONTENT="Ring*Con 2007">

  <meta name="Keywords" CONTENT="Herr der Ringe, lotr, Lord of the rings, Gefährten, Rückkehr des Königs, zwei türme, ringcon, ring con, ring-con">
  <link rel="stylesheet" href="ringcon.css" type="text/css">
<style type="text/css">
* {
margin:0px;
padding:0px;
}
</style>
</head>

<body bgcolor="#235313" text="#eeeeee" leftmargin="0" topmargin="0">

<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center" valign="middle">
<table id="Tabelle_01" width="800" height="584" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="6">
            <img src="Bilder/splash_01.jpg" width="148" height="583" alt=""></td>
        <td colspan="2">
            <img src="Bilder/splash_02.jpg" width="264" height="184" alt=""></td>
        <td colspan="2">
            <img src="Bilder/splash_03.jpg" width="239" height="184" alt=""></td>
        <td rowspan="6">
            <img src="Bilder/splash_04.jpg" width="149" height="583" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="Bilder/splash_05.jpg" width="503" height="59" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/splash_06.jpg" width="203" height="41" alt=""></td>
        <td colspan="2">
            <a href="http://www.ringcon.de/main.php?lang=de"onMouseOver="document.b1.src='Bilder/splash2_07.jpg'" onMouseOut="document.b1.src='Bilder/splash_07.jpg'"><img name="b1" src="Bilder/splash_07.jpg" width="128" height="41", border="0"></a>
        <td>
            <img src="Bilder/splash_08.jpg" width="172" height="41" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="Bilder/splash_09.jpg" width="503" height="47" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/splash_10.jpg" width="203" height="37" alt=""></td>
        <td colspan="2">
            <a href="http://www.ringcon.de/main.php?lang=en"onMouseOver="document.b2.src='Bilder/splash2_11.jpg'" onMouseOut="document.b2.src='Bilder/splash_11.jpg'"><img name="b2" src="Bilder/splash_11.jpg", border="0"></a>
        <td>
            <img src="Bilder/splash_12.jpg" width="172" height="37" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="Bilder/splash_13.jpg" width="503" height="215" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="148" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="203" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="61" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="67" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="172" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="149" height="1" alt=""></td>
    </tr>
</table>
</td>
</body>
</html>

Mod-Edit: CODE statt HTML - Übersichtlicher (ingoS)

Körnerbrötchen · 28 September 2007

Nicht schlecht... Sieht super aus.
Der IE interpretiert solche Sachen wie padding und border manchmal anders als unser allseits geliebter Firefox.
Schau dir deshalb mal diese Seite an und verändere diese Dinge entsprechend nur für den IE.

derfleuz · 28 September 2007

Danke erstmal.

Ich hab jetzt alles, was der IE falsch interpretieren könnte gelöscht. Aber es sieht immer noch so aus.

Hier der neue Code:

Code:

<html>
<head>
  <title>Ring*Con 2008</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <meta name="language" content="de">
  <meta http-equiv="author" content="TREKWORLD MARKETING">
  <meta http-equiv="copyright" content="FedCon GmbH">
  <meta http-equiv="robots" CONTENT="index, nofollow">
  <meta name="Description" CONTENT="Ring*Con 2007">

  <meta name="Keywords" CONTENT="Herr der Ringe, lotr, Lord of the rings, Gefährten, Rückkehr des Königs, zwei türme, ringcon, ring con, ring-con">

<body bgcolor="#235313" text="#eeeeee" leftmargin="0" topmargin="0">
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center" valign="middle">
<table id="Tabelle_01" width="800" height="584" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="6">
            <img src="Bilder/splash_01.jpg" width="148" height="583" alt=""></td>
        <td colspan="2">
            <img src="Bilder/splash_02.jpg" width="264" height="184" alt=""></td>
        <td colspan="2">
            <img src="Bilder/splash_03.jpg" width="239" height="184" alt=""></td>
        <td rowspan="6">
            <img src="Bilder/splash_04.jpg" width="149" height="583" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="Bilder/splash_05.jpg" width="503" height="59" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/splash_06.jpg" width="203" height="41" alt=""></td>
        <td colspan="2">
            <a href="http://www.ringcon.de/main.php?lang=de"onMouseOver="document.b1.src='Bilder/splash2_07.jpg'" onMouseOut="document.b1.src='Bilder/splash_07.jpg'"><img name="b1" src="Bilder/splash_07.jpg" width="128" height="41", border="0"></a>
        <td>
            <img src="Bilder/splash_08.jpg" width="172" height="41" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="Bilder/splash_09.jpg" width="503" height="47" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/splash_10.jpg" width="203" height="37" alt=""></td>
        <td colspan="2">
            <a href="http://www.ringcon.de/main.php?lang=en"onMouseOver="document.b2.src='Bilder/splash2_11.jpg'" onMouseOut="document.b2.src='Bilder/splash_11.jpg'"><img name="b2" src="Bilder/splash_11.jpg", border="0"></a>
        <td>
            <img src="Bilder/splash_12.jpg" width="172" height="37" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="Bilder/splash_13.jpg" width="503" height="215" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="148" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="203" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="61" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="67" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="172" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="149" height="1" alt=""></td>
    </tr>
</table>
</td>
</body>
</html>

Mod-Edit: CODE statt HTML - Übersichtlicher (ingoS)

ingoS · 28 September 2007

Schreib doch bitte den Quelltext in mehrere Zeilen; so muss man ewig horizontal scrollen und kann überhaupt nichts erkennen.

Wenn ich es richtig sehe, hast du jetzt die style-Informationen entfernt; das war auf alle Fälle ein Schritt zurück. Der Quelltext, den du am Anfang vorgestellt hast, war schon besser. Außerdem hast du versehentlich </head> vor <body...> entfernt; stell am besten einfach den alten Quelltext wieder her.

Zur Lösung:
Wahrscheinlich steht ein klassischer IE-Quatsch dahinter: Der Internet Explorer erzeugt Abstände zwischen den Bildern, wenn im Quelltext zwischen diesen und zwischen den Tabellenzellen etc. ein Zeilenumbruch ist. Es klingt ziemlich absurd, aber die einzige Lösung in dem Fall ist tatsächlich, den gesamten Quelltext der Tabelle ohne Leerzeichen in eine Zeile zu schreiben.

Edit:
Habe es ausprobiert, funktioniert auch in deinem Fall.

derfleuz · 28 September 2007

Hi!

Was den Quelltext angeht. Wenn ich ihn einfüge, wird er in Zeilen unterteilt. Am besten du zitierst meinen Beitrag. Dann steht er richtig da. ;)

Ich hab jetzt diese Startseite neu gesliced und schritt für Schritt neu codiert.
Und der Fehler muss im mouse-over Bereich stecken.

Kann da jemand einen Fehler ausmachen?

Denn ohne mouseover siehts korrekt aus.

HTML:

<a href="http://www.ringcon.de/main.php?lang=de"onMouseOver="document.b1.src='Bilder/splash2_07.jpg'" onMouseOut="document.b1.src='Bilder/splash_07.jpg'"><img name="b1" src="Bilder/splash_07.jpg" width="128" height="41", border="0"></a>

ingoS · 28 September 2007

derfleuz schrieb:
Hi!
Was den Quelltext angeht. Wenn ich ihn einfüge, wird er in Zeilen unterteilt. Am besten du zitierst meinen Beitrag. Dann steht er richtig da. ;)

Stimmt, die html-Funktion ist eher wenig brauchbar. Ich empfehle code.

Die Lösung ist übrigens noch einfacher als ich zuerst angenommen hatte:
Du hast einfach bei den MouseOver-Stellen im Quelltext kein </td> stehen.

Dein Code:

Code:

<td colspan="2">
<a href="http://www.fea-fleuz.de/con08/de"onMouseOver="document.b1.src='Bilder/splash2_07.jpg'" onMouseOut="document.b1.src='Bilder/splash_07.jpg'"><img name="b1" src="Bilder/splash_07.jpg", border="0"></a>

Nach dem </a> fehlt ein </td>.
Das Gleiche gilt für das andere MouseOver.

derfleuz · 28 September 2007

Voll übersehen, danke vielmals. :)

ingoS · 29 September 2007

derfleuz schrieb:
Voll übersehen, danke vielmals. :)

Kein Problem, manchmal springt es einem einfach nicht ins Auge.
Ich habe noch deinen Code in den beiden Posts umgewandelt; der Bandwurm war einfach zu unübersichtlich.

Internet Explorer hat komische Abstände im Layout

derfleuz

Neues Mitglied

Körnerbrötchen

Aktives Mitglied

derfleuz

Neues Mitglied

ingoS

Aktives Mitglied

derfleuz

Neues Mitglied

ingoS

Aktives Mitglied

derfleuz

Neues Mitglied

ingoS

Aktives Mitglied

Neueste Beiträge