Problem mit Unterschied bei Positionierung im FF und IE

[Harry P]

Hallo zusammen!

Ich habe eine Seite, die im Hauptaufbau aus einer Tabelle(Tabelle 2) mit 4 Zeilen besteht: Top, Navi, Content & Bottom. Um diese Tabelle befindet sich eine weitere Tabelle (Tabelle 1), welche die mittige Zentrierung von Tabelle 2 bewirkt.

Die Content-Zeile beinhaltet weiterhin ein div, in dem sich der Inhalt befindet und hat folgende css: <div style="height:294px; overflow:auto;">

Ich habe nun in diesem div eine Liste, die so lang ist, dass Sie einen Scrollbalken hervorruft. Nun habe ich aber neben dieser Liste ein Element, welches an einer festen Position stehen soll, auch wenn in der Liste gescrollt wird. Wie ich in anderen Posts gelesen habe, ist dies nicht ohne weiteres möglich bzw. nicht ganz einfach zu realisieren, da der IE mit position:fixed nicht klar kommt.

Daher habe ich mir überlegt, das Element "einfach" absolut zur Tabelle 2 zu positionieren (ich weiß, dass es nicht die perfekte Lösung ist!) was im Firefox auch soweit funktioniert. Komischerweise ist die Position im IF und FF unterschiedlich. Während sie im FF nach meiner Auffassugn korrekt ist, wird sie im IE absolut zum Beginn des divs in der Content-Reihe angezeigt, und daher weiterhin mitgescrollt, während das Element im FF nicht mit scrollt...

Ich dachte bislang immer, dass Elemente absolut von dort aus positioniert werden, wo das Elternelement positioniert wurde (hoffe das ist verständlich?). Und das Elternelement wäre in meinem Fall die Tabelle 2 (css --> position:relative; top:0px; left:0px;).

Daher die Frage: Wie kann ich eine gemeinsame Basis für die absolute Positionierung finden?

Gruß,
Harry

[Schuer]

Ich dachte bislang immer, dass Elemente absolut von dort aus positioniert werden, wo das Elternelement positioniert wurde

[..] wo das Elternelement *absolut* positioniert wurde.

Und das Elternelement wäre in meinem Fall die Tabelle 2 (css --> position:relative; top:0px; left:0px;).

In diesem Fall nicht, denn sie wird relativ positioniert. Ändere das einfach mal in ein position:absolute;

Viele Grüße!
_ds

[Harry P]

Hi!

[..] wo das Elternelement *absolut* positioniert wurde.

In diesem Fall nicht, denn sie wird relativ positioniert. Ändere das einfach mal in ein position:absolute;

Aber auf selfhtml ist unter css -> Positionierung doch folgendes zu lesen: "Besonders das Verhalten der Angaben absolute und relative ist anfangs etwas verwirrend. Denn absolute verhält sich durchaus relativ, wie die inneren div-Elemente im obigen Beispiel zeigen: relativ nämlich zum Rand des Elternelements, vorausgesetzt dieses Elternelement ist mit absolute, fixed oder relative positioniert. Wenn sonst kein Elternelement existiert, ist das body-Element das Elternelement."
Demnach kann das Elternelement doch auch relativ positioniert sein...

Naja, ich werde es trotzdem mal kurz testen, wobei dann ja meine Tabellen-Zentrierung nicht mehr funktionieren dürfte...

Gruß,
Harry

[Axel Richter]

Hallo,

Demnach kann das Elternelement doch auch relativ positioniert sein...

Ja, aber der Effekt von position:relative auf Elementen mit table-X display-Eigenschaften ist undefiniert. Insofern haben beide Browser Recht, weil sie laut Standard machen dürfen, was wollen sie ;-). Es ist deshalb nicht schlau, ein TABLE, TR, TD ... Element als umschließende Box für eine absolute Positionierung zu nehmen.

viele Grüße

Axel

[Harry P]

Hi!
»»Es ist deshalb nicht schlau, ein TABLE, TR, TD ... Element als umschließende Box für eine absolute Positionierung zu nehmen.

Wäre es dann besser, die Tabelle mit einem div in den Ausmaßen der Tabelle zu "umzäunen" und dieses Element relativ zu positionieren?

