Hallo,

ich habe mir kürzlich Opera runtergeladen und damit ein bisschen rumexperimentiert. Jetzt stehe ich vor einem Problem.
Ich habe eine Tabellenspalte mit einem Hintergrund versehen. Bei Opera wird dieser jedoch grundsätzlich anders dargestellt als im Internet Explorer. Ich bin ratlos.

Das Hintergrundbild hat eine Breite von 100 px und die Spalte auch. Bei Opera wird jedoch immer noch ein Stückchen drangehängt - warum?
Ich habe zur Veranschaulichung rechts ein Stück pinken Rahmen eingefügt, es handelt sich um die linke Spalte der unteren Tabelle:

Link

Gruß
Caro

So wie ich da sehe ist es eher ein Internet Explorer Problem, da der "zu wenig" anzeigt.

Arbeite mal mit den HTML-Attributen cellpadding und cellspacing und kontrollier noch mal deine Breitenangaben. Evtl. probier auch mal den Hintergrund mit CSS zu erstellen. Der dürfte die Breite allerdings nicht beeinflussen.

Stimmt, wenn ich padding=0 setze, egal ob per html oder css, ist das Überstehende bei Opera weg. Leider klebt jetzt auch die Schrift am linken Rand. Da nützt es auch nichts, wenn ich den Hintergrund per css einbinde. Was jetzt?

dann scheint dein Inahlt die Tabelle zum Vergrößern zu zwingen. Setzt mal in die Table-CSS-Definition table-layout:fixed rein

hab ich. Der "Inhalt" besteht aus ein paar Testbuchstaben - da muss mehr reinpassen...

gehts immer noch net?

Nein, hab die Seite mal aktualisiert. Wie gesagt, jetzt mit Padding, ohne war das Problem weg, aber der Text hat halt am Rand geklebt. Da muss es doch eine Lösung ohne blind-gif geben?? Das Problem ist ja auch nur bei Opera.
Offensichtlich legt der Browser das padding nicht nach innen sondern nach aussen und vergrößert einfach die Spalte...

probier doch mal, in der Tabellenzelle selbst das padding auf Null zu setzen, und in der Tabellenzelle ein div mit padding von 20 px reinzusetzen.

Oder noch einfacher wäre es, das ganze als Standard-Seite mit css und divs zu bauen. (Ich muss das einfach schreiben, irgendetwas drängt mich dazu )

---
www.kuminatano.de

Stimmt, jetzt geht es - danke!

Oder noch einfacher wäre es, das ganze als Standard-Seite mit css und divs zu bauen.

Sorry, ich bin css-Anfänger...

Nicht so tragisch, ist nicht viel schwerer als Design per Tabellen. Außerdem kann man dann stolz seinen XHTML 1.1-Verified-Button einbinden ;)

---
Lewi = ehemals the_doc

Caro schrieb am 08.12.2003 21:26 Nein, hab die Seite mal aktualisiert. Wie gesagt, jetzt mit Padding, ohne war das Problem weg, aber der Text hat halt am Rand geklebt. Da muss es doch eine Lösung ohne blind-gif geben?? Das Problem ist ja auch nur bei Opera. Offensichtlich legt der Browser das padding nicht nach innen sondern nach aussen und vergrößert einfach die Spalte...

Richtig! Und damit liegt Opera (wie übrigens alle Gecko-Browser) nach den Richtlinien des W3C absolut richtig. Die Unterschiede die du beobachtet hast sind auch als "Box-Model-Bug" des Internet Explorers bekannt. Eine Breitenangabe bezieht sich immer auf den Content-Bereich eines Elements, ein evtl. vorhandener Wert für Innenabstand (Padding) oder Rand (Border) vergrößert das Element optisch.

So rechnen die gängigen Browser:

Internet Explorer:
angegebene Breite = Border + Padding + Content + Padding + Border

Mozialla, Firebird, Opera:
angegebene Breite = Content

Gerade ohne Layout-Tabellen sind wegen der unterschiedlichen Darstellung pixelgenaue Layouts fast nicht möglich. Schade dass Microsoft das mal wieder versemmelt hat. Die Gecko-Browser haben dafür einen "Floating-Bug", der die margin-Werte bei floatenden Elementen verdoppelt.

HTH

---
Schützenverein „Einigkeit“ Autenzell-Rettenbach
meisterschuetzen.net - Der Treffpunkt für Sportschützen

OK, ich habe jetzt mal was ganz neues ausprobiert und bin leider schon wieder auf Probleme gestoßen bei dem Versuch, es IE und Opera recht zu machen.

Es handelt sich um eine Tabelle mit zwei Zeilen. Die obere Zeile besteht aus einer Spalte, die die ganze Breite einnimmt und ein Bild enthält.
Die untere Zeile besteht aus 3 Spalten:



Das Problem:
Wie kann ich die Breite der unteren 3 Spalten festlegen? Lösungsversuche:

1. mit der colgroup:
Wenn ich sie über dem 2.

Du solltest nie HTML-Attribute und CSS kombinieren - das sorgt nur für Probleme. Definiere die Hintergrund-Farbe doch auch per CSS.

Falsch:


Ebenfalls falsch:

Dafür gibt es die CSS-Anweisung "vertical-align: top;"

Damit ist auch das Attribut "width" ausgeschlossen und sollte durch eine entsprechende CSS-Anweisung ersetzt werden. Colgroup wird leider nur von wenigen Browsern unterstützt. Korrekt wäre tatsächlich eine Weitenangabe für die einzelnen Tabellenzellen, evtl. kommt diese auch erst zur Wirkung, wenn sich mehr als nur ein paar Worte in den Zellen befinden.




---
Schützenverein „Einigkeit“ Autenzell-Rettenbach
meisterschuetzen.net - Der Treffpunkt für Sportschützen

Ok, ich hab jetzt weitgehend alles in css ausgedrückt - und es funktioniert immernoch nicht:



Ich vermute dass das ganze mit dem cellspacing in der ersten Zeile zu tun hat. Wie ersetze ich das mit css? Ich habe es mit border-spacing:0px versucht, aber das hat keine Auswirkung.

Noch was: Wie zentriere ich die gesamte Tabelle mit css?

Ersatz für cellspacing:



Horizontal zentrierst du deine Tabelle wenn du ihr links und rechts einen automatischen Außenabstand (margin) zuweist.



Der Internet Explorer interpretiert diese Angabe allerdings nicht korrekt und zeigt die Tabelle immer noch linksbündig an. Definiere deshalb zusätzlich:



Das Attribut text-align ist zwar dafür eigentlich nicht gedacht, aber es funktioniert.

---
Schützenverein „Einigkeit“ Autenzell-Rettenbach
meisterschuetzen.net - Der Treffpunkt für Sportschützen