Darstellungsunterschied Fx / Opera

[Ralf]

Hallo,

ich habe im Opera leider ein Darstellungsproblem, welches sich nicht auf Fx oder andere getestete Browser auswirkt:

http://www.janus-wa.de/layouts/leonardo/tpl_unterseite.html

Ich kann mir leider nicht erklären, wo das Problem liegt.
Ich habe also eine rechts-floatende Sidebar (roter Rand):

  
#sidebar {  
 width: 210px;  
 padding-top: 10px;  
 margin-left: 10px;  
 float: right;  
 border: 1px solid red;  
}  

um die Sidebar floatet eine Textspalte (grüner Hintergrund)

  
.textcol {  
 margin: 29px 20px 0 20px;  
 overflow: hidden;  
 background: lime;  
}  

Gut, die Margins, sollten sich hier quasi addieren. Aber ist das das Problem?

Ich möchte das Template möglichst variabel haben, d.h.: Die Textspalte soll keine feste Breite bekommen. Wenn keine Sidebar angezeigt wird, so passt sich die Textspalte dem verfügbaren (weißen) Platz an. Das klappt auch überall ganz gut. Wird eine Sidebar angezeigt so soll die Textspalte zwar die Sidebar umfließen, jedoch soll der Text nicht darunterfließen - sprich: die Textspalte soll automatisch schmaler werden. Um das zu erreichen, habe ich der .textcol die Eigenschaft "overflow: hidden;" zugewiesen.

Was mich nun allerdings wurmt, ist, dass der Opera das eben "fast" wie gewünscht (diehe Fx) darstellt: Die Spalte verhält sich quasi korrekt, wird schmaler, jedoch ragt sie am Ende der Sidebar noch ein kleines Stück in die Sidebar hinein..

Hat das evtl. etwas mit den Margins zutun, oder gar dem overflow: hidden? Oder handelt es sich vllt. sogar um einen Bug im Fx oder Opera?

Vielen Dank schonmal im Voraus und Gruß,

Ralf

[Cyx23]

Hallo,

Was mich nun allerdings wurmt, ist, dass der Opera das eben "fast" wie gewünscht (diehe Fx) darstellt: Die Spalte verhält sich quasi korrekt, wird schmaler, jedoch ragt sie am Ende der Sidebar noch ein kleines Stück in die Sidebar hinein..

Bei mir sitzt (Opera) der Textblock gleich tiefer/unter dem rechten Block.

Ohne margin stimmts wieder. Ohne overflow klappts auch besser, dann läuft
der Text unter der "Sidebar" weiter.

Vielleicht versucht du so etwas:

  
.textcol {  
  margin-right:250px;  
  overflow: visible;  

Grüsse aus Düsseldorf

Cyx23

[Ralf Heumann]

Bei mir sitzt (Opera) der Textblock gleich tiefer/unter dem rechten Block.

Ja, das hatte ich nur nicht erwähnt, weil es sowieso ersichtlich ist.

Ohne overflow klappts auch besser, dann läuft
der Text unter der "Sidebar" weiter.

Ja, soll er ja aber nicht, daher overflow: hidden, um den Text-Container zu "festigen" damit ein variables Spaltenlayout geschaffen wird.

Vielleicht versucht du so etwas:

.textcol {
  margin-right:250px;
  overflow: visible;

  
Somit wäre das Layout dann nicht mehr flexibel, sprich: es würde sich nicht mehr automatisch anpassen, je nachdem, ob die Sidebar angezeigt wird oder nicht.  
  
Aber nichtsdestotrotz habe ich nach, ca. 2 Stunden andauernden, verzweifelten Try & Error Aktionen einen (seltsamen) Workaround erarbeiten können:  
  
<http://www.janus-wa.de/layouts/leonardo/testcase.html>  
  
Und zwar habe ich ein DIV (id="floater") über die Textspalte gesetzt (rot), ihm eine width:18px; verpasst sowie die Höhe ausreichend vergrößert um an das Top-Margin der Textspalte zu gelangen und das DIV links-floaten lassen.  
Das ganze zeigte seltsamerweise allerdings erst dann die gewünschte Wirkung, nachdem ich dem DIV zusätzlich einen Border zugewieden habe (hier: damit unsichtbar).  
  
Dieses floatende DIV hat die Textspalte anschließend im Opera "nach oben gezogen" wo es hin sollte und dient gleichzeitig als 20px Platzhalter links neben der Textspalte. Nach ein paar Margin/Padding-Anpassungen zeigte der Workaround dann in allen Browsern die gewünschte Wirkung.  
  
Klar ist dieses zusätzliche DIV nun unschön (und mysteriös, dass es funktioniert), aber es schien mir die einzige Möglichkeit zu sein - Die Textspalte ist somit nun genauso anpassungsfähig, wie ich mir das vorgestellt habe.  
  
Gruß,  
Ralf