Gruß,
Harry

[Axel Richter]

Hallo,

Wäre es dann besser, die Tabelle mit einem div in den Ausmaßen der Tabelle zu "umzäunen" und dieses Element relativ zu positionieren?

Nein, so einfach bekommst Du dieses "Template" nicht browserübergreifend funktionierend. Mein Rat: Überdenke das Template.

viele Grüße

Axel

[yetanotheruser]

Ich dachte bislang immer, dass Elemente absolut von dort aus positioniert werden, wo das Elternelement positioniert wurde

[..] wo das Elternelement *absolut* positioniert wurde.

Das kann ja so nicht ganz stimmen oder SelfHTML schreibt schmarrn bezüglich der Positionierung von Elementen.

@First Poster:

Schreib mal deinen Code hier rein oder gib nen Link zu deiner Seite, weil mit deinen Angaben könnte das Problem auch wo völlig anderes liegen.

Gruß Ben

[Harry P]

Hallo!

Ok, Code ist zwar problematisch, da er sich aus einigen php-dateien zusammen setzt, aber ich versuch mal die Betreffenden Passagen zu extrahieren.
Dazu muss ich vorab noch sagen, dass ich Typo3 verwende (daher die komischen Marker) und die html-Datei für das Template stammt nicht von mir, ich hab sie nur übernommen, da ich ein Modul für eine Webseite im gleichen Layout einbaue...
Hoffe Ihr bekommt keinen Herzinfarkt, wenn Ihr das seht (Ich möchte hier auch keine Grundsatzdiskussion auslösen, falls irgendwas in dem Code nicht konform ist etc.): ;-)
TEMPLATE:
<HTML>
<HEAD>
</HEAD>
<BODY>
<!-- ###BODY### -->
<!-- äußere Tabelle für Zentrierung -->
<table border="0" cellspacing="0" cellpadding="0" height="100%" width="100%" style="margin-left:auto; margin-right:auto;">
<tr>
<td valign="middle">

<!-- Tabelle mit den Seiteninhalten -->
<TABLE HEIGHT=580 WIDTH=925 ALIGN=CENTER CELLSPACING=0 CELLPADDING=0 VALIGN=TOP" style="position:relative; 0px; 0px;">
 <TR>
  <TD WIDTH=925 HEIGHT=124 VALIGN=TOP>
  <IMG SRC="fileadmin/img/layout/top.gif">
  </TD>
 </TR>
 <TR>
  <TD VALIGN=TOP WIDTH=925 >
   <TABLE CELLSPACING=0 VALIGN=BOTTOM HEIGHT=30 WIDTH=100% CELLPADDING=0>
    <TR>
     <TD>
     </TD>
     <TD>
       ###NAVIGATION###
     </TD>
     <TD>
     </TD>
    </TR>
   </TABLE>
  </TD>
 </TR>
 <TR>
  <TD VALIGN=TOP HEIGHT=294 ALIGN=LEFT>
   <TABLE WIDTH=925 CELLSPACING=0 CELLPADDING=0 HEIGHT=294>
    <TR>
     <TD ALIGN=LEFT  VALIGN=TOP BGCOLOR=#FFFFFF>
      <div style="height:294px; overflow:auto;">
   ###INHALT###
      </div>
     </TD>
    </TR>
   </TABLE>
  </TD>
 </TR>
 <TR>
  <TD VALIGN=TOP HEIGHT=130><IMG SRC="fileadmin/img/layout/bottom.gif">
  </TD>
 </TR>
</TABLE>

</td>
</tr>
</table>
<!-- ###BODY### -->
</BODY>
</HTML>

Das ist mein Template: Wenn sich nun die absolute Positionierung von Elementen, die den Marker ###INHALT### ersetzen, die "Tabelle mit den Seiteninhalten" als Ausgangspunkt nehmen würden, wäre alles ok. Doch leider macht das nur der Firefox und der IE orientiert sich hingegen irgendwo an der Zelle oder dem div, welches den Inhalt enthält...

Im Inhalt wird eine Liste generiert, die u.A. auch Download-Links enthält. Wenn nun über einen Link gefahren wird, dann wird ein Vorschaubild an einer absoluten Position erstellt, was auch funktioniert, nur leider scrollt das Bild eben mit.

