SPAN-Container Interpretationsunterschiede : IE / Firefox

Verfasst am: 27.07.2007, 23:14

Hi,

ich teile eine Seite mittels "table" in ihre Bereiche auf : Kopf, Mitte, Fuss. Die Mitte unterteile ich in drei Spalten, linker Navibereich, rechter Navibereich, Mitte = Content > Das uebliche halt.

Die Groesse oben und unten ist statisch, deren Inhalte ja ebenso. Die NavBars und der Content - jeweils <td>-Container sind inhaltlich dynamisch und somit auch seperat scrollbar. Um den statischen Aufbau zu gewaehrleisten, befinden sich in den <td>-Containern <span>-Container, die folgendermassen aussehen:

Code:

<td style='width:200px; vertical-align:top; height:100%' class='tableRightNavi'>
<span style='width:100%;height:100%;overflow:auto'>
jede Menge jugendfreier Inhalt
</span>
</td>

Nun zum Problem: Im IE funktioniert alles praechtig, FF haelt sich allerdings nicht an die Anweisungen und die gesamte Seite wird gescrollt.
Ich habe den Tausch in <div>-Container probiert - das Problem ist aehnlich, nur verschwinden dann die jeweils rechten Container im Nirvana - moeglicherweise wegen der 100%-Angabe.

Kann mir jemand weiterhelfen ?

THX!

Administrator Anmeldungsdatum: 26.11.2004 Beiträge: 903

Hallo BitH,

vielleicht kannst du mal den Link zur Seite mitteilen, da kann ich mir das besser vorstellen Lachen

Aber was ich jetzt schon sagen kann: die Eigenschaft overflow kann nur auf block-Elemente angewandt werden. Da du es aber schon mit div versucht hast, ist das wohl nicht ganz die Lösung. Setz doch das overflow mal direkt in die td-styles.

Verfasst am: 28.07.2007, 09:03

webmaster hat Folgendes geschrieben:

Hallo BitH,

vielleicht kannst du mal den Link zur Seite mitteilen, da kann ich mir das besser vorstellen Lachen

Es handelt sich um ein generelles Problem:

Bei dieser site nutze ich reine <DIV>-Container - da laeufts auch so halbwegs, nur gibt's mit dieser Loesung Probleme, sich an die Groesse des Browserfensters anzupassen. Der Trick hierbei ist, dass die Container als Layer uebereinander gelegt wurden, weshalb sie auch statisch auf dem Bildschirm bleiben: http://www.c-bit.org/

Auf dieser site funktioniert dann wiederrum die Anpassung auf die Browser-Groesse, aber entsteht bereits das overflow-Problem, hier haetten wir auch die notwendige Spielwiese um das Problem zu loesen: http://www.niedersachsen-it.de/

Und hier schlussendlich den Patienten: http://www.sossmar.de/

Als man mal ganz frueher noch iframes genutzt hat, war's alles irgendwie einfacher Winken

Aber das ist ja inzwischen sowas von verpoent.

webmaster hat Folgendes geschrieben:

Aber was ich jetzt schon sagen kann: die Eigenschaft overflow kann nur auf block-Elemente angewandt werden. Da du es aber schon mit div versucht hast, ist das wohl nicht ganz die Lösung. Setz doch das overflow mal direkt in die td-styles.

Werde ich beim zweiten Link mal testen und berichten - aber erstmal fruehstuecken Smilie

THX!

Verfasst am: 28.07.2007, 10:01

<td style="overflow:auto"> ist keine Alternative.
Ich habe es grad getestet - mit dem Ergebnis, dass im FF keine Aenderung erkennbar war, im IE jedoch der Scrollbalken verschwand und da im body-Block kein Scrollbalken sichtbar war, der Content einfach unten aus dem Bildschirm lief - d.h. der Footer fehlte somit.

Verfasst am: 28.07.2007, 10:17

Um einen stabilen Rahmen, mit einer festen Breite bzw. Hoehe zu erhalten, sehe ich mich leider gezwungen <table> zu verwenden. Die Alternative, saemtliche Tables gg. <DIV>-Container auszutauschen scheitert an dem simplen Feature "%".
Ich kann einer Tabelle problemlos sagen: 100% Breite - 100% Hoehe. Auch einem <TD>-Block vermag ich sowohl eine Pixel-Angabe, als auch eine relative Groesse zu uebergeben. Die <DIV>-Container stehen alle fuer sich, sodass ich zwar damit einen statischen Rahmen bauen koennte, dieser Rahmen aber nicht um den Content herumgebaut waere, sondern ueber den Content gelegt.

Zwei unterschiedliche Beispiele mit <DIV>-Containern:

1. absolute Groessenangabe : funktioniert - nur eben mit den Einschraenkungen, die eine statische Groesse nun einmal automatisch mitsich bringt

Code:

siehe http://www.c-bit.org/frame.ms-faq/

2. relative Groessenangabe : funktioniert im IE aber im FF nicht

Code:

siehe http://www.c-bit.org/frame.news-feed/

Daher erschien es mir bislang immer sinnvoll, dem <TD>-Block die Groesse zu uebergeben - so gibt's auch keine Ueberlappungen mit anderen Bloecken und in dem <TD>-Block dann ein <DIV> oder <SPAN> auf 100% Groesse reinzusetzen.
Meine Vermutung ist einfach, dass IE die Groesse des <TD>-Blocks als gegeben hinnimmt und dem <DIV> oder <SPAN>-Block nicht mehr Platz zugesteht, wogegen der FireFox eher dem Wunsch des <DIV> bzw. <SPAN>-Blocks nach Vergroesserung nachkommt und auf die Groessenangabe im <TD>-Block pfeifft.