zwei <div>s trotz top:40px nicht auf gleicher Höhe

[Thomas H.]

Hallo,

ich habe folgendes Problem - die beiden <div> Bereiche werden in Mozilla   IE und Opera nicht auf gleicher Höhe angezeigt. Der zweite <div> ist immer etwas tiefer.

<!-- PICTURES START-->
 <DIV id="foo1" style="position:absolute;z-index:1;top:40;left:130">
  <IMG src="foo1.jpg" border="0">
 </DIV>
 <!-- PICTURES END-->

<!-- TEXT START-->
 <DIV id="foo2" style="position:absolute;z-index:1;top:40;left:340;width:300;vertical-align:top;margin:0px;padding:0px">
  <?PHP include($lang."/foo2.inc"); ?>
 </DIV>
 <!-- TEXT END-->

in foo2.inc steht eine <ul> mit 5 Einträgen.

Hat jemand eine Idee was da falsch läuft, ich hab keine :(

schonmal Danke
 Thomas

[Orlando]

Hi Thomas,

top:40;left:130
top:40;left:340;width:300;

die Frage muss lauten: sind 40 Äpfel wirklich gleich 40 Bananen? Wenn ja, sind diese 300 Gurken breit?

Deine Notation ist ohne MASS und Ziel.

LG Roland ;)

[palme]

die Frage muss lauten: sind 40 Äpfel wirklich gleich 40 Bananen? Wenn ja, sind diese 300 Gurken breit?

Deine Notation ist ohne MASS und Ziel.

LG Roland ;)

Außerdem steht im 2. style bzw. div ein margin=0, im 1. nicht!

MfG

Palme

[Thomas H.]

Ooops,

stimmt irgendwie, leider hat das anhängen von px hinter jede zahl keine Änderung ergeben :(

Hi Thomas,

top:40;left:130
top:40;left:340;width:300;

die Frage muss lauten: sind 40 Äpfel wirklich gleich 40 Bananen? Wenn ja, sind diese 300 Gurken breit?

Deine Notation ist ohne MASS und Ziel.

LG Roland ;)

[Orlando]

Hi Thomas,

stimmt irgendwie, leider hat das anhängen von px hinter jede zahl keine Änderung ergeben :(

dann liegt's am padding, denn margin hat bei absoluter Positionierung keinen Einfluss auf das Element. Entferne es einfach.

LG Roland

[palme]

dann liegt's am padding, denn margin hat bei absoluter Positionierung keinen Einfluss auf das Element. Entferne es einfach.

LG Roland

Sorry, da war ich etwas schnell im Lesen des Codes!

MfG

Palme

[Orlando]

Hi Palme,

Sorry, da war ich etwas schnell im Lesen des Codes!

nicht so schnell wie ich, ich habe margin/padding zunächst gänzlich überlesen ;)

LG Roland

[palme]

nicht so schnell wie ich, ich habe margin/padding zunächst gänzlich überlesen ;)

LG Roland

Hallo Roland,

istjaallesaucheinwenigzusammengeklatschtgeschrieben! :)

MfG

Palme

[Tobias]

Hallo Thomas,

<DIV id="foo1" style="position:absolute;z-index:1;top:40;left:130">
 <DIV id="foo2" style="position:absolute;z-index:1;top:40;left:340;width:300;vertical-align:top;margin:0px;padding:0px">

1. Fehlt hinter 40 (und den anderen Zahlenwerten) noch eine Einheit
2. hat div2 kein margin (und kein padding) - div1 vermutlich aber schon
3. Bist du sicher, das nicht nur der Inhalt höher ist :) -> mach mal einen Rahmen um die divs

Grüße aus Nürnberg
Tobias

[Thomas H.]

Das mit dem margin hatte ich reingesetzt bei div 2 tiefer ist. Ich hab jetzt aber nochmal beide abgeändert konnte aber keine veränderung sehen...

<DIV id="foo1" style="position:absolute;z-index:1;top:40px;left:130px;vertical-align:top;margin:0px;padding:0px">
  <IMG src="foo1.jpg" border="0">
</DIV>
<DIV id="text1" style="position:absolute;z-index:1;top:40px;left:340px;width:300px;vertical-align:top;margin:0px;padding:0px;">
  <?PHP include($lang."/foo2.inc"); ?>
</DIV>

das mit dem Rehmen geht leider schlecht, da es die ganze Konzeption ducrheinander schmeißen würde :(

Grüße
 Thomas

Hallo Thomas,

<DIV id="foo1" style="position:absolute;z-index:1;top:40;left:130">
<DIV id="foo2" style="position:absolute;z-index:1;top:40;left:340;width:300;vertical-align:top;margin:0px;padding:0px">

1. Fehlt hinter 40 (und den anderen Zahlenwerten) noch eine Einheit
2. hat div2 kein margin (und kein padding) - div1 vermutlich aber schon
3. Bist du sicher, das nicht nur der Inhalt höher ist :) -> mach mal einen Rahmen um die divs

Grüße aus Nürnberg
Tobias

[Tim Tepaße]

Hallo Thomas,

