Bild bei IE6 über den Tabellenrand verschoben

[Felix Riesterer]

Liebe(r) besi21,

bitte zitiere sinnvoll. Mein komplettes Posting an den Anfang zu stellen war nicht gerade sinnvoll, noch viel weniger der komplette HTML-Code, der über Deinen Link zuvor längst erreichbar und bekannt war!

Hallo Felix, Ellwangen liegt doch gar nicht weit weg vom Allgäu oder???

Warum drei Fragezeichen? Ist diese Frage so unglaublich?

Schau! So nun ist der Code valide!!! http://www.test.fewobesler.de/index.php?id=4

Das ist er - ja. Jetzt kann man anfangen, Fehler zu suchen.

Zuallererst frage ich mich, was der strukturelle Sinn hinter folgendem Code-Gerüst sein soll:

<div id="inhalt">
    <div class="pfad">Sie befinden sich hier: &nbsp;<a href="index.php?id=15" onfocus="blurLink(this);">fewobesler</a>&nbsp;/&nbsp;<a href="index.php?id=4" onfocus="blurLink(this);">Ferienwohnung</a>&nbsp;/&nbsp;</div>

Deine Breadcrumbs-Navi möchte so gerne ein echter Textabsatz sein.

Deine Navi ist strukturell stark überfrachtet. Muss das so sein? Insbesondere will mir nicht einleuchten, warum die ersten beiden Listenpunkte leer sind (der zweite mit einem leeren <blockquote>-Element, dessen Sinn sich mir strukturell noch viel weniger erschließen will). Das Ganze kapselst Du in ein <div>-Element. Das hätte nicht sein müssen, da Du die ID "navbox" auch dem <ul>-Element selbst hättest geben können. Das <div>-Element hätte ich dann für sinnvoll erachtet, wenn Du vor das <ul>-Element noch eine Unterüberschrift gesetzt hättest, die klar macht, dass die folgende Liste eine Navi ist. Ein <h2>Navigation</h2> tut dort ja nun wahrlich nicht weh. Und wer es nicht sehen will, der verpasst ihm ein #navbox h2 {display:none;}. So hat Dein Code eine unnötig komplizierte Struktur:

<div id="navbox">
    <ul>
        <li class="oben">&nbsp;</li>
        <li><blockquote class="oben1"></blockquote></li>
        <li><a href="index.php?id=16" onfocus="blurLink(this);" class="eins">Neuer Punkt....??</a></li>
        <li><a href="index.php?id=17" onfocus="blurLink(this);" class="eins">Angebot</a></li>
        <li><a href="index.php?id=14" onfocus="blurLink(this);" class="eins">Angebot</a></li>
        <li><a href="index.php?id=13" onfocus="blurLink(this);" class="eins">Preise</a></li>
        <li><a href="index.php?id=12" onfocus="blurLink(this);" class="eins">Panorama</a></li>
        <li><a href="index.php?id=11" onfocus="blurLink(this);" class="eins">Sonstiges</a></li>
        <li><blockquote class="unten1"></blockquote></li>
        <li class="unten"></li>
    </ul>
</div>

Als nächstes bewundern wir doch einmal Deine Tabelle.

Warum muss das dort eine Tabelle sein? Auf der Seite werden keine tabellarischen Inhalte präsentiert. Wozu also die Tabelle? Wegen der Anordnung der Bilder und dem Text dazwischen? Das machst Du besser mit CSS! Schau Dir doch die Struktur Deines Code-Monsters einmal an! Da geben sich definitionslisten in Deiner Tabelle, diverse Textabsätze und leere <div>-Elemente ihr Stelldichein. Ist das überhaupt noch überschaubar? Ich finde nicht! Aber schau selbst:

<table class="horiz_col">
    <tr>
        <td style="border: 0px dotted #333333; padding: 0px; vertical-align: top;">
            <h2 class="doppelt">Bad</h2>
            <div class="csc-textpic csc-textpic-left csc-textpic-above">
                <div class="csc-textpic-imagewrap">
                    <dl class="csc-textpic-image csc-textpic-lastcol" style="width:244px;">
                        <dt>
                            <img src="uploads/pics/bad_17.jpg" width="244" height="261" border="0" alt="" />
                        </dt>
                    </dl>
                </div>
            </div>
            <div class="csc-textpic-clear"><!-- --></div>
        </td>
        <td style="border: 0px dotted #333333; padding: 0px; vertical-align: top;">
            Text<p class="bodytext">handtuch. Schlafzimmer: handtuch.[...] </p>
        </td>
        <td style="border: 0px dotted #333333; padding: 0px; vertical-align: top;">
            <h2 class="doppelt">Schlafzimmer</h2>
            <div class="csc-textpic csc-textpic-right csc-textpic-above">
                <div class="csc-textpic-imagewrap">
                    <dl class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width:244px;">
                        <dt>
                            <img src="uploads/pics/schlafzimmer_05.jpg" width="244" height="197" border="0" alt="" />
                        </dt>
                    </dl>
                </div>
            </div>
            <div class="csc-textpic-clear"><!-- --></div>
        </td>
    </tr>
</table>

Ich will Deine Arbeit hier nicht einfach nur "runter machen", auch wenn es im Moment erst so aussieht. Jedoch weigere ich mich, durch so ein Code-Monster zu forschen, wo denn da der Anzeigefehler herrührt! Dazu bin ich nicht genügend masochistisch veranlagt. Daher mein Vorschlag:

Reduziere Deinen Code auf ein Minimum! Dann kann man ihn mit CSS sinnvoll gestalten und auch wesentlich leichter Fehler finden. Und damit Du siehst, wie ich das meine, mache ich den Anfang für Dich:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Ferienwohnung</title>
</head>
<body>
<div id="alles">
<!-- inhalt -->
    <div id="inhalt">
        <p id="breadcrumbs">Sie befinden sich hier: &nbsp;<a href="index.php?id=15">fewobesler</a>&nbsp;/&nbsp;<a href="index.php?id=4">Ferienwohnung</a>&nbsp;/&nbsp;</p>
        <div id="navbox">
            <h2>Themen</h2>
            <ul>
                <li><a href="index.php?id=16">Neuer Punkt....??</a></li>
                <li><a href="index.php?id=17">Angebot</a></li>
                <li><a href="index.php?id=14">Angebot</a></li>
                <li><a href="index.php?id=13">Preise</a></li>
                <li><a href="index.php?id=12">Panorama</a></li>
                <li><a href="index.php?id=11">Sonstiges</a></li>
            </ul>
        </div>

        <h1>Die Ferienwohnung für Ihre Erholung</h1>
        <p><img src="uploads/pics/pano-dach_01.jpg" width="560" height="115" alt="" /></p>

        <p class="raised">Die Kombination von Farbe und Licht im Raum schafft eine entspannte Atmosphäre in Ihrer Ferienwohnung. Durch die großen Fensterflächen ist auch bei schlechter Witterung noch genügend Tageslicht vorhanden. Die Wohnfläche beträgt 52 qm, die Terrasse mit Süd- und Westseite 35 qm.</p>

        <div class="box">
            <h2><img src="uploads/pics/terr.jpg" width="300" height="194" alt="" />Terrasse</h2>
            <p>Die Terrasse ist nach Süden und Westen ausgerichtet. Der freie Blick auf die Alpen und umliegenden Dörfer, sowie die ruhige Lage bieten eine ideale Voraussetzung für Ihren wohlverdienten Urlaub. Die Sonne erreicht morgens die südliche Terrassenseite und gegen Mittag die Westseite der Terrasse. Der Terrassenbelag besteht aus einem Porphyr-Naturstein. Terrassenmöbel aus Teakholz, sowie Liegestühle und Sonnenschirm sind vorhanden.</p>
        </div>

        <div class="box">
            <h2><img src="uploads/pics/wohnung-wz.jpg" width="300" height="200" alt="" />Wohnzimmer - Küche</h2>
            <p>Alle Räume sind mit einer Fußbodenheizung ausgestattet. Der runde Eßtisch, (1,00 - 1,50 ausziehbar) befindet sich vor den beiden großen Flügelfenster mit Blick auf das Alpenpanorama. Bei Bedarf lassen sich die Fenster mit einem Rolladen verschließen. Das Sofa kann schnell zu einem Bett (1,60 x 2,00 Meter.) umgebaut werden. Das Wohnzimmer ist mit Satelliten-TV ausgestattet.</p>
            <h3>Küchenzeile</h3>
            <p>Eine komplett ausgestattete Küche mit Backofen, Kühlschrank, Toaster, Kaffeemaschine, Wasserkocher, Eierkocher, Geschirr, Töpfe, geräumigen Schränken... läßt keine Urlaubswünsche offen.</p>
        </div>

        <div class="box-left">
            <h2>Bad</h2>
            <p><img src="uploads/pics/bad_17.jpg" width="244" height="261" alt="" /></p>
        </div>
        <div class="box-right">
            <h2>Schlafzimmer</h2>
            <p><img src="uploads/pics/schlafzimmer_05.jpg" width="244" height="197" alt="" /></p>
        </div>
        <p>Schlafzimmer: handtuch. Schlafzimmer: handtuch....</p>
    </div>
<!-- /inhalt -->

    <div id="head">
        <address>Familie Besler<br />
        Winkel 8b<br />
        87527 Sonthofen<br />
        Tel: [phone]</address>
    </div>

    <div id="navoben">
        <ul>
            <li><a href="index.php?id=5">Home</a></li>
            <li><a href="index.php?id=4">Ferienwohnung</a></li>
            <li><a href="index.php?id=2">Anfrage</a></li>
            <li><a href="index.php?id=3">Umgebung</a></li>
            <li><a href="index.php?id=6">Kontakt</a></li>
        </ul>
    </div>

    <div id="footer">
        <p>Familie Besler&nbsp; | &nbsp; Winkel 8b&nbsp; | &nbsp; 87527 Sonthofen &nbsp; | &nbsp; Tel: [phone]-10 &nbsp; | &nbsp; Fax: [phone]-11 &nbsp; | &nbsp;<a href="impressum.html">Impressum</a></p>
    </div>
</div>
</body>
</html>

Mir ist schon klar, dass Deine ganzen Stylesheets jetzt nicht mehr passen, aber dafür hast Du nun die Chance, mit einem sehr aufgeräumten XHTML-Dokument alle die Dinge zu gestalten, die Du vorher auch gestalten wolltest. Und das Beste daran ist: Es ist so übersichtlich, dass man Darstellungsfehler sehr schnell findet.

Wenn Du den XHTML-Code jetzt so übernimmst, dann solltest Du rein mit CSS in der Lage sein, Deine bisherige Gestaltung wieder so hinzukriegen. Und wenn einmal kleine Details nicht gelingen wollen, dann kommst Du eben wieder hier her.

Viel Glück damit und liebe Grüße aus Ellwangen,

Felix Riesterer.