Hier der relevante Quellcode + CSS:
  <div id="links_4"><a href="/typo3/index.php?id=3&amp;action=download&amp;datei=32">fittness1.jpg<img src="fileadmin/scripte/vorschaubild_anzeigen.php?vorschaupfad=/tmp/vorschaubilder/32_270.jpg">

#links_4 a img {width:0px; height:0px; border-width:0px;}
  #links_4 a:hover img{position: absolute; top: 60px;
          left: 635px; width:270px; height:205px;}

So, ich hoffe, damit habe ich alles Relevante gezeigt und Ihr könnt damit was anfangen...

Ich habe es übrigens auch schon mit position:fixed versucht, was im FF auch mein Problem löst, nur leider ist der IE zu blöd dazu bzw. verbuggt...

Gruß,
Harry

[Axel Richter]

Hallo,

Hoffe Ihr bekommt keinen Herzinfarkt, wenn Ihr das seht (Ich möchte hier auch keine Grundsatzdiskussion auslösen, falls irgendwas in dem Code nicht konform ist etc.): ;-)

Fehlerhafter Code soll also zum gewünschten Ergebnis führen? Ich verkneife mir Kommentare zum Template also.

Hier der relevante Quellcode + CSS:
  <div id="links_4"><a href="/typo3/index.php?id=3&amp;action=download&amp;datei=32">fittness1.jpg<img src="fileadmin/scripte/vorschaubild_anzeigen.php?vorschaupfad=/tmp/vorschaubilder/32_270.jpg">

Das A-Element ist aber schon irgendwo zuende?

#links_4 a img {width:0px; height:0px; border-width:0px;}
  #links_4 a:hover img{position: absolute; top: 60px;
          left: 635px; width:270px; height:205px;}

So, ich hoffe, damit habe ich alles Relevante gezeigt und Ihr könnt damit was anfangen...

So passiert beim  #links_4 a:hover mit dem Bild überhaupt nichts. Es bleibt 0px mal 0px groß, also unsichtbar. Ist das Dein Problem?

Dagegen hilft ein "Trigger", der erstmal ein a:hover erzwingt. Bspw:

#links_4 a:hover { background-color:transparent; }

Mache ich das so, dann zeigt IE genau das, was Du vermutlich wolltest. Das Bild ist top: 60px; left: 635px; von der <!-- Tabelle mit den Seiteninhalten --> positioniert.

viele Grüße

Axel

[Axel Richter]

Hallo,

Mache ich das so, dann zeigt IE genau das, was Du vermutlich wolltest. Das Bild ist top: 60px; left: 635px; von der <!-- Tabelle mit den Seiteninhalten --> positioniert.

Stopp. Er positioniert an dem

<div style="height:294px; overflow:auto;">
   ###INHALT###

Nehme ich das raus, _dann_ positioniert er an der Tabelle.

viele Grüße

Axel

[Harry P]

Hiho!

Stopp. Er positioniert an dem

<div style="height:294px; overflow:auto;">
   ###INHALT###

Nehme ich das raus, _dann_ positioniert er an der Tabelle.

In der Tat - dann funzt es auch bei mir...wie kommt denn sowas?
Hmm...dann muss ich mir mal eben überlegen, wie ich dennoch eine maximale Höhe + Scrollbalken angeben kann...

Schonmal vielen Dank!!!

Was das Template angeht, werde ich das nochmal überarbeiten. Spontan fällt mir auf, dass ich in Tags mal cellpadding="0" und mal cellpadding=0 habe was sicher nicht richtig ist... ;-) Wenn Du noch nen Hinweis hast, werde ich dem natürlich nachgehen... ^^

Gruß,
Harry

[Axel Richter]

Hallo,

Wenn Du noch nen Hinweis hast, werde ich dem natürlich nachgehen...

Das, was Du vorhast, scheitert an den Layouttabellen.

viele Grüße

Axel

[Harry P]

Hi!

Wenn Du noch nen Hinweis hast, werde ich dem natürlich nachgehen...
Das, was Du vorhast, scheitert an den Layouttabellen.

