Firefox will nicht scrollen

[Stefan]

Hallo,

ich habe ein Problem mit dem Fuchs, ich habe einen Container in einer Tabellenzelle platziert und dieser soll immer vertikal scrollbar sein (Natürlich wenn genug Inhalt im Container ist). IE machts ohne zu meckern, Safari auch nur FF zeigt zwar den blinden Scrollbalken an, weigert sich aber diesen bei großem Inhalt zu aktivieren.

Hier der Codeschnipsel:

<table border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td style="width:25%; background-color:#000000; background-image:url('grafik/bg.gif'); background-position:right; background-repeat:repeat-y;" rowspan="3">
  </td>
  <td style="width:50%; height:70px">
   <img src="grafik/logo.gif" style="float:right; margin-left:15px" width="280" height="55" alt="Logo">
  </td>
  <td style="width:25%; background-color:#000000; background-image:url('grafik/bg2.gif'); background-position:left; background-repeat:repeat-y;" rowspan="3">&nbsp;
  </td>
 </tr>
 <tr>
  <td style="width:50%">
   <div style="padding-top:20px; width:100%; height:100%; overflow:scroll; overflow-x:hidden"><p>Textbereich</p>
   </div>
  </td>
 </tr>
</table>

Hat jemand einen Ansatz zu dem Problem?

[Stefan]

Hat denn garniemand einen Vorschlag zu meinem Problem? Es ist wirklich dringend und ich will ungern zum iFrame greifen.

[gary]

Hi Stefan,

Also zur Verifikation:
Du hast eine Tabelle. In eine Zelle Hast du ein Container (Div-Box)?
Also du willst innerhalb einer Tabellenzelle scrollen?

Wäre nett, wenn du das Problem nochmal genau beschreiben könntest. Das mit dem Scrollen habe ich verstanden, nur nicht wo genau.

Viele Grüsse

gary

[Stefan]

Hi Gary,

ja ich habe eine Tabelle mit 3 Zellen, die linke und die rechte Zelle sind jeweils 25% breit und die mittlere 50% breit, die Tabelle ist 100% hoch. In der mittleren Zelle befindet sich ein div-Container der 100% breit und hoch ist (also immer genauso groß wie die mittlere Zelle), dieser soll bei übergroßem Inhalt scrollen, was im IE funktioniert im FF leider nicht. Weiße ich dem Container eine Pixelgröße zu den versteht das auch der FF aber ich würde gern mit Prozenten arbeiten, zumindest was die Höhe betrifft, in der Breite ist mir das egal.

Viele Grüße,
Stefan

[Auge]

Hallo

ja ich habe eine Tabelle mit 3 Zellen, die linke und die rechte Zelle sind jeweils 25% breit und die mittlere 50% breit, die Tabelle ist 100% hoch. In der mittleren Zelle befindet sich ein div-Container der 100% breit und hoch ist (also immer genauso groß wie die mittlere Zelle), dieser soll bei übergroßem Inhalt scrollen, was im IE funktioniert im FF leider nicht. Weiße ich dem Container eine Pixelgröße zu den versteht das auch der FF aber ich würde gern mit Prozenten arbeiten, zumindest was die Höhe betrifft, in der Breite ist mir das egal.

Du gibst dem Elternelement des <div>s (deiner Tabellenzelle) keine Höhenangabe mit. Das ist das Problem.

Hier mal der entsprechende Ausschnitt aus deinem Eröffnungsposting.

 <tr>  
  <td style="width:50%">  
   <div style="padding-top:20px; width:100%; height:100%; overflow:scroll; overflow-x:hidden"><p>Textbereich</p>  
   </div>  
  </td>  
 </tr>

Nach diesem Code zu urteilen, wird FF das <div> immer so groß ziehen, wie es der Inhalt erfordert. Erst, wenn du für der Elternelement eine Größenangabe machst, wird sich das <div> danach richten können. Jetzt sind es für das <div> 100%, aber 100% wovon?

Wenn du die Höhe hingegen in Pixeln angibst, ist da ein definierter, absoluter Wert, _deshalb_ klappt es dann auch im FF, wie du ja schon bemerktest.

Mit Prozentangaben wirst du aber Probleme haben. Ich vermute mal, du willst eine Kopfzeile haben (Höhe: 70px) und dem Inhalt in der darauffolgenden Zeile die restliche Höhe des Browserfensters lassen. Leider gibt es mit CSS keine Möglichkeit, zu rechnen (z.B. "Höhe = 100% - 70px")[1] und eine geschätzte Höhenangabe für das <div> wird bei dir passen, tut es aber in anderen Browsern widerum nicht (andere Höhe des Viewports).

Davon abgesehen kennt jeder Benutzer das Konzept des Scrollens des ganzen Fensters, kann damit also auch umgehen. Da sollte es mMn nicht so wichtig sein, ob das Logo der Seite permanent zu sehen ist.

[1] Komm mir jetzt bitte keiner damit, dass dies in CSS3 funktionieren wird. Das stimmt zwar, aber bis dies von allen dann relevanten Browsern beherrscht wird, gehen leider noch Jahre in's Land.

Tschö, Auge

[Stefan]

Danke für die Erklärung, es liegt definitiv am fehlenden Elternelement da kann man leider nix machen. Ich habe das ganze jetzt mit iframe gelöst, dem kann ich flexible Prozentwerte zuweisen und jeder Browser schnallts. Das ist zwar nicht die feinste Lösung aber wenigstens bleibt mein Layout wie ich es möchte erhalten.