Hallo erstmal,
ich habe in den letzten Tagen eine neue Website entwickelt und bei der Entwicklung versucht die Website für möglichst viele Leute gleich dazustellen. Die verschiedenen Bildschirmgrößen habe ich durch "%"-Angaben umgangen und versucht den Komplikationen mit dem Internet Explorers und auch die des Firefox-Browsers durch angepasste Codes zu "umgehen".
Da beide Browser und vor allem der Internet Explorer eine große Lücke an Darstellungsmöglichkeiten, verglichen mit Chrome, haben, ist es mir leider nicht gelungen diese zu schließen. Ich beziehe mich hierbei speziell auf die Möglichkeiten des "border"-codes. In Chrome zum Beispiel ist es möglich, einen "inset"-border und Ähnliches zu benutzen, während mir Chrome und IE dieses, trotz angeblicher Modifizierung, verweigern. Hier gibt es mehrere "Problemzonen", die ich anhand von Screenshots gerne genauer darlegen möchte, sodass ihr mir besser helfen könnt :)
So soll die Box aussehen und so tut sie es in Chrome :
So wird sie in Firefox wiedergegeben:
Und so im IE:
Der Code den ich für diese Box benutzt habe, ist folgender:
border-bottom: 1px solid #D4D4D4;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
-khtml-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
background: white;
border-top: 1px solid white;
border-top-width: 1px;
border-top-style: solid;
border-top-color: white;
background-image: -webkit-gradient(linear, 0 0, 0 40, from(#F7F7F7), to(white));
background-image: -moz-linear-gradient(center top, #F7F7F7 0%, white 40px);Wie vermutlich schon aufgefallen, fehlen die Abrundungen, Farbverläufe und zum Teil (IE) auch der obere Rand von einem Pixel in Weiß.
Alles, obwohl die Anweisungen speziell für jeden einzelnen Browser gegeben wurden, "-webkit-x"; "-moz-x" ; "khtml-x" wurden alle verwendet.
Das ist das erste Problem. Wie vorhin schon angesprochen, stellen Firefox und IE keinen inset-border da.
In Chrome wird dieser mir so angezeigt:
Und so in den anderen Fällen:
Das Ergebnis im IE und Co. ist wirklich enttäuschend :(
Code zu den inset-boxen:
-moz-box-shadow: inset 0 0 5px #888;
-webkit-box-shadow: inset 0 0 5px#888;
-khtml-box-shadow: inset 0 0 5px #888;Das war es an Problemen, ich hoffe, dass ihr mir in irgendeiner Form weiterhelfen könnt, da ich wirklich nicht weiß, wie ich das Problem lösen soll :)