Meinst Du damit die Positionierung anhand der Tabelle, oder die Vergabe einer Maximalhöhe?

Gruß,
Harry

[Ashura]

Hallo Harry.

Stopp. Er positioniert an dem

<div style="height:294px; overflow:auto;">
   ###INHALT###

Nehme ich das raus, _dann_ positioniert er an der Tabelle.

In der Tat - dann funzt es auch bei mir...wie kommt denn sowas?

Das kommt daher, dass das div–Element mit Hilfe von overflow einen so genannten „block formatting context“ bildet, woran sich alle darin enthaltenene Elemente orientieren.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Harry P]

Hallo!

Das kommt daher, dass das div–Element mit Hilfe von overflow einen so genannten „block formatting context“ bildet, woran sich alle darin enthaltenene Elemente orientieren.

Achso, ok...und bei meinem Glück gibt es auch keine Möglichkeit, das "Problem" zu umgehen, damit ich einerseits eine maximale Höhe für meinen Inhalt, andererseits aber auch die absolute Positionierung anhand der Tabelle realisieren kann, oder?

Gruß,
Harry

[Axel Richter]

Hallo,

Achso, ok...und bei meinem Glück gibt es auch keine Möglichkeit, das "Problem" zu umgehen, damit ich einerseits eine maximale Höhe für meinen Inhalt, andererseits aber auch die absolute Positionierung anhand der Tabelle realisieren kann, oder?

Doch, im Prinzip schon. Ashuras block-formatting-context ist eigentlich kein Grund, ein Element mit position:absolute nicht nach Vorgabe am nächsten es umschließenden Element mit position:[ relative | absolute | fixed ] auszurichten. Der block-formatting-context ändert ja nichts an der Definition des umschließenden Blocks.

Allerdings scheint Opera Probleme mit der Übereinanderschichtung von Elementen über Elemente mit overflow:auto zu haben.

siehe:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Titel</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
#links_4 a img { position: absolute; top: 20px; left: 635px; width:0px; height:0px; border-width:0px; z-index:1; }  
#links_4 a:hover { background-color:transparent; }  
#links_4 a:hover img { width:270px; height:205px; }  
</style>  
</head>  
<body>  
<div style="position:relative; background-color:#00AFAF; padding:20px; margin:20px; z-index:0;">  
 <p style="position:absolute; top:20px; left:635px; margin:0; padding:0; background-color:red; z-index:2;">+</p>  
 <p>oben</p>  
 <div style="height:100px; overflow:auto; background-color:#FFF;">  
  <div id="links_4"><a href="#">fittness1.jpg<img alt="ein Bild" title="" src="Beispiel.jpg"></a></div>  
  <p>Testtest zum Testen</p>  
  <p>Testtest zum Testen</p>  
  <p>Testtest zum Testen</p>  
  <p>Testtest zum Testen</p>  
  <p>Testtest zum Testen</p>  
  <p>Testtest zum Testen</p>  
 </div>  
 <p>unten</p>  
</div>  
</body>  
</html>  

Eventuell liest jemand mit, der hierfür eine Erklärung hat.

viele Grüße

Axel

[Axel Richter]

Hallo,

Allerdings scheint Opera Probleme mit der Übereinanderschichtung von Elementen über Elemente mit overflow:auto zu haben.

*argh*
Ich sehe grad, hier läuft noch Opera 8.5, eventuell sollte ich es mit Opera 9 nochmal versuchen.

viele Grüße

Axel

[Harry P]

Moin, moin!

