IE stellt Positionierung anders dar als FF...?

[Karo]

Hallo,

habe folgendes Problem:

Ich habe verschiedene Links mit position:absolute über einer absolut positionierten Grafik plaziert. Nach viel Rumprobiererei sieht es jetzt im Firefox so aus, wie ich es haben will, im IE sind die Links jedoch im Vergleich zur Grafik nach oben verrutscht. Woran liegt das, und wie kann ich das beheben?
Siehe hier: www.schmelz-musik.de/index1.html

Wenn es noch eine elengantere Lösung gibt, die gewünschte Optik zu erreichen bin ich auch für jeden Hinweis dankbar! :) (Bin Einsteiger und habe mich schon fleißig durch selfhtml geklickt, aber den richtigen Trick vielleicht bis jetzt übersehen?)

Grüße,
Karo

[suit]

Ich habe verschiedene Links mit position:absolute über einer absolut positionierten Grafik plaziert. Nach viel Rumprobiererei sieht es jetzt im Firefox so aus, wie ich es haben will, im IE sind die Links jedoch im Vergleich zur Grafik nach oben verrutscht. Woran liegt das, und wie kann ich das beheben?
Siehe hier: www.schmelz-musik.de/index1.html

wenn du dich schon durch selfhtml geklickt hast, bist du warscheinlich auch <http://de.selfhtml.org/css/formate/box_modell.htm#browser@title=hier drüber gestolpert >- vor allem der abschnitt bez doctype switch und quirksmode könnte relevant sein

ein paar anmerkungen am rande:

• ggf solltest du dich von deinem frame trennen
• die idee mit dem menü (klaviertasten) finde ich gut
• dein menü als unsortierte liste aufzubauen, lässt das ganze logischer werden und du hast weit weniger css, da du nicht jeden einzelnen menüpunkt separat positionieren musst

[Gunnar Bittersmann]

@@suit:

• die idee mit dem menü (klaviertasten) finde ich gut

Nicht nur du. ;-)

Live long and prosper,
Gunnar

[Karo]

wenn du dich schon durch selfhtml geklickt hast, bist du warscheinlich auch <http://de.selfhtml.org/css/formate/box_modell.htm#browser@title=hier drüber gestolpert >- vor allem der abschnitt bez doctype switch und quirksmode könnte relevant sein

hmm, weder transitional mit URI noch strict ändern etwas an der ie6-Darstellung. Zumal ich keine Angaben über margin oder padding gemacht habe, weshalb der box-model-bug wohl nicht für die fehldarstellung verantwortlich ist...?

ein paar anmerkungen am rande:

• ggf solltest du dich von deinem frame trennen

von welchem frame?

• die idee mit dem menü (klaviertasten) finde ich gut
• dein menü als unsortierte liste aufzubauen, lässt das ganze logischer werden und du hast weit weniger css, da du nicht jeden einzelnen menüpunkt separat positionieren musst

ich dachte, da die Tasten (besonders die schwarzen) unregelmäßige Abstände haben krieg ich das mit einer List nicht so positioniert. Bitte um Aufklärung, falls ich mich irre. (Wie gibt man denn den Abstand der einzelnen Listenpunkte an?)
Btw ist das restliche Layout der Seit noch in den Kinderschuhen, ich wollte erstmal die Navileiste fertig basteln.

[EKKi]

Mahlzeit Karo,

Ich habe verschiedene Links mit position:absolute über einer absolut positionierten Grafik plaziert.

Absolute Positionierung ist absolut ungeeignet, um plattform- und browserübergreifend die gleiche Darstellung zu erreichen.

Nach viel Rumprobiererei sieht es jetzt im Firefox so aus, wie ich es haben will, im IE sind die Links jedoch im Vergleich zur Grafik nach oben verrutscht. Woran liegt das, und wie kann ich das beheben?

Lass mich raten: Fehlender oder ungeeigneter Dokumenttyp? Invalider Code?

Siehe hier: www.schmelz-musik.de/index1.html

Naja, zumindest teilweise richtig geraten.

Die klassische Frame-Konstruktion zur "Verschleierung" der eigentlichen Adresse - ein Unding. Insbesondere sowas

<a href="http://home.arcor.de/doppelkex/index1.html">http://schmelz-musik.de/</a>

ist IMHO unter aller Sau.

Wenn es noch eine elengantere Lösung gibt, die gewünschte Optik zu erreichen bin ich auch für jeden Hinweis dankbar! :) (Bin Einsteiger und habe mich schon fleißig durch selfhtml geklickt, aber den richtigen Trick vielleicht bis jetzt übersehen?)

Halte Deine Besucher nicht für dumm, gaukele ihnen keine falsche Adressen vor und nutze relative Positionierung.

MfG,
EKKi

[Harlequin]

Yerf!

Halte Deine Besucher nicht für dumm, gaukele ihnen keine falsche Adressen vor

Hm, ist ja vielleicht auch keine böse Absicht, sondern nur der Wunsch, kein Geld für Domain und Webspace bezahlen zu müssen (und die Frameseite stammt somit vom Domain-Hoster).

Ich kenne da noch jemanden, bei dem das so ist...

Gruß,

Harlequin

[Karo]

Halte Deine Besucher nicht für dumm, gaukele ihnen keine falsche Adressen vor

Hm, ist ja vielleicht auch keine böse Absicht, sondern nur der Wunsch, kein Geld für Domain und Webspace bezahlen zu müssen (und die Frameseite stammt somit vom Domain-Hoster).

Exakt so isses. Wollte hier niemanden verärgern, wenn ich gewusst hätte wie so ne Umleitung funktioniert, hätte ich gleich den "original-Link" gepostet (war nur zu faul zum tippen). http://home.arcor.de/doppelkex/index1.html
Das ändert trotzdem nichts an meinem Problem (das schon auftritt, wenn ich den Quelltext offline im ie angucke, die Umleitung also keine Rolle spielt).

Hier ein Auszug aus dem Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title>Mal zum &#220;ben</title>
  <meta name="description" content="...">
  <meta name="author" content="...">
  <meta name="keywords" content="...">
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>

<div style="position:absolute; top:30px; left:60px;">
<img src="schwarz.png" width="760" height="151" alt="Karola Schmelz - Pianistin, Musikp&#228;dagogin" border="0">
</div>

<div style="position:absolute; top:120px; left:0px;">
<img src="Linkleistebreitkurz1.png" width="240" height="450" alt="Tastatur" title="" >
</div>

<div id="linkblack">
<p style="position:absolute; top:157px; left:0px; width:100px;"><a class="black" href="index.html">Home</a></p>
<p style="position:absolute; top:223px; left:0px; width:100px;"><a class="black" href="vita.html">Vita</a></p>
 usw...
</div>

<div id="linkwhite">
<p style="position:absolute; top:127px; left:0px; width:228px;"><a class="white" href="news.html">Aktuelles</a></p>
<p style="position:absolute; top:190px; left:0px; width:228px;"><a class="white" href="unterricht.html">Klavierunterricht</a></p>
 usw...
</div>

Dazu u.a. folgende Angaben in separatem CSS-Dokument:

body { font-size:100.01%;
font-family: Arial, sans-serif;
min-width:40em;
color: #3D391C;
background-image:url('Ylwchalk.jpg');}

#linkwhite { text-align:right; color:black; vertical-align:middle; }

#linkblack { text-align:right; color:white; vertical-align:middle; }

Andere Positionierungsangaben habe ich nicht gemacht...
Hat noch jemand einen Lösungsvorschlag?

PS: Hab ich eine Chance, diesen frame, den ich nun nicht selber produziert habe zu löschen?