[J.C.VIPer]

Hallo,
ich habe gerade ein massives Problem:
Und zwar will ich ein absolut positionierbares Element (<div style="position: absolute">)
relativ zu einem ganz normalen IMG positionieren.
Im Mozilla 1.7 klappt das auch problemlos, allerdings habe ich im IE verschiedene Probleme:
1. Der IE fügt einen magischen Rand von 2px ein?!
2. Der IE beachtet nicht die Ränder von DIV- Elementen, welche das IMG- Tag umgehen.

Der HTML Code sieht schematisch so aus:

<div class="class1"> <!--css: border-left-width: 2px-->

<div class="class2">
<img src="bla" />
</div>
</div>

Ich bestimme die Position des IMG Elements mithilfe folgender Methode

function getAbsolutePosition(){

var offset = this;
var offsetLeft, offsetTop;
while(offset){
offsetLeft = offset.offsetLeft;
offsetTop = offset.offsetTop;
offset = offset.offsetParent;
}
}
Habe auch versucht, an das Style-Objekt des jeweiligen Offsets ranzukommen (offset.style.borderTopWidth bzw. offset.style.borderLeftWidth), allerdings scheint dies nicht zu funktionieren, da meine CSS Deklarationen in einer eigenen Datei ausgelagert sind. Wenn jemand weiß, wie ich daran kommen könnte, wäre ich auch schon überglücklich!

Vielen Dank schon mal für eure Hilfe!

Viele Grüsse

Jochen Wilhelm

[Account gelöscht]

Poste einmal den ganzen Quelltext, damit ich mir ein Bild von der Problematik machen kann. Oder nen Screenshot. Ein Bild sagt mehr als tausend WOrte!

[J.C.VIPer]

Hi zuerst einmal vielen Dank für deine Antwort.
Allerdings habe ich keinen Webserver da, deshalb kann ich leider kein Bild einfügen und die Seite ist u.a. auch wegen dem besagten Problem noch offline.

Vielleicht hilft es euch weiter, wenn ich mal den css-code von class1 & class 2 poste:
.class1{
width: 100%;
margin: 1% 0% 1% 0%;
padding: 1%;

color: #225A8D;

font-family: Arial,Helvetica,sans-serif;
font-size: 12pt;
font-weight: bold;

border-top: 4px solid #225A8D;
border-bottom: 2px solid #DCE3EC;
border-left: 2px solid #DCE3EC;
border-right: 2px solid #DCE3EC;
}
.class2{
width: 100%;
margin: 1% 0% 1% 0%;
padding: 1%;

color: #225A8D;

font-family: Arial,Helvetica,sans-serif;
font-size: 12pt;
font-weight: bold;

border-top: 2px solid #225A8D;
border-bottom: 1px solid #DCE3EC;
border-left: 1px solid #DCE3EC;
border-right: 1px solid #DCE3EC;
}

Zwei div-Elemente mit diesen Klassen umgeben mein Bild und ich habe die Erfahrung gemacht, dass die Werte für border-top und border-left das Problem darstellen, da diese bei meiner Funktion getAboslutePosition nicht berücksichtigt werden, mein Bild aber sehr wohl verschieben. Leider habe ich keine Möglichkeit gefunden auf die style Attribute der zwei DIV-Elemente, die ich in der While-Schleife durch offset.offsetParent bekomme, zuzugreifen. Ich habe die Vermutung, dass dies daran liegen könnte, dass meine Styles in einer extra Datei ausgelagert sind.

Ich hoffe, dass hilft euch wenigstens ein bisschen weiter, bei Bedarf kann ich auch ein Screenshot per Mail zuschicken.

Vielen Dank!

Viele Grüsse
Jochen

P.S. Wer ne Lösung für mein Problem hat, wird mein persönlicher Held des Tages, nein besser der Woche !

[J.C.VIPer]

Eureca, oder so ähnlich !

Hab die Lösung!!

Das entsprechende propertie ist clientLeft und clientTop und gibt die Differenz zwischen dem "richtigen" linken Rand und dem offsetLeft /Top an.
Sorry für all die umstände.
Aber vielleicht hilft es ja jemanden, der mal das gleiche Problem zu haben scheint, wie ich!

Viele Grüsse
Jochen

[Account gelöscht]

Na dann, muss ich mein Hirn nicht einschalten, um so besser