Also wenn ich den Code bei mir in ne Datei packe, und diese öffne, dann ist beim FF alles ok, aber im IE6 wird das Bild innerhalb des scrollbaren Bereiches angezeigt... :(

Gruß,
Harry

[Axel Richter]

Hallo,

aber im IE6 wird das Bild innerhalb des scrollbaren Bereiches angezeigt... :(

Bei mir nicht.

Version 6.0.2800.1106
Build 62800.1106
Sprache Deutsch (Deutschland)
Verschlüsselungsstärke 128-Bit
Versionen aktualisieren ;SP1;Q823353;Q833989;

unter Windows 2000 SP4, alle aktuellen Patches

Kannst Du das mal irgendwo online stellen?

viele Grüße

Axel

[Harry P]

Hi!

Bei mir nicht.

Das ist ja n Ding!

Kannst Du das mal irgendwo online stellen?

Hoffe damit meinst Du das:
Win2000 SP4
Version 6.0.2800.1106
Updateversionen: SP1;Q822925;Q330994;Q824145;Q832894;Q837009;Q831167
Der Rest wie bei Dir...im Endeffekt alles bis auf die Updates wie bei Dir... Sind das die installierten oder die nicht installierten Upates?

Gruß,
Harry

[Axel Richter]

Hallo,

Kannst Du das mal irgendwo online stellen?

Nein, die Beispielseite meinte ich eigentlich, damit man sich Deine Version, die im IE nicht wie gewünscht funktioniert, mal anschauen kann.

Der Rest wie bei Dir...im Endeffekt alles bis auf die Updates wie bei Dir...

Dass es an den Updates liegt, glaube ich eigentlich auch nicht.

Sind das die installierten oder die nicht installierten Upates?

Die installierten. Dein System scheint älter zu sein, als meins. Da gab es wohl irgendein Update Rollup, wogegen Du die einzelnen Updates installiert hast.

viele Grüße

Axel

[Harry P]

Hi!

Nein, die Beispielseite meinte ich eigentlich, damit man sich Deine Version, die im IE nicht wie gewünscht funktioniert, mal anschauen kann.

Also bei meiner Version habe ich einfach exakt Deinen Quelltext genommen und einfach in ner html-Datei gespeichert...kein Stück dran verändert...
Falls Du aber die Seite meinst, bei der ich das hier Erörterte verwenden will, dann ist das etwas problematisch, da die hinter einem gesicherten Login-Bereich liegt...
Ich könnte aber sonst mal den kompletten Quelltext (oder nur den der anstelle des "Inhalts-Markers" eingesetzt wird) der Seite hier reinstellen, falls das hilft...

Wenn das nicht hilft, kann ich Dir sonst ja ne Mail mit dem Zugang schicken, da ich das hier ungerne veröffentlichen möchte...

Gruß,
Harry

[Harry P]

Hallo!

Fehlerhafter Code soll also zum gewünschten Ergebnis führen? Ich verkneife mir Kommentare zum Template also.

Naja, so war das auch nicht gemeint. Ich hab es nur schon oft erlebt/gelesen, dass bei Postings von Code nur über die fehlerhaften Teile desikutiert wurde und das eigentliche Problem nicht angegangen wurde... Also brauchst Du Dir Kommenare nicht verkeifen...

Das A-Element ist aber schon irgendwo zuende?

Yom isses - hab ich aus versehen nicht mir raus kopiert..

#links_4 a img {width:0px; height:0px; border-width:0px;}
  #links_4 a:hover img{position: absolute; top: 60px;
          left: 635px; width:270px; height:205px;}

So, ich hoffe, damit habe ich alles Relevante gezeigt und Ihr könnt damit was anfangen...

So passiert beim  #links_4 a:hover mit dem Bild überhaupt nichts. Es bleibt 0px mal 0px groß, also unsichtbar. Ist das Dein Problem?

Wieder ein Fehler meinerseits - hatte folgendess nicht mit hierher kopiert:
#links_4 a {text-align: left;}
#links_4 a:hover {color: #000000;background: #ffffff;text-decoration:none;}

Mache ich das so, dann zeigt IE genau das, was Du vermutlich wolltest. Das Bild ist top: 60px; left: 635px; von der <!-- Tabelle mit den Seiteninhalten --> positioniert.

Der "Trigger" ist daher wohl schon bei mir definiert, wenn ich es recht verstehe, doch leider ist die Positionierung im IE trotzdem von der Tabelle mit den Inhalten ausgehend...komisch... :(

Gruß,
Harry

P.S.: Zur Sicherheit überprüfe ich das noch mal...

[Axel Richter]

Hallo,

Also brauchst Du Dir Kommenare nicht verkeifen...

Halte Dich an das Grundgerüst einer HTML-Datei. Gib also einen DOCTYPE an und setze ein TITLE-Element. Schicke dann Dein Dokument hier http://validator.de.selfhtml.org/ durch. Versuche die Fehlermeldungen zu verstehen bzw. in SELFHTML nachzuschlagen (einfach auf die Links klicken).

Allgemein:

1. Eliminiere die Gestaltungsattribute (height="", align="", valign="" ...) aus dem HTML-Code und setze stattdessen vollständig auf CSS. Dieses aber auch nicht in style-Attributen, sondern in einem zentralen Stylesheet.

2. Schau Dir http://de.selfhtml.org/css/layouts/index.htm an und versuche dann auch noch die Layouttabellen zu eleminieren.

viele Grüße

Axel

[Harry P]

Ok, alles klar, werde das beherzigen und mein Layout auf css umbauen...

Was die Tabellen angeht, muss ich mal schauen...da bin ich noch nicht ganz sicher, denn viele Webseiten basieren ja auf tabellarischem Layout... Ist natürlich kein Grund, einen "Fehler" den andere machen, selbst auch zu machen...

Nochmal eben zum ursprünglichen Problem:
"height:294px;overflow:auto;" wurden nun ja als "Übeltäter" ausgemacht. Hast Du/hat jemand eine Erklärung dafür?
Denn mir ist das schleierhaft und wenn ich es verstehe, kann ich vielleicht mein nächstes Problem lösen: Denn sobald ich nun wieder eine Maximalhöhe + overflow irgendwo angebe, um eine maximale Höhe für den Inhaltsbereich zu definieren, wird die absolute Positionierung daran ausgerichtet.
Besteht evtl. noch eine andere Möglichkeit, einen Bereich mit einer Maximalhöhe zu versehen, so dass Scrollbars erscheinen, sobald die Höhe überschritten wird??

Gruß,
Harry

[Wilhelm Turtschan]

habe d'ehre Harry

Was die Tabellen angeht, muss ich mal schauen...da bin ich noch nicht ganz sicher, denn viele Webseiten basieren ja auf tabellarischem Layout... Ist natürlich kein Grund, einen "Fehler" den andere machen, selbst auch zu machen...

Eine nachtraegliche absolute Positionierung (auch irgendwie relativ) innerhalb einer Tabelle kommt fuer mich gleich nach einem Zufallsgenerator. Fuer Dein Problem habe ich keine Loesung, weil man das Ergebnis nicht sehen kann. Ich gebe dir allerdings ein paar Tips aus meiner T3-Erfahrung:

1.) Mach Dir ein neue HTML-Vorlage ohne Tabellen
2.) Vergiss die Static-T3-Templates (siehe 4)
3.) Arbeite mit der Extension "automaketemplate", wenn Du in T3 mehr als gut bist nimm "Templa-Voila". Weg mit den Markern.
4.) Suche Dir die Extension "sb_accessiblecontent" von Kai Laboranz (war  auf einer Buch CD (T3-Handbuch Galileo-Verlag) und verwende diese als Basistemplate. Wenn sie nicht im Repository durchforste mal das Netz. Ansonsten gib Bescheid und ich zippe sie Dir.
5.) Arbeite unbedingt mit einem eigenen CSS und vergiss den T3-CSS-Rotz

Mit [4] ersparst Du Dir die ganze T3-Codewueste

man liest sich
Wilhelm

[Harry P]

Hallo Wilhelm!

Danke Dir für Deine Tipps und Dein Angebot! Ich denke aber, dass ich erst mal "nur" auf divs & css umsteigen werde, da der Zeitfaktor ne große Rolle spielt - leider bin ich da etwas unter Druck...

Werde das sonst später zu gegebener Zeit noch einmal nachbessern...

Den "T3-css-Rotz" habe ich eh schon vergessen! ;-)

Viele Grüße,
Harry

[D.R.]

Hi,

Und das Elternelement wäre in meinem Fall die Tabelle 2 (css --> position:relative; top:0px; left:0px;).

In diesem Fall nicht, denn sie wird relativ positioniert. Ändere das einfach mal in ein position:absolute;

Und warum sollte man das Elternelement nicht relativ positionieren? Auch position:relative wirkt als Ausgangspunkt.

Einen schönen Tag noch!