✔ Tabelle mit Scrollbar nur in IE

Status
Nicht offen für weitere Antworten.
Eddymaniac

Eddymaniac

Erfahrenes Mitglied
Hallo Leute,

hab ein kleines Problem. Ich hab mir eine Seite gemacht und möchte, dass innerhalb der Tabelle gescrollt werden kann. Im IE funktioniert es auch wunderbar. Aber viele verwenden doch mittlerweile Firefox oder andere. Ich verwende Firefox und da funktioniert es leider nicht. Hat von euch jemand einen Lösungsvorschlag?

hier die Seite:
http://www.fisko.de/testseite/gasthof.html
 
Ok danke erstmal. Jetzt bekomme ich erstmal den Scrollbalken in meine Tabelle. Jetzt ist aber noch das problem, dass der Scrollbalken nur dann angezeigt werden soll, wenn es notwenig ist. Und das funktioniert leider nicht fehlerfrei. wenn ich meinen Browser in der Breite veränder, funktioniert es. Allerdings wenn ich meinen Browser in der Höhe verschiebe, funktioniert es nicht. Dann reagiert er nicht. Hab ich in meinem Coding was falsch? Oder gibts noch ne andere Möglichkeit?

hier die Seite:
http://www.fisko.de/testseite/gasthof.html
 
Im Quelltext deiner Seite stecken ein paar Ungereimtheiten, die zu unterschiedlichen Darstellungen in den Browsers führen.

  1. Es fehlt eine Doctype-Deklaration für das HTML-Dokument.
    Somit interpretiert der IE die 100% -Höhe für die äussere Tabelle so, dass er die scrollfähige Tabellenzelle bis zum unteren Browserfenster ausdehnt, obwohl ihre Höhe im StyleSheet auf 385px festgesetzt ist. Die non-IE Browsers (FireFox, Mozilla, Opera) zeigen die Tabellenzellenhöhe mit 385px korrekt an - eine scrollfähige Tabellenzelle mit dynamischer Höhe ist nämlich nicht möglich.
  2. Im StyleSheet ist die CSS-Klasse table.left notiert, im HTML-Source lautet die Klasse für die Tabelle aber .center :confused:

Korrigierter Source-Code, basierend auf deiner verlinkten Demo-Seite:
  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>
<style type="text/css">
body
{
text-align: center;
color: #000000;
background: #FDF0F0;
}

table.center
{
height: 100%;
width: 700px;
margin: 0 auto;
text-align: left; /* Tabelleninhalt linksbündig ausrichten */
vertical-align: top;
border: none;
}

table, td
{
border: 0px solid #cfcfcf;
}

td.scroll
{
height: 385px;
}

a:link { color: #FF0000; }
a:visited { color: #FF0000; }
a:active { color: #FF0000; }
</style>
</head>

<body>

<table class="center">
<tr>
<td class="scroll" valign="top">
<div style="overflow: auto; height: 100%; width: 100%;">
<table valign="top">
    <tr>
        <td>
            <img src="grafiken/Gasthof.jpg" width="230" height="50" border="0" alt="">
            <br><br>
            <font face="Monotype Corsiva"><font size="+2">Wir verwöhnen Ihren Gaumen mit deutschen<br>und italienischen Gerichten.</font></font><br>
            <font face="Monotype Corsiva"><font size="+2">Unsere Räumlchkeiten stehen Ihnen für Festivitäten<br>aller Art zur Verfügng.</font></font><br><br>
            <font face="Monotype Corsiva"><font size="+2">Bei schönem Wetter servieren wir Ihnen unsere Speisen<br>auch in unserem gemütlcihen Biergarten.</font></font><br><br>
            <font face="Monotype Corsiva"><font size="+2">Unser Angebot reicht von kalt- warmen Buffents bis<br>mehrgängigen Menüs.</font></font><br>
            <font face="Monotype Corsiva"><font size="+2">Sprechen Sie mit uns, wir beraten Sie gerne!</font></font>
        </td>
        <td valign="top">
            &nbsp;&nbsp;&nbsp;&nbsp;
            <OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" HEIGHT=150 WIDTH=200 ID="Flash5">
                <PARAM NAME="Movie" VALUE="grafiken/Bild1.swf">
                <PARAM NAME="Quality" VALUE="AutoHigh">
                <PARAM NAME="Loop" VALUE="1">
                <PARAM NAME="Play" VALUE="1">
                <PARAM NAME="Scale" VALUE="ExactFit">
                <PARAM NAME="SAlign" VALUE="L">
                <EMBED ID="Flash5" SRC="grafiken/Bild1.swf" HEIGHT=150 WIDTH=200 PALETTE=BACKGROUND Quality=AutoHigh Loop=TRUE Play=TRUE Scale=ExactFit SAlign=L ALT="" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer/" TYPE="application/x-shockwave-flash">
            </OBJECT>
        </td>
    </tr>
</table>
</div>
</td>
</tr>
</table>

</body>
</html>
Anmerkung: <font face="Monotype Corsiva"><font size="+2"> ... </font></font> gilt als veraltet und sollte stattdessen mit CSS geregelt werden ;-]
 
Also generell hat sich meine frage jetzt ja erledigt. Allerdings muss es doch eine Möglichkeit geben, die Tabelle an der Browserhöhe auszurichten. Dass quasie beim laden überprüft wird wie viel platz für diese Tabelle zur verfügung steht und anhand dessen dann die Grösse zugewiesen wird.

Irgend eine möglichkeit muss es ja geben. Wäre dankbar für ne Problemlösung. Oder hat jemand eine andere Idee, wie ich das lösen könnte?

http://www.fisko.de/testseite/index.html

Das ist die komplette seite. Um den Unterpunkt Gasthof dreht es sich im Moment.
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück