✔ Code für Höhe bei IE

[Ma-Ju]

Hi! Ich hab bei meinem Projekt ein Problem. Und zwar sollen die Events in einer Liste ausgegeben werden. Auf der linken Seite sind die Thumbs, auf der rechten Seite die Details mit einem Bild. Diese Details haben einen grauen Hintergrund. Die Tabelle reicht nicht über die ganze Höhe des Thumbs. Da der Thumb unterschiedlch hoch sein kann, muss die Höhenangabe in Prozent sein. Mit dem Firefox klappt alles ohne Probleme, nur im IE spinnt das ganze mal wieder... Hier der Quellcode vom Template:

<table style="height:100%;" width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr bgcolor="#ececec">
        <td colspan="2" style="font-weight:bold;">$eventtitle - $eventdate</td>
    </tr>

    <tr>
        <td width="150">
            <a href="images/flyer/$eventflyer"><img src="thumbs.php?img=images/flyer/$eventflyer" border="0" alt="Flyerthumb für $eventtitle" title="Flyerthumb für $eventtitle"></a>
        </td>
        <td valign="top">
            <table bgcolor="#d7d7d7" width="100%" border="0" cellpadding="0" cellspacing="0" height="100%">
                <tr>
                    <td>Einlass:</td><td>$eventopen Uhr</td>
                </tr>

                <tr>
                    <td>Ort:</td><td>$eventloc</td>
                </tr>

                <tr>
                    <td>Preis:</td><td>$eventprice Euro</td>
                </tr>

                <tr valign="bottom">
                    <td colspan="2" width="100%"><a href="?$config[switchvar]=events&$config[contentvar]=details&id=$eventid"><img src="images/cboxes/c_content_eventdetail.jpg" border="0" alt="zu den Details" title="zu den Details"></a></td>
                </tr>
            </table>
        </td>
    </tr>

    <tr>
        <td colspan="2" style="background-image: url(./images/trenndot.gif); background-repeat: repeat-x;" height="1"><img src="./images/Abstandhalter.gif" alt="" border="0" height="1"></td>
    </tr>
</table>

Außerdem ist um das Bild unten und rechts ein kleiner Rahmen. Im Template sind die Border-Werte auf 0. Hier mal ein Screen

http://www.onlinepictures.de/2/uploads/Unbenanntdaa5bb3bJPG.jpg

Ich hoffe, mir kann einer helfen!

 

[franz007]

Ohne auf dein Problem einzugehen würde ich dir http://notepad-plus.sourceforge.net/de/site.htm notepad++ empfehlen, das im Gegensatz zum Windows Notepad syntaxhilighting und Autovervollständiung für viele Sprachen hat.

 

[Maik]

Diese Details haben einen grauen Hintergrund. Die Tabelle reicht nicht über die ganze Höhe des Thumbs. Da der Thumb unterschiedlch hoch sein kann, muss die Höhenangabe in Prozent sein. Mit dem Firefox klappt alles ohne Probleme, nur im IE spinnt das ganze mal wieder...

Bestimme doch für die übergeordnete Tabelle die gewünschte Hintergrundfarbe:

<table style="height:100%;background:#d7d7d7;" width="100%" border="0" cellpadding="0" cellspacing="0">

Außerdem ist um das Bild unten und rechts ein kleiner Rahmen. Im Template sind die Border-Werte auf 0.

Entferne die Leerzeichen bzw. Zeilenumbrüche (= whitespaces) im HTML-Quelltext:

<td width="150"><a href="http://www.tutorials.de/forum/images/flyer/$eventflyer"><img src="thumbs.php?img=images/flyer/$eventflyer" border="0" alt="Flyerthumb für $eventtitle" title="Flyerthumb für $eventtitle"></a></td>

oder notiere folgende CSS-Regel im Stylesheet:

img { 
display:block;
}

 

[Ma-Ju]

Ohne auf dein Problem einzugehen würde ich dir http://notepad-plus.sourceforge.net/de/site.htm notepad++ empfehlen, das im Gegensatz zum Windows Notepad syntaxhilighting und Autovervollständiung für viele Sprachen hat.

Danke, aber ich benutze schon einen Editor mit Syntax-Highlighting.

@michaelsinterface
Aber ich will den Link mit "zum Event" ganz unten haben.

 

[Maik]

Sorry, das ging aus deinem Eingangsposting nicht klar hervor. Hier mein Lösungsvorschlag:

<table style="height:100%;background:#d7d7d7;" width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr bgcolor="#ececec">
        <td colspan="3" style="font-weight:bold;">$eventtitle - $eventdate</td>
    </tr>
    <tr>
        <td width="150" rowspan="4"><a href="http://www.tutorials.de/forum/images/flyer/$eventflyer"><img src="thumbs.php?img=images/flyer/$eventflyer" border="0" alt="Flyerthumb für $eventtitle" title="Flyerthumb für $eventtitle"></a></td>
        <td>Einlass:</td><td>$eventopen Uhr</td>
    </tr>
    <tr>
        <td>Ort:</td><td>$eventloc</td>
    </tr>
    <tr>
        <td>Preis:</td><td>$eventprice Euro</td>
    </tr>
    <tr>
        <td colspan="2" width="100%" valign="bottom"><a href="?$config[switchvar]=events&$config[contentvar]=details&id=$eventid"><img src="http://www.tutorials.de/forum/images/cboxes/c_content_eventdetail.jpg" border="0" alt="zu den Details" title="zu den Details"></a></td>
    </tr>
    <tr>
        <td colspan="3" style="background-image: url(./images/trenndot.gif); background-repeat: repeat-x;" height="1"><img src="./images/Abstandhalter.gif" alt="" border="0" height="1"></td>
    </tr>
</table>

 

[Ma-Ju]

Thx, hat geklappt!