IE - Fehlleistungen (Hintergrundfarbe, Slider, Navigation)

html.de-Forum HTML, XHTML & CSS
1

Hallo!
Baue gerade eine neue Webseite. Bin fast fertig, aber IE bereitet mir (3) größere Probleme.
Ich weiß nicht, ob es Sinn macht, alle hier aufzulisten, oder ob ich für jedes ein eigenes Thema aufmachen muß.

Fange mal mit einem an:
Ich habe den Hintergrund meines Inhaltsteils teiltransparent gemacht mit folgendem Farbbefehl in der .css Datei:

#mainbox {
  margin: auto;
  margin-top: 0px;
  width: 70%;
  background-color: hsla(25, 89%, 55%, 0.8);
  border: 1px grey solid;
  padding: 10px;
  overflow: auto;
  z-index:1;
  }

Nun scheint aber IE den background-color Befehl nicht zu interpretieren. Gibt es da einen Hack dafür? Ich will übrigens nicht opacity verwenden, weil dann auch die Fotos, die auf dem transparenten Bereich sind transparent werden. So sieht das Ganze dann aus:

[ATTACH]4334[/ATTACH] [ATTACH]4335[/ATTACH]

Soll ich die weiteren Probleme dann auch hier in dieses Thema einbringen oder eigene aufmachen?
Danke im voraus

2

Verwende rgba(), dann klappt es auch mit dem IE.

3

In Zukunft kannst du auf http://caniuse.com schauen, von welchen Browsern ein Feature unterstützt wird und auch eventuelle Möglichkeiten, um beispielsweise IE ins Boot zu holen.

4

Hallo

Beim IE ist die Version immer wichtig, bei der ein Problem auftritt.

Gruss

MrMurphy

5

Naja, der Screenshot wurde im Dokumentmodus IE8 (oder darunter) geschossen. Eine Version, die mittlerweile zu vernachlässigen ist.

In der aktuellen Version Edge (11) bis herunter zu IE9 wird der transparente Hintergrund korrekt angezeigt.

[ATTACH]4337[/ATTACH]

Von daher gehe ich mal davon aus, dass sich die übrigen Probleme ebenfalls nur auf diese betagte Version beschränken.

6

http://caniuse.com/#search=hsla Ja ist nur IE8

7

Hallo!

Tut mir leid, wenn ich Euch (und Mich!) gleich zwei mal enttäuschen muß:

#mainbox {
  margin: auto;
  margin-top: 0px;
  width: 70%;
  background-color: rgba(242, 123, 38, 0.8);
  border: 1px grey solid;
  padding: 10px;
  overflow: auto;
  z-index:1;
  }

habe jetzt das eingegeben und siehe da, es wird NICHT interpretiert. Noch immer überhaupt keine Farbe, nur das
body-hintergrundbild.

Und zur Version:
IE 11.0.9600.18204
Updateversion 11.028

tja, was tun?

8

Hallo

tja, was tun?

Uns nicht mi den Quellcodeschnipseln ärgern, sondern einen Link zu der betroffenen Seite geben.

Eventuell hast du den Inhalt von #mainbox aus dem (Dokumenten-)Fluss genommen, so dass es keine Höhe hat.

Gruss

MrMurphy

9

habe jetzt eine „Lösung“ gefunden. Extrem unelegant, weil nicht transparent, aber IE zwingt einen scheinbar dazu:

background: rgb(242, 123, 38); /* The Fallback */
background-color: rgba(242, 123, 38, 0.8);

Jetzt kann man den Text wenigstens lesen :frowning:

Falls aber jemand noch eine Idee hat, wie ich die Transparenz (ohne opacity!) wieder einführen kann, bin ich dankbar.

Komme demnächst mit weiteren Problemen, die dieser seltsame Browser mir bereitet zu Euch.

10

Hier der Seitenlink. Ist aber noch die hsla Version drauf, weil ich natürlich nicht jeden Testschnipsel hochlade, sondern das Ganze erst mal offline teste.

http://hptestspace.bplaced.net/

11

Hallo

Ich leider grade keine Zeit. In deinem Quellcode scheint ein grundsätzliches Problem zu liegen.

Probier mal den Doctype von HTML5 aus.

Gruss

MrMurphy

12

Mittels „F12“ den aktuellen Dokumentmodus überprüfen.

Ich hab dieselbe Version, und meinen Screenshot im Standard-Modus „Edge“ kennst Du.

13

Habe beides gemacht.
Bei mir ändert html5 nix, aber da gibt es einiges, was mir schleierhaft ist:

Spicelab: Auf Deinem Screenshot ist der Hintergrund transparent.
Und bei jemand, den ich vor kurzem bat, die Seite mal zu begutachten war von der Transparenz her auch alles ok,
nur auf der index-Seite gab es gar keine Farbe.
Versteh einer!

hier mein Screenshot mit dem Debugger
[ATTACH]4350[/ATTACH]

Glaube ich auch, denn es funktionieren (ie) auch einige andere Sachen nicht.

14

Hallo

Ich habe mir die Seite jetzt mal etwas intensiver anschauen können.

Das Problem ist nicht der IE11, sondern der fehlerhafte HTML- und CSS-Quelltext.

Dadurch erkennt der IE11 das CSS als CSS 2.1, dass mit den rgba- und hsla-Farben nichts anfangen kann.

Zudem enthält er einige nicht-UTF-8-konforme Zeichen. Die sind zwar nicht für die Farbdarstellung verantwortlich, sollten aber trotzdem korrigiert werden, da sie andere Fehler verursachen können. So funktioniert beispielsweise die Validierung nicht.

Die anderen Browser führen dich leider in die Irre. Einerseits bügeln die viele Fehler aus, was Anfängern schnell Erfolge beschert. Andererseits erwecken sie den falschen Eindruck, dass der Quelltext korrekt erstellt wurde, was das Lernen eher erschwert.

Gruss

MrMurphy

15

Geht es auch etwas genauer? Das erleichtert das Lernen!
Danke!

16

META-Tags und Sperren für zukünftige Kompatibilität

Wenn schon, dann

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Zum Beispiel hier:

<!--   noch tieferes Untermen� - wenn gebraucht:

Vermutlich wurde das Dokument nicht UTF8-kodiert gespeichert.

<meta http-equiv="content-type" content="text/html; charset=utf-8" />Bügelt das alleine nicht aus.

17

Hallo!
War einige Zeit mit Arbeiten und Krank Sein beschäftigt, kann auch jetzt nur kurz.
Danke für die Antworten. Werde mich demnächst, wenn die Zeit es erlaubt, damit
beschäftigen und versuchen, die Fehler rauszubekommen.
Melde mich wieder, wenn nötig.
Vorab erst mal Danke für die Hilfe!

18

Hallo Zusammen!

Habe mir jetzt Zeit genommen und die vorgeschlagenen Änderungen vorgenommen: Umlaute ersetzt und
die meta tags für ie ersetzt durch:
<meta http-equiv=„X-UA-Compatible“ content=„IE=edge“ />

Und natürlich auf jeder Seite

gesetzt.

Und jetzt funktioniert es online wie offline so, wie ich es wollte!!

Also noch mal vielen Dank für die Hilfe!

19

Gern geschehen :slight_smile:

20

Hallo!
Tja, zu früh gefreut. Da geschieht etwas ganz seltsames!
Offline und Online (im Testspace) funktioniert die Seite wunderbar.
Aber wenn ich sie auf meine eigentliche Seite (www.archaja.de) hochlade und mit ie anschaue…
funktioniert die erste Seite aber alle anderen Seiten nicht mehr.
Was zur Hölle ist das?