Tabellenzeile zu hoch wegen Image-Overlay

    Hallo,

    in einer Tabelle werden pro Zelle 2 Bilder übereinander gelegt.
    Dabei entsteht jedoch ein großer "Rand" am Boden der Zelle, da der Browser nicht mitbekommt, dass eines der Bilder nach oben verschoben wird.

    Etwas Code:

    <table border="1">
    <tr valign="top" align="center" height="450px">
    <td width="400px" height="450px">

    <div class="box450">
    <img src="breit.png" width="400" height="300" border="0" style="position: relative; opacity: 0.6;">
    <img src="Sunset.jpg" width="371" height="277" border="0" style="position: relative; top:-294px;left:-1px; z-index:10;">
    </div>
    </td>
    <td width="400px" ><div class="box450">
    <img src="breit.png" width="400" height="300" border="0" style="position: relative; opacity: 0.6;">
    <img src="Sunset.jpg" width="371" height="277" border="0" style="position: relative; top:-294px;left:-1px; z-index:10;">
    </div> </td>
    <td width="400px" ><div class="box450">
    <img src="hoch.png" width="300" height="400" border="0" style="position: relative; opacity: 0.6;">
    <img src="Sunset.jpg" width="273" height="375" border="0" style="position: relative; top:-393px;left:-1px; z-index:10;">
    </div> </td>

    </tr>

    <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
    </tr>
    </table>


    Das "height" im td wird ausgelesen, jedoch weigert sich jeder Browser die Höhe unter die höhe der beiden bilder zu setzen.


    Jede Hilfe ist wilkommen! Danke im Vorraus!

    Erstma Table layout.. aber egal jetzt.

    Warum nimmst du ein <img> als Hintergrund? Nimm doch ein Div und stell das bild als background ein... Dann hast du mit dem table auch keine probs (da du ja nichts verschieben musst)

    Ich weiß nicht, wie groß die bilder werden.
    und da background nicht skaliert, sondern "zoomt", würde ich einen teil vom hintergrundbild verlieren...

    habs aber lösen können:
    nur ein bild "relative", das andere "absolute" ...

    <html>
    <head>
    <style type="text/css">

    * {margin: 0px; padding 0px; background: none; }
    body {
    background: #464646;

    }
    div.watermark_box {
    position:relative;
    display:block;
    }
    img.watermark {
    position: absolute;
    top: 12px;
    left: 13px;
    }


    </style>
    </head>
    <body>
    <table border="1">
    <tr>
    <td>

    <div class="watermark_box">
    <img src="hoch.gif" alt="Your image" width="300" height="400" />
    <a href="Sunset.jpg"><img src="Sunset.jpg" class="watermark" alt="Watermark image" width="272px" height="375px" border=0/></a>
    </div>

    </td>
    <td><div class="watermark_box">
    <img src="hoch.gif" alt="Your image" width="300" height="400" />
    <a href="Sunset.jpg"><img src="Sunset.jpg" class="watermark" alt="Watermark image" width="272px" height="375px" border=0/></a>
    </div> </td>
    <td><div class="watermark_box">
    <img src="breit.gif" alt="Your image" width="400" height="300" />
    <a href="Sunset.jpg"><img src="Sunset.jpg" class="watermark" alt="Watermark image" width="375px" height="272px" border=0/></a>
    </div> </td>
    </tr>
    <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
    </tr>
    </table>
    </body>
    </html>