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

Beitrag lesen

Hallo mary

http://www-englishlinguistics.uni-regensburg.de/Staff/index-IEcomment2.shtml

Ja, das habe ich heute morgen schon irgendwo gelesen... :-(
Allerdings hat es so trotzdem funktioniert!!!

Wenn die Browser das aufgrund ihrer Fehlertoleranz ignorieren, meinst du es hätte funktioniert?

Und ehrlich gesagt... wenn's funktioniert...

Es hat nicht funktioniert _weil_ es drinstand sondern _obwohl_ es drinstand, weil die Browser es wohl ignoriert haben und den Rest des CSS trotzdem angewendet haben.

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

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

Soll heißen: Es funktioniert nicht!
Der IE spring dann so, dass die Überschrift am oberen Fensterrand hinter dem fixierten Header ist.
Und, wie du schriebst:

Ja, aber die anderen erkennen die Anker nicht mehr.

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

Das ist eine Zeile aus deiner screen-test2.css, die in der hier angegeben index-IEcomment2.shtml eingebunden war.

Diese 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>

Das ist eine Zeile aus deiner hier angegebenen index-IEcomment2.html.

Ja, aber das ist doch so gewollt oder?

Schau sie dir noch einmal ganz genau an!
Das ist kein Anker sondern ein Link. Ich kann mir nicht vorstellen, dass dieser nicht angezeigt werden soll.

Das Problem sehe ich jetzt nicht.

Kein Problem ist, wenn Seiteninhalte (Links) auf deiner Seite nicht angezeigt werden?

Doch, wenn mann das display:none auf den IE beschränkt, klappt es.

Wozu habe ich mir denn die ganze Arbeit gemacht!
Ich hatte auch als erstes lediglich den (im CSS) unsinnigen Conditional Comment herausgenommen und
display:none mittels Star-HTML-Hack für den IE eingebunden. Die Links waren zwar klickbar, die Anker verschwanden aber hinterm Header.

... (was mir langsam schon fast egal ist, unser Standard-Browser ist Firefox...).

Wenn es dir egal ist, dann hätte ich mir die Zeit sparen können.

Es ist mir "unbegreiflich", wieso Browser alles so unterschiedlich umsetzen. Das will einfach nicht in mein Hirn.

Du verlangst, das alle Browser absolut identisch sein sollen?
Wenn du von Browsern nur ihr standardmäßiges Verhalten verlangst, dann setzen sie das zum großen Teil auch identisch oder zumindest ähnlich um.
Der IE bis zur Version 6 kennt kein position:fixed! Und standardmäßiges Verhalten ist, dass beim Sprung zu einen Ankers, dieser am oberen Rand des Browserfensters erscheint.
Jetzt wird getrickst, damit der IE position:fixed simuliert und getrickst, damit beim Sprung zum Anker dieser nicht dort sondern 170px darunter erscheint.
Wenn du irgendwelche Tricks verwendest, um ein abweichendes Verhalten zu bekommen, dann kannst du nicht erwarten, dass der gleiche Trick in allen Browsern identisch funktioniert!

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;}

  

> Wie sieht denn die entsprechende Stelle im html aus zu dieser CSS-Lösung?  
  
Ich habe zu meinen Tests dein HTML nicht geändert!  
  

> ... Mein ursprüngliches css hatte nur das position:relative nicht oder?  
  
Genau, ich habe nur position:relative angefügt, um andere Varianten zu testen, und stellte dann fest, dass das schon reicht, damit die Links anklickbar werden.  
  

> Das padding-top brauchte ich aber, damit die Anker nicht unter dem Header verschwinden...  
> Ich verstehe diese Lösung noch nicht ganz.  
  
Du sollst das padding-top für h3 a doch nicht weglassen!  
  

> > 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.  
  
Seltsam, bei mir klappt es im IE.  
  

> ... mit hoffentlich einer schnellen, schmerzlosen NOTlösung. Muss nicht perfekt sein, soll nur funktionieren. ;-)  
  
Schau dir an, ob [diese NOTlösung](http://d-graff.de/demos/selfhtml/mary/Staff/index-IEcomment2.html) schmerzlos genug ist ;-).  
  
  
Auf Wiederlesen  
Detlef  

-- 
- Wissen ist gut  
- Können ist besser  
  
- aber das Beste und Interessanteste ist der Weg dahin!