position:fixed + Anker + padding-top: IE verschiebt es nach oben

[Detlef G.]

Hallo mary

Tja, leider fühlt sich niemand angesprochen.

Das wird wohl daran liegen, dass dein Problem vielleicht nicht ganz trivial ist und Nachts und am heutigen Feiertag wohl nicht so viele erfahrene Stammposter hier unterwegs sind.

Browserweit am unproblematischsten erscheint mir
http://www-englishlinguistics.uni-regensburg.de/Staff/index-IEcomment2.shtml

/* ANCHORS */

h3 a {padding-top:170px; font-size:0px}

OK, das funktioniert, ergibt (so weit ich sehe) zwei Probleme [1][2].

<!--[if IE]>

Das ist im CSS weder sinnvoll noch zulässig.
Der IE setzt Conditional Comments nur im HTML um, und der Kommentar, der es einleitet ist ein HTML- kein CSS-Kommentar.

<style>

Hat auch nichts im CSS verloren.

/* hide anchors */
  h3 a {display:none;}

Damit springt der IE 6 nicht mehr dorthin, wo er soll.

</style>
<![endif]-->

<!--[if IE]>

Lasse den ganzen Block weg.

[1] Problem:

h3 a {padding-top:170px; font-size:0px} formatiert nicht nur die Anker sondern auch Links innerhalb von h3 z.B. diesen:
 <h3 class="mb-12"><a href="Tutors/">Student Tutors </a></h3>

Du kannst die Formatierung der Anker wieder rückgängig machen z.B. durch:
h3 a:link, h3 a:visited {font-size:20px; padding-top:0;}

Eine andere Möglichkeit wäre, überhaupt keinen Anker zu notieren sondern z.B. ein span zu verwenden.
 <h3 class="mb-12"><span id="professors">&nbsp;</span>Professors</h3>
Im CSS dann:
h3 span {padding-top:170px; font-size:0px}

Aktuelle Browser springen die angegebene ID an, egal welches Element diese hat. Ich weiß allerdings nicht sicher, welche Browser es ab welcher Version unterstützen.

[2] Problem:

padding-top:170px; sorgt zwar auch im IE 6 dafür, dass die gewünschte Position angesprungen wird, macht aber alle Links, in diesem Bereich unbenutzbar. Bei display:none funktionieren die Links zwar wieder, dafür die Anker aber nicht mehr richtig.
Nachdem ich an deinem Problem fast verzweifelt bin (entweder waren die Links nicht klickbar, oder die Anker funktionierten nicht richtig), kam ich dabei zufällig auf eine Lösung:

h3 {color:#000099; font-size:20px; font-weight:500; padding:0; line-height:120%;  
    margin:0px; margin-top:30px; margin-bottom:24px; text-align:left;  
    position:relative;}  

Frag mich nicht, warum damit die Links darin anklickbar werden, oder warum sie es sonst nicht sind, zumindest in meinem 6er IE funktioniert es so.

In IE 6 ist das einzige noch zu beseitigende Problem, dass alles komplett nach oben verschoben wird, wenn nach dem letzten Anker nicht mehr genug Text kommt, dass er richtig positioniert werden kann. (Kann das nicht besser erklären.).

Dagegen hilft nur, die Seite lang genug zu machen, z.B. so:

* html #pad-bottom {height:100%;margin-top:-250px;}

Ist zwar nicht wirklich schön, etwas besseres fällt mir aber auch nicht ein.

Auf Wiederlesen
Detlef