nicht angemeldet
Hallo Detlef, :-))
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.
Ja, das habe ich heute morgen schon irgendwo gelesen... :-(
Allerdings hat es so trotzdem funktioniert!!!
Und ehrlich gesagt... wenn's funktioniert...
Hat auch nichts im CSS verloren.
/* hide anchors */
h3 a {display:none;}Damit springt der IE 6 nicht mehr dorthin, wo er soll.
Ja, aber die anderen erkennen die Anker nicht mehr.
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>
Ja, aber das ist doch so gewollt oder?
Das Problem sehe ich jetzt nicht.
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"> </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.
Das wusste ich nicht.
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. Beidisplay:nonefunktionieren die Links zwar wieder, dafür die Anker aber nicht mehr richtig.
Doch, wenn mann das display:none auf den IE beschränkt, klappt es.
Bis auf die Kleinigkeit, dass der IE bei zu kurzen Seiten alles nach oben verschiebt (was mir langsam schon fast egal ist, unser Standard-Browser ist Firefox...).
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:
Frag mal mich, ich habe insgesamt 9 Test-CSS und eine genaue Auflistung, was was in welchem Browser nicht geht. :-)
Es ist mir "unbegreiflich", wieso Browser alles so unterschiedlich umsetzen. Das will einfach nicht in mein Hirn.
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.
Dass sie in meiner ursprünglichen Version nicht anklickbar waren, liegt ganz eindeutig am padding-top. Nehme ich das raus und verwende eine andere Variante (z.B. Variante 3 des in meinem ersten Posting erwähnten Artikels) geht's (nur gibt's da andere Probleme).
Wie sieht denn die entsprechende Stelle im html aus zu dieser CSS-Lösung? Mein ursprüngliches css hatte nur das position:relative nicht oder?
Das padding-top brauchte ich aber, damit die Anker nicht unter dem Header verschwinden...
Ich verstehe diese Lösung noch nicht ganz.
> Dagegen hilft nur, die Seite lang genug zu machen, z.B. so:
>
> `* html #pad-bottom {height:100%;margin-top:-250px;}`{:.language-css}
Hab ich schon ausprobiert. Hat nicht geklappt. Allerdings habe ich nur das pad-bottom vergrößert. Und das klappte nicht.
Das position:relative schafft hier also keine Abhilfe? (Hab ich, glaube ich, auch schon ausprobiert). Dann ist mit dem position:relative gewonnen, dass die Links auch im IE anklickbar sind?
> Auf Wiederlesen
Danke, danke, dass ich mit dem Problem nicht alleine bin.
Allerdings bin ich heute nicht mehr konzentrationsfähig. Arbeite jetzt seit exakt 12 Stunden und habe noch einiges vor mir... Morgen Nachmittag ist dann wieder Zeit für die Website... mit hoffentlich einer schnellen, schmerzlosen NOTlösung. Muss nicht perfekt sein, soll nur funktionieren. ;-)
Schönen Abend und danke!
Mary