shadow und inputfields bug in ie8

[pOOky1969]

Hallo zusammen,

bin neu hier im Forum und habe gleich ein gravierendes Problem, für dessen Lösung ich eure Hilfe brauche. Ich hbae ein kompliziertes css mit weichen Schatten, floating etc. Habe für alle aktuellen Browser auch (sehr) ähnliches Aussehen hin bekommen.

Jetzt zum Poblem. IE generiert mir einen Bug, den ich nicht wegbekomme. ALLE Eingabefelder und Pulldowns etc. scheinen verschoben. Das heißt nur die Position der "sensitiven Flächen". Also Eingabefeld selbst ("Hintergrundgrafik") ist richtig positioniert. Aber der blinkende Cursor z.B. ist 12 Pixel nach rechts oben verschoben (genau die Größe des Schattens). Kommentiere ich im CSS den Schaten aus, fuktioniert es einwandfrei.

Hat jemand eine Idee? Padding verwende ich eigentlich nicht. Kann es evtl. mit position absolute oder relative zu tun haben?

Bin für jeden Tipp dankbar.

[hero-master]

Hi pooky,
ohne einen Blick in deinen Code erhaschen zu können, ist da wenig zu helfen
Und es wäre auch ganz gut die Version des IEs zu kennen, mit dem du das getestet hast.

[pOOky1969]

Hier mal der gewünschte Link. Ich bitte um Diskretion! http://www.testserver-ruf.de/TYPO3/WEC_4_4_4

[hero-master]

Hey
nach ein bisschen kniffligeren Sucherei, habe ich das Problem gefunden: Es leigt an dem MS-Filter in der ie8.css, das verursacht den Fehler:

progid:DXImageTransform.Microsoft.Shadow(color='#ececec', Direction=0, Strength=6) progid:DXImageTransform.Microsoft.Shadow(color='#ececec', Direction=45, Strength=3) progid:DXImageTransform.Microsoft.Shadow(color='#ececec', Direction=90, Strength=6) progid:DXImageTransform.Microsoft.Shadow(color='#ececec', Direction=135, Strength=3) progid:DXImageTransform.Microsoft.Shadow(color='#ececec', Direction=180, Strength=6) progid:DXImageTransform.Microsoft.Shadow(color='#ececec', Direction=225, Strength=3) progid:DXImageTransform.Microsoft.Shadow(color='#ececec', Direction=270, Strength=6)  progid:DXImageTransform.Microsoft.Shadow(color='#ececec', Direction=305, Strength=3)

Da ist irgendwas schief gelaufen bei der Definition dafür. Ich würde esntweder die Schatten kompltte weglassen für die IE-User oder, wenn du es denn haben willst, mal damit versuchen: http://fetchak.com/ie-css3

[pOOky1969]

Vielen, vielen Dank Hero Master,

mittlerweile hatte ich das auch schon herausgefunden, dass es an den Schatten liegt. Allerdings MUSS ich es auch in ie umsetzen. Der Link zum ie-css3.htc hat mir schon Hoffnungen gemacht.

Allerdings bin ich wohl zu blöd, das File richtig zu verlinken. Remize erklärt, dass die url-Schreibweise auf das root_verzeichnis (und nicht relativ zum css - wie standart) gesetzt werden muss. Diesen Rat habe ich (eigentlich) befolgt. Scheint aber irgendwie nicht zu funktionieren. Habe es auch schon mal mit absolutem Pfad probiert (http://...) Aber das funktioniert nicht.

Farbe ist auch schon Schwarz (#000, weil angeblich keine andere Farbe funktioniert.

So langsam zweifle ich am meiner Kompetenz

Hast du / Irgendjemand eine Idee?

[hero-master]

Lass das Ganze mal in der realtiven Pfadangabe und hau das HTC in das Rootverzeichnis, sprich zu: http://www.testserver-ruf.de/behaviour.htc
Dann hast du es ja derzeit auch auskommentiert, so dass es nicht funktioniert. Die MS-Filter solltest du komplett rausnehmen und ggfs. auch noch den Bereich mit zoom und position auf der htc-Seite lesen

Leg mal alles so an, dass es laut der Anleitung funktionieren soll, ich schau mir das dann heute Abend im IE dann mal an.

[pOOky1969]

HAllo Hero MAster,

habe das script relativ eingebunden (im rootverzeichnis). Alle style-Angaben laut htc-Seite(zoom und position) - aber es funktioniert bei mir nicht. Wäre schön, wenn du da drauf schauen könntest. Ich bin mittlerweile betriebsblind - glaube ich.

CSS:
#contentBlock-1, #contentBlock-2, #generatedContent-1, #generatedContent-2, #globalMenu-wrapper {
position: relative;
-moz-box-shadow: 0 0 15px #000;
-webkit-box-shadow: 0 0 15px #000; /*#cdcdcd;*/
box-shadow: 0 0 15px #000;
behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get these classes */
background-color: #fff;
margin: 0px;
padding: 0px;
zoom: 1;
z-index: 30;
}


Grüße

pooky

[hero-master]

Hey pooky,
kannst du die Datei mal auf dem Rootverzeichnis hochladen, so dass dieser Pfad herauskommt: http://www.testserver-ruf.de/ie-css3.htc

[pOOky1969]

File liegt in der domain root.

Hatte ich heute NAchmittag auch schon mal ausprobiert - leider ohne Erfolg.

Habe jetzt für morgen (Zwischenpräsentation) einfach mal 3px border genommen.

Wenn du allerdings eine Lösung hast. Nur her damit.

Vielen Dank im Voraus.

[alexandr.stoian]

probier so. z.B. wenn Strength 10 setzt MotionBlur(strength=-10)

filter:progid:DXImageTransform.Microsoft.shadow(color='#AAAAAA', Direction=0,  Strength=10);
filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=-10)
        progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=0);