firefox: absolute am parent positionieren ?

[FoXMorayn]

hallo,

hat jemand nen plan wie man den ff(3) dazu bringen kann, absolute am parent zu psitionieren? er richtet immer am browserrand aus.

beispielcode:
homepage-code.de - post your sourcecode!

 

[_Thor_]

Du musst das Elternelement relativ positionieren.

position: Positionsart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

 

[FoXMorayn]

eine realtive positionierung hilft mir nicht weiter. ich muss am eltern element ausrichten.

 

[_Thor_]

Die gehört dazu, das Elternelement muss relativ positioniert sein, dann richtet sich das Kindelement bei absoluter Positionierung am Elternelement aus.

 

[threadi]

Lies nochmal genau die Antwort über dir. Das war schon der richtige Weg. :idea:

 

[FoXMorayn]

eine realtive positionierung hat mit der sache nichts zu tun.
hab mich auch vertan, ich möchte nicht am parent sondern am nächsren nicht static ausrichten.

ich hab nun herrausgefunden, dass der ff nur am parent ausrichten kann und nicht am nächst höherem nicht static element. wenn ich <td> absolute positioniere kann ich an diesem ausrichten. direkt in den <table> tag kann ich es nicht packen.
eine lösung wäre den div anstelle der tabelle absolut zu positionieren.
kennt jemand noch eine andere lösung, wo ich die tabelle positionieren kann?

 

[_Thor_]

Ein absolut positioniertes Element richtet sich immer nach dem nächst höheren relativ positioniertem Element aus, wenn es keins gibt, dann am body.
Steht aber auch als Erklärung in dem Link und so funktioniert es.

<table style="position: relative; border: 1px solid black;">
	<tr>
		<td style="position: absolute; top: 40px;">test</td>
		<td>test</td>
	</tr>
	<tr>
		<td>test</td>
		<td>test</td>
	</tr>
	<tr>
		<td>test</td>
		<td>test</td>
	</tr>
	<tr>
		<td>test</td>
		<td>test</td>
	</tr>
</table>

 

[FoXMorayn]

http://www.fun-fox.de/galerie/script131.html
#bf_close soll sich an #bf_picture orientieren. im firefox ist das nicht der fall.


EDIT: in deinem beispiel auch nicht.

[COLOR=#008080]<td style=[COLOR=#0000FF]"position: absolute; top: 40px;"[/COLOR]>[/COLOR]test[COLOR=#008080]</td>[/COLOR]

orientiert sich am body.

 

[neuroleptika]

Thor,
In dem Beispiel ist das positonierte Element aber nicht die Zelle sondern ein Element innerhalb einer Zelle. Und das klappt im ff2 / ff3 tatsächlich nicht gut.

FoXMorayn,
Du könntest der fixed positionierten Tabelle (#bf_picture) display: block geben. Dann würde table als Bezugspunkt für deine absolute positionierung auch im ff funktionieren.

Die Tabellen sind ist für dein Vorhaben nicht gut geeignet.

 

[_Thor_]

Na dann hab ich wohl nicht ausreichend getestet.

Ich positionier so selten ;)

 

[neuroleptika]

Für gewöhnlich sollen die Inhalte ja auch in der Zelle bleiben.
Sonst bräuchte man sie nicht dort reinschreiben.

 

[FoXMorayn]

danke! mit display block klappt es.

ich nutze tabellen um mich vor einem css bug vom ie6 zu drücken.
hier die alte version:
Galerie
im ie6 hat #picture immer 100% breite. (der fehler liegt iregendwo bei den floated divs für titel und navigation.) daher hab ich mich für die variante mit den tabellen entschieden, da diese nur im generierten sourcecode und per onclick event auftauchen. gib es technische gründe gegen tabellen?

 

[neuroleptika]

Nicht nur im IE6. Im ff2 und IE7 sieht es nicht besser aus.
Ich vermute der Hund ist in der function movePicture() zu suchen.
Javascript gehört aber nicht gerade zu meinen Stärken.

Aus designersicht spricht gegen Tabellen z.B:
-Tabellenzellen lassen sich nicht floaten.
-Die Höhe der Tabellenzellen lassen sich nicht unabhängig in einer Zeile ändern.
-Breitenangaben wirken sich auf die ganze Spalte aus.
-Absolute Positionierungen können das ganze konstrukt zusammenfallen lassen.
-Der html-code wird schnell unübersichtlich.
-Höhen und Breitenangaben sind Mindestwerte.

Über die semantische Bedeutung wurde in diesem Forum schon genug gesagt

 

[FoXMorayn]

danke für die zusammenfassung.

Absolute Positionierungen können das ganze konstrukt zusammenfallen lassen.

hasst du ein beispiel dafür?

 

[neuroleptika]

Eine Situation hast du ja selber erfahren.
display: block konntest du nur in deinem Beispiel verwenden weil die Tabelle mit position:fixed positioniert war. Sonst würde display: block; das Tabellentypische shrink-to-fit-Verhalten verhindern und die Tabelle würde die gesammt verfügbare Breite einnehmen.

td funktioniert nicht als Ausgangspung für absolute positionierte Elemente.
Im IE8 verschiebt sich die Zelle.
Im IE5 bis IE7 verliert die Zelle ihre Hintergrundgrafik.
Im ff2/ff3 behält die Zelle ihre Größe als ob der Inhalt position:static hätte.

Probiere es aus
Nur der IE (bis Vers.8 ) richtet p an der Zelle aus:

<table>
  <tr>
<td>zelle1.1</td>
<td>zelle1.2</td>
</tr>
  <tr>
<td>zelle2.1</td>
<td class="position"><p>zelle2.2<br />umbruch</p></td>
</tr>
  <tr>
<td>zelle3.1</td>
<td>zelle3.2</td>
</tr>
</table>

  table {
border-collapse:collapse;
}

  table td {
border:20px solid gray;
background-color: darkred;
}

.position {
position:relative;
}

.position p {
position: absolute;
top: 5px;
left: 5px;
background-color: pink;
}

 

[FoXMorayn]

achso, das problem beschränkt sich auf tabellen.
' dachte ich könnte im ff3 allgemein nur am parent ausrichten.
so tut ers wie nach css2.

<span style="position:absolute; left:100px; top:100px;">
    <span>
        <span style="position:absolute; left:10px; top:10px;>
        oing
        </span>
    </span>
</span>

danke!