das mit dem Rehmen geht leider schlecht, da es die ganze Konzeption ducrheinander schmeißen würde :(

Wenn ich mit CSS und egal wie positionierten Elementen rumspiele, verwende ich immer temporär (sic!) 1 Pixel breite Rahmen, um zu sehe, woran es liegt, die dann wieder hinterher entfernt werden.

Ich habe mir gerade Deinen Quellcode gegriffen, nur noch Maßeinheiten zu den Angaben hinzugefügt, beide divs in ein neues Dokument gesteckt, mit Rahmen versehen und als Inhalt jeweils nur einen kleinen Text genommen. Und siehe da, sie sind auf gleicher Höhe.

Ich vermute, es liegt an den Elementen, die in Deinen divs sind. Ich meine mich erinnern zu können, daß ul einen etwas größeren Margin hat. Konzentrier Dich mal darauf!

• Tim

[Mathias Bigge]

Hi Tim Tepaße,
oder Dein Browser hält eine alte CSS-Variante im Cache, was besonders dem IE nur äußerst schwer abzugewöhnen ist, zum Teil selbst über mehrere Sitzungen hinweg.
Also: Raus und alle temprären Files löschen, vielleicht ist es ja längst OkiDoki...
Viele Grüße
Mathias Bigge

[Tim Tepaße]

Hallo Mathias,

Hi Tim Tepaße,

Tim genügt durchaus.

oder Dein Browser hält eine alte CSS-Variante im Cache, was besonders dem IE nur äußerst schwer abzugewöhnen ist, zum Teil selbst über mehrere Sitzungen hinweg.

Deswegen mag ich ja meinen Mozilla so. :-)

Also: Raus und alle temprären Files löschen, vielleicht ist es ja längst OkiDoki...

Ich wollte eh die 1.2.1 installieren.

Aber Du verwirrst mich - Thomas hat ja hier das Problem mit der Darstellung, nicht ich. Hast Du Dich vielleicht vertan?

Grüße aus dem Althoffblock

• Tim

[Mathias Bigge]

Hi Tim,

Aber Du verwirrst mich - Thomas hat ja hier das Problem mit der Darstellung, nicht ich. Hast Du Dich vielleicht vertan?

´Sorry, die Userconfig ist so bequem, dass ich schon gar nicht merh hingucke und den Namen automatisch einfügen lasse. Mist, danebengeklickt, meine IDee scheint ja sowieso die falsche gewesen zu sein, aber mir ist das beim Testen im IE schon ein paarmal passiert, dass er irgendwelche externen oder internen CSS-Formate lustig aus dem Cache gepackt hat, der Mistkäfer. Und der Mozilla, aj der hat was.....

Grüße aus dem Althoffblock

Sind wir Nachbarn?

Viele Grüße
Mathias Bigge  <- Roseggerstrasse 51

[Tim Tepaße]

Hallo Mathias,

Grüße aus dem Althoffblock

Sind wir Nachbarn?
Mathias Bigge  <- Roseggerstrasse 51

Sind wir :-)

• Tim

[Thomas H.]

Hallo Tim (und die anderen),

Ich vermute, es liegt an den Elementen, die in Deinen divs sind. Ich meine mich erinnern zu können, daß ul einen etwas größeren Margin hat. Konzentrier Dich mal darauf!

Jep, das ist es! Ich habe jetzt auch nochmal eine border eingefügt und die div sind auf gleicher Höhe. Der IE macht noch 2 Linefeeds und Mozilla einen Linefeed vor der ul - grade das hatte ich gehoffet mit dem margin:0px abzustellen - aber das bezieht sich wohl nur auf den div :(

Den ich die ul mit margin:0px;padding:0px formatiere passts jetzt in Mozilla - im IE ist leider immer noch eine Leerzeile drüber *grr* auch ein Einsetzen von  style="margin:0px;padding:0px" in alle <li>s hilft nicht :((

Thomas

[Tim Tepaße]

Hallo Thomas,

Den ich die ul mit margin:0px;padding:0px formatiere passts jetzt in Mozilla - im IE ist leider immer noch eine Leerzeile drüber *grr* auch ein Einsetzen von  style="margin:0px;padding:0px" in alle <li>s hilft nicht :((

Vielleicht ist _tatsächlich_ noch ein Leerzeichen irgendwo, daß die <ul> in die nächste Zeile fördert? Hier hilft nur konsequentes Weiterforschen mit <ul style="border:1px solid lime;">. ;-)

• Tim

[Tobias]

Hallo Thomas,

<DIV id="foo1" style="position:absolute;z-index:1;top:40px;left:130px;vertical-align:top;margin:0px;padding:0px">
  <IMG src="foo1.jpg" border="0">
</DIV>
<DIV id="text1" style="position:absolute;z-index:1;top:40px;left:340px;width:300px;vertical-align:top;margin:0px;padding:0px;">
  <?PHP include($lang."/foo2.inc"); ?>
</DIV>

ich habe den Code so wie er ist (gut, ich habe das <?php-Zeug und das img oben rausgeworfen und ein kleines Bild eingesetzt) getestet, und die beiden divs waren genau auf gleicher Höhe. Meiner Meinung nach müsste es an dem inhalt von foo2.inc liegen. btw: die Elementnamen wie div und img schreibt man klein (zumindest in Zukunft).

das mit dem Rehmen geht leider schlecht, da es die ganze Konzeption ducrheinander schmeißen würde :(

ich habe ja auch nicht gesagt, dass du ihn immer drinlassen sollst, aber ein div { border:1px solid #000; } ist doch manchmal ungemein hilfreich.

Grüße aus Nürnberg
Tobias

ps: http://learn.to/quote

[palme]

ich habe den Code so wie er ist (gut, ich habe das <?php-Zeug und das img oben rausgeworfen und ein kleines Bild eingesetzt) getestet, und die beiden divs waren genau auf gleicher Höhe. Meiner Meinung nach müsste es an dem inhalt von foo2.inc liegen.

Hallo,

Ja, bei mir ging's auch ohne dem Inhalt, bzw. mit einfach ein bisschen Text oder so! ..Muss am Inhalt liegen!

MfG

Palme