Tabellenproblem mit opera

[lina-]

moin alle :)

ich habe ein seltsames Phänomen im Opera... Eine Tabelle liegt innerhalb eines Divs. Hier das CSS zu den beiden Elementen:

  
div.foo{  
 border-style:solid;  
 border-width:1px;  
 position:absolute;  
 width:140px;  
 height:111px;  
 margin-left:95px;  
 display:none;  
}  
table.foo{  
   text-align:center;  
   background-color:#FFFFFF;  
   cursor:pointer;  
   font-family:tahoma,helvetica;  
   font-size:8pt;  
   border:0px;  
   border-collapse:collapse;  
   position:absolute;  
   top:0px;  
   left:0px;  
   border-width:1px;  
   border-style:solid;  
}  

wichtig: das Div ist 140px breit (stimmt auch)
Die Tabelle wird innerhalb eines javascripts auf width=100% gesetzt.
Sie wird auch so groß, nur seltsamerweise hat sie auf der rechten Seite immer einen kleinen weissen Rand (das Weisse kommt natuerlich von der Hintergrundfarbe). Dieser Rand ist ungefähr 5px breit (grob geschätzt) - also nichts was ich ignorieren könnte.
Testweise hab ich mal nen border mit eingeblendet - dieser umrahmt die Tabelle an der tatsächlich gewünschten Breite und der Rand ist dennoch rechts daneben.
Wenn ich die Tabelle fest auf irgendeinen Wert setze, nimmt die Tabelle die richtige Größe an (zumindest der eingeblendete Rahmen) - doch der Rahmen bleibt (wächst aber zumindest nicht proportional an, wie ich es befürchtet hatte).Ab einer Breite<110px ist dieser Rand allerdings verschwunden.
Setze ich eine kleinere Größe fest und der Tabelleninhalt ist größer, so ist dieser Rand verschwunden.

Wie gesagt: das tritt nur unter Opera auf (Version 8.5)
Kann mir das jemand von den Opera-Auskennern erklären?

liebe Grüße aus Berlin
lina-

[Gernot Back]

Hallo lina,

Die Tabelle wird innerhalb eines javascripts auf width=100% gesetzt.

Das Phänomen habe ich bei Opera schon häufig beobachtet, dass nachträgliche Änderungen der Style-Eigenschaften per Javascript nur unvollständig gerendert werden. Wenn man dann auf ein anderses Fenster oder den Desktop und zuückschaltet, wird dann alles so dargestellt wie gewünscht.

Was du versuchen könntest, ist dem inneren Element, das die Breite des äußeren Elementes übernehmen soll, anstelle von 100% den Wert 'inherit' zuzuweisen. Da macht aber der IE vielleicht nicht mit, der doch 100% braucht. (ggf nur if(window.opera))

Eine andere Möglichkeit ist, die offsetWidth des äußeren Elements auszulesen und sie dem inneren Element + 'px' als style.width zuzuweisen.

Gruß Gernot

[lina-]

moin Gernot :)

Das Phänomen habe ich bei Opera schon häufig beobachtet, dass nachträgliche Änderungen der Style-Eigenschaften per Javascript nur unvollständig gerendert werden. Wenn man dann auf ein anderses Fenster oder den Desktop und zuückschaltet, wird dann alles so dargestellt wie gewünscht.

Das ist leider in meinem Fall nicht so... :(
Also auch das hin- und herschalten des Fensters bringt keinerlei Veränderung.

Was du versuchen könntest, ist dem inneren Element, das die Breite des äußeren Elementes übernehmen soll, anstelle von 100% den Wert 'inherit' zuzuweisen. Da macht aber der IE vielleicht nicht mit, der doch 100% braucht. (ggf nur if(window.opera))

Hab ich natürlich ausprobiert - aber das ergab keine Änderung des Zustandes

Eine andere Möglichkeit ist, die offsetWidth des äußeren Elements auszulesen und sie dem inneren Element + 'px' als style.width zuzuweisen.

Das hatte interessanterweise zur Folge, dass die Tabelle ein wenig größer wurde und der Rand mitwuchs.

Vielen Dank trotzdem für deine Hilfe

liebe Grüße aus Berlin
lina-

[lina-]

moin  :)

es ist sooo simpel... es lag an der css-Eigenschaft border-collapse:collapse; für die Tabelle! Das habe ich spaßeshalber mal gelöscht und schon war dieser dumme Rand weg!

Ich bin froh, dass es jetzt geht - aber meine Neugier ist noch nicht befriedigt. Hat jemand eine plausible Erklärung für dieses Verhalten?

liebe Grüße aus Berlin
lina-

[Axel Richter]

Hallo,

es ist sooo simpel... es lag an der css-Eigenschaft border-collapse:collapse; für die Tabelle! Das habe ich spaßeshalber mal gelöscht und schon war dieser dumme Rand weg!

*g*
Erste Regel des Konstruierens: Mach es zu gross und hau dann solange drauf, bis es passt.

Ich bin froh, dass es jetzt geht - aber meine Neugier ist noch nicht befriedigt. Hat jemand eine plausible Erklärung für dieses Verhalten?

Liebe lina- ;-)),

es kann keine plausiblen Erklärungen für das Verhalten von Konstrukten geben, welche nach der oben angeführten ersten Regel des Konstruierens gebaut wurden. Sie verhalten sich chaotisch, wie ihre Konstrukteure.

Das Folgende verhält sich in IE6.0, FF1.0.6 und Opera8.5 völlig identisch:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Opera Tabellenproblem</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
<!--  
body {background-color:#00E090;}  
  
div.foo1{  
 border-style:solid;  
 border-width:1px;  
 position:absolute;  
 width:140px;  
 height:111px;  
 margin-left:95px;  
 /*display:none;*/  
}  
table.foo2{  
   text-align:center;  
   background-color:#FFFFFF;  
   cursor:pointer;  
   font-family:tahoma,helvetica;  
   font-size:8pt;  
   /*border:0px;*/  
   border-collapse:collapse;  
   position:absolute;  
   top:0px;  
   left:0px;  
   /*border-width:1px;*/  
   /*border-style:solid;*/  
}  
  
-->  
</style>  
</head>  
<body>  
 <div class="foo1">  
  <table id="t1" class="foo2">  
   <tr>  
    <td>Test1</td>  
   </tr>  
  </table>  
 </div>  
 <button onclick="document.getElementById('t1').style.width='100%';">Table100</button>  
</body>  
</html>  

Bau es so um, dass es Dein Problem zeigt, dann diskutieren wir weiter.

viele Grüße

Axel

[lina-]

moin Axel :)

Erste Regel des Konstruierens: Mach es zu gross und hau dann solange drauf, bis es passt.

*g* ich hab es immer andersherum gemacht... Fang klein an und bläh es solange auf bis es falsch wird ;)

es kann keine plausiblen Erklärungen für das Verhalten von Konstrukten geben, welche nach der oben angeführten ersten Regel des Konstruierens gebaut wurden. Sie verhalten sich chaotisch, wie ihre Konstrukteure.

Was solln das heissen? Dass ich eine Chaotin bin? *breitgrins* du weisst ja nich wie recht du hast...

Das Folgende verhält sich in IE6.0, FF1.0.6 und Opera8.5 völlig identisch:

Ganz genau....
das einzige was zu meiner Original-Anwendung noch fehlt ist das dynamische erstellen der Tabelle... hab das mal in Kurzform dazugefügt:

  
function addCells(){  
 var table=document.getElementById("t1");  
 var tr=document.createElement("tr");  
 table.appendChild(tr);  
 for(var i=0;i<5;i++){  
  var td=document.createElement("td")  
  td.appendChild(document.createTextNode("foo"+i));  
  tr.appendChild(td);  
 }  
 table.style.width="100%";  
}  

Klar, dass dann bei onclick "addCells" aufgerufen wird -ne?
Aaaaber: Es verhält sich immer noch korrekt ;)

Bis auf diese schrecklich grüne Hintergrundfarbe (bäh) hat sich ja nicht viel verändert am CSS oder an dem Grundsatz, dass die Tabelle dynamisch gefüllt wird!
Wie gern würde ich da jetzt meinen Fehler in der Anwendung finden und den Hack mit dem entfernten border-collapse rausnehmen... (obwohl das nich mal auffällt)

Ich glaube da werd ich mich Montag noch mal ransetzen und alles durchprobieren :]

liebe Grüße aus Berlin
lina-

[Axel Richter]

Hallo,

Was solln das heissen? Dass ich eine Chaotin bin? *breitgrins* du weisst ja nich wie recht du hast...

Chaoten sind symphatisch, wenn sie das Chaos beherrschen ;-)).

function addCells(){
var table=document.getElementById("t1");
var tr=document.createElement("tr");
table.appendChild(tr);

...

>   
> Aaaaber: Es verhält sich immer noch korrekt ;)  

Nein, nicht im IE. Jede Tabelle hat mindestens ein TBODY-Element, auch wenn in HTML4.1 \_beide\_ Tags dafür optional sind. Die TR-Elemente sind also keine Kinder des TABLE-Elements, sondern des TBODY-Elements. Ja, auch der IE kann sich standardkonform verhalten, ... manchmal ;-)).  
  
~~~javascript
  
function addCells(){  
 var table=document.getElementById("t1");  
 var tbody= table.getElementsByTagName("tbody")[0];  
 var tr=document.createElement("tr");  
 tbody.appendChild(tr);  
 for(var i=0;i<5;i++){  
  var td=document.createElement("td")  
  td.appendChild(document.createTextNode("foo"+i));  
  tr.appendChild(td);  
 }  
 table.style.width="100%";  
}  

viele Grüße

Axel

[Axel Richter]

Hallo,

Chaoten sind symphatisch, wenn sie das Chaos beherrschen ;-)).

"symphatisch".bewegeZeichen("h", nachRechts(2 Stellen))
Ich wusste, irgendwo muss da ein "h" rein ;-))

viele Grüße

Axel

[lina-]

moin Axel :)

Chaoten sind symphatisch, wenn sie das Chaos beherrschen ;-)).
"symphatisch".bewegeZeichen("h", nachRechts(2 Stellen))
Ich wusste, irgendwo muss da ein "h" rein ;-))

Ich habe das Kompliment auch so verstanden ;)

liebe Grüße aus Berlin
lina-

[lina-]

moin Axel Richter :)

Nein, nicht im IE. Jede Tabelle hat mindestens ein TBODY-Element, auch wenn in HTML4.1 _beide_ Tags dafür optional sind. Die TR-Elemente sind also keine Kinder des TABLE-Elements, sondern des TBODY-Elements. Ja, auch der IE kann sich standardkonform verhalten, ... manchmal ;-)).

Richtig... im Original hab ich das auch so drinnen... sollte ja nur ein fixer Test für den Opera sein ;)

liebe Grüße aus Berlin
lina-