Anfängerproblem? IE 7 macht keine runden Ecken! (PIE bzw. Conditional Comments?)

**Tinchen** · 28.11.2011, 10:07

Hallo zusammen!

Ich bin dabei eine Seite mit Contao 2.10.2 zu erstellen, bei der die Navigation wie auch die div's für den Inhalt runde Ecken nebst Schatten haben sollen.

Ich habe Contao lokal installiert und teste bisher auch hier. Unter FF, Safari und Chrome wird auch alles prima dargestellt, aber:
der IE7 wie auch Opera 9.63 stellen keine runden Ecken und auch keine Schatten da, obwohl doch der PIE dafür da ist, oder? Statt dessen erscheinen dann einfach eckige Kästen an denen sonst alles korrekt ist (Farbe und Border, sowie Abstände etc.)

Dann habe ich versucht wegen des IE ein neues Stylesheet mit Conditionel Comment (if lt IE 9) anzulegen, aber dabei trickst er sich beim Test im IE7 selbst aus. Er zeigt dann noch immer eckige Felder ohne Schatten an, darunter schimmern jedoch die eigens hierfür angelegten Hintergrundbilder.

Wo liegt der Fehler?

Danke vorab und Grüße
Tinchen

**rene-ddorf** · 28.11.2011, 10:15

Hmm, so ist das schwierig zu sagen. Meistens, zumindest bei mir, hängt es daran, daß die pie.htc-Datei nicht richtig angesprochen wird. Falscher Pfad oder sowas. Könntest Du mal irgendwas online stellen?
Gruß
Maclatz

**Tinchen** · 28.11.2011, 10:20

@maclatz

Danke für den Hinweis, aber wie mache ich das? Wo muß ich das nachsehen?

Sorry, bin Anfängerin!

Gruß und Danke
Tinchen

**Tinchen** · 28.11.2011, 10:22

@maclatz

Sorry, online-stellen kann ich es noch nicht. Die Voraussetzungen dafür werden erst gerade geschaffen.

Tinchen

**tril** · 28.11.2011, 14:00

Ohne ein bisschen CSS Code wird das ganze kaum analysierbar sein. Vor allem wenn du nicht weißt wonach du schauen musst wird es schwierig. Kannst du nicht die generierte CSS Datei mal hoch laden oder Teile davon? Diese befindet sich in system/scripts/*.css, am besten schaust du in den HTML Code welche CSS Datei genau eingebunden wird.

Übrigens, CSS Pie ist NUR für IE, das Opera Problem wirst du damit nicht lösen können.

MfG Tristan

**andre.5tz** · 28.11.2011, 15:43

Versuche doch bitte mal, ob es funktioniert, wenn Du in bei den betroffenen Elementen noch

position:relative;

eingibst. Ich hatte da auch so einige Probleme und meine damit hat es geklappt.

VG
André

**Tinchen** · 28.11.2011, 20:17

Hallo zusammen,

und erstmal schon vielen Dank für die bisherigen Antworten!

So wie auf diesem Screenshot sollte es aussehen und tut's wie beschrieben auch außer IE und der alten Opera-Version.

layout_runde_Ecken.png

Dass ich in der alten Opera-Version nirgendwo runde Ecken bekomme kann ich verschmerzen, nur eben im IE nicht!

So und nun will ich mal sehen, ob es mir gelingt hier mein CSS dazu zu posten:

Code:

body {
    background-attachment: fixed;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../../material_accent/hg_skizze_1.jpg");
    background-origin: padding-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFFFFF;
    font: 12px 'Muli',Verdana,sans-serif;}

#wrapper {
    position: relative;
}

#header {
    height: 228px;
    margin: 0 auto;
    position: relative;
    top: 50px;
    width: 826px;
}

#header .inside {
    height: 100%;
}

#header .inside .logo {
    background-image: url("../../tl_files/logo_weiß_blau_schatten.png");
    background-repeat: no-repeat;
    height: 102px;
    left: 540px;
    margin-bottom: 16px;
    position: relative;
    width: 306px;
}

#header nav.mod_navigation ul {
    height: 56px;
    list-style-type: none;
    margin: 0 auto;
    padding-left: 50px;
    position: relative;
    width: 774px;
}

#header .inside .mod_navigation ul li {
    background-color: #21A4FF;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 1px 1px 3px 1px rgba(2, 61, 102, 0.4);
    float: left;
    font: 12px 'Muli',Verdana,sans-serif;
    height: 18px;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 16px;
    width: 68px;
}

#header .inside .mod_navigation ul li.first {
    margin-left: 0;
}
#header .inside .mod_navigation ul li.active {
    background-color: #023D66;
}

#container {
    background-color: #FFFFFF;
    border: 2px solid #023D66;
    border-radius: 32px 32px 32px 32px;
    box-shadow: 1px 1px 3px 1px rgba(2, 61, 102, 0.4);
    color: #023D66;
    font: 12px 'Muli',Verdana,sans-serif;
    margin: 60px auto 0;
    min-height: 80px;
    overflow: auto;
    position: relative;
    width: 726px;
}

#footer {
    background-color: #023D66;
    border-radius: 32px 32px 32px 32px;
    box-shadow: 1px 1px 3px 1px rgba(2, 61, 102, 0.4);
    height: 80px;
    margin: 14px auto 0;
    padding: 4px;
    width: 722px;
}

Und wie beschrieben sind alle runden Ecken im IE eckig und ohne Schatten.

@André
Eigentlich habe ich bei den betroffenen Elementen ein position:relative vergeben und trotzdem.

Vielen Dank schon mal vorab für Eure Bemühungen.
Grüße
Tinchen

**Tinchen** · 28.11.2011, 20:46

Hallo,

hier kommt der Vollständigkeit halber noch das Bild, wie's im IE aussieht:
IE_eckig_statt_rund.jpg

Grüße
Tinchen

**andre.5tz** · 28.11.2011, 21:12

Hallo Tinchen,

ein Beispiel für den Container:

Code:

#container {
    background-color: #FFFFFF;
    border: 2px solid #023D66;
    -moz-border-radius:32px;
    -webkit-border-radius:32px;
    border-radius: 32px 32px 32px 32px;
    box-shadow: 1px 1px 3px 1px rgba(2, 61, 102, 0.4);
    color: #023D66;
    font: 12px 'Muli',Verdana,sans-serif;
    margin: 60px auto 0;
    min-height: 80px;
    overflow: auto;
    position: relative;
    width: 726px;
    behavior:url("plugins/css3pie/PIE.htc");
}

Wenn ich das richtig sehe, dann fehlen für den Radius ein paar angaben, -mod-border-radius und -webkit-border-radius und ganz wichtig, die PIE.htc muss auch eingebunden werden. Bitte auf die Pfade achten, ich nehme an, Du schreibst Deine eigene css.
Zum Üben und Testen ist es leichter, die CSS-Angaben im Contao-Theme einzustellen, da kommt vieles automatisch und man kann sich einiges abschauen.

Ich hoffe, das passt jetzt, den Rest solltest Du jetzt sicher alleine hinbekommen.

VG
André

**Tinchen** · 28.11.2011, 21:55

Hallo André,

vielen Dank für Deine prompte Antwort.

Sorry, Dummheit eigene. Ich hatte den CSS-Code aus dem Firebug kopiert, weil es mir am einfachsten erschien. Deine Anweisung behavior ... ist natürlich überall drin wo sie drin sein muß, also überall dort, wo ich Radien und Schatten eingesetzt habe, weil ich alles über das Contao-Theme einstelle. Ebenfalls sind dort auch die anderen Angaben moz-border und webkit-border enthalten.

Hier also noch mal der Code, hoffentlich jetzt korrekt:

Code:

body{
font:12px 'Muli', Verdana, sans-serif;
color:#FFFFFF;
background: url(../../tl_files/hg_skizze_1.jpg) no-repeat center center fixed;	
-webkit-background-size: cover;	
-moz-background-size: cover;	
-o-background-size: cover;	
background-size: cover;	
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test_1.jpg', sizingMethod='scale');-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test_1.jpg', sizingMethod='scale')";
}
#wrapper{
position:relative;
}
#header{
width:826px;
height:228px;
top:50px;
position:relative;
margin:0 auto;
}
#header .inside{
height:100%;
}
#header .inside .logo{
width:306px;
height:102px;
left:540px;
position:relative;
margin-bottom:16px;
background-image:url("../../tl_files/logo_weiß_blau_schatten.png");
background-repeat:no-repeat;
}
#header nav.mod_navigation ul{
width:774px;
height:56px;
position:relative;
margin:0 auto;
padding-left:50px;
list-style-type:none;
}
#header .inside .mod_navigation ul li{
width:68px;
height:18px;
float:left;
margin-right:10px;
margin-bottom:10px;
padding:16px;
background-color:#21A4FF;
-moz-box-shadow:1px 1px 3px 1px rgba(2,61,102,0.4);
-webkit-box-shadow:1px 1px 3px 1px rgba(2,61,102,0.4);
box-shadow:1px 1px 3px 1px rgba(2,61,102,0.4);
-moz-border-radius:16px;
-webkit-border-radius:16px;
border-radius:16px;
font:12px 'Muli', Verdana, sans-serif;
behavior:url("plugins/css3pie/PIE.htc");
}
#header .inside .mod_navigation ul li a{
font:12px 'Muli', Verdana, sans-serif;
text-decoration:none;color:#023D66;
}
#header .inside .mod_navigation ul li.active{
background-color:#023D66;
}
#header .inside .mod_navigation ul li.first{
margin-left:0;
}
#container{
width:726px;
min-height:80px;
position:relative;
overflow:auto;
margin:60px auto 0;
background-color:#FFFFFF;
-moz-box-shadow:1px 1px 3px 1px rgba(2,61,102,0.4);
-webkit-box-shadow:1px 1px 3px 1px rgba(2,61,102,0.4);
box-shadow:1px 1px 3px 1px rgba(2,61,102,0.4);
border:2px solid #023D66;
-moz-border-radius:32px;
-webkit-border-radius:32px;
border-radius:32px;
font:12px 'Muli', Verdana, sans-serif;
color:#023D66;
behavior:url("plugins/css3pie/PIE.htc");
}
#container h1{
font:14px 'Muli', Verdana, sans-serif;
font-weight:bold;
color:#023D66;
}
#main{
width:330px;
margin:0;padding:16px;
}
#right{
width:330px;
height:100%;
padding:16px;
}
#footer{
width:722px;
height:80px;
margin:14px auto 0;
padding:4px;
background-color:#023D66;
-moz-box-shadow:1px 1px 3px 1px rgba(2,61,102,0.4);
-webkit-box-shadow:1px 1px 3px 1px rgba(2,61,102,0.4);
box-shadow:1px 1px 3px 1px rgba(2,61,102,0.4);
-moz-border-radius:32px;
-webkit-border-radius:32px;
border-radius:32px;
behavior:url("plugins/css3pie/PIE.htc");
}
#footer p{
padding:6px;
text-align:center;
}

Das ist ja das Rätsel: warum klappt es trotzdem nicht?

Kann das etwas mit der lokalen Installation und dem Testen im lokalen Netzwerk zu tun haben? Ich teste in dem ich von einem PC aus die IP von meinem Mac ansteuere.

Liebe Grüße,
Tinchen

**andre.5tz** · 29.11.2011, 18:59

Hi Tinchen,

das ist jetzt natürlich eine andere Ausgangslage

Das CSS sieht gut aus, da kann ich leider auch nicht weiter helfen.
Wenn es Dir hilft, ich habe gerade mal eben die CSS-Styles auf eine Testseite eingebunden und im IE-Tester mal angesehen. Es war zwar alles "durcheinander" aber auch im IE7 rund und schattig.

VG
André

**pmmueller** · 29.11.2011, 19:41

Browsercache gelöscht?

Eine Ursache war sonst oft noch die .htaccess. Dort sollte eventuell folgende Zeile drin stehen und aktiviert sein:

AddTYpe text/x-component .htc

Ansonsten ist meine Meinung zu runden Ecken in alten Browsern immer noch dieselbe: Wenn es ohne großen Aufwand geht, gerne. Aber die User im IE7/8 wissen nicht, dass die Ecken eigentlich rund sein sollten, und sie kommen meist sowieso eher wegen des Inhalts als wegen der Rundungen.

Zum Bearbeiten der .htaccess aus dem Backend heraus gibt es eine neue Erweiterung von Tristan:
- [htaccess] (im ER)
- Anleitung im Wiki

**tril** · 30.11.2011, 07:21

Afaik ist auch die CSS Eigenschaft -pie-border-radius notwendig zu setzen. Ich meine PIE prüft border-radius nicht ab, sondern nur die -pie-* geprefixten Eigenschaften.

**Tinchen** · 30.11.2011, 09:14

Hallo zusammen,

ich hab' die Hoffnung nicht aufgegeben - Fazit: Alles wird gut!

Zwar hatte ich hier schon viel gelesen, aber über den entscheidenden Beitrag bin ich dann in der Nacht vom 28. zum 29 Nov. gestolpert: Hier mein Dank an Peter wegen der .htaccess. Die Einstellung war da, aber die Datei noch nicht aktiviert (sprich das default noch nicht weg). Hurra!!

Leider war die Freude nur von wirklich kurzer Dauer, denn als ich es im IE angeschaut hatte standen mir die Haare ca. 50cm in alle Himmelsrichtungen ab!
@André: Du hast recht, alles durcheinander und es sah extrem schlimm aus: Der Text aus dem weißen Inhaltselement schob sich über die darüberliegende Navigation, die dann nicht mehr ansprechbar war. Im FF, Chrome, Safari alles OK nur eben nicht im IE!

Daraufhin hab ich ne Flasche Rotwein geköpft (ich hoffe ich verstoße hier nicht gegen das Jungendschutzgesetz).

Dann half nur noch try and error: Man glaubt es nicht! oder "Sie wissen nicht was sie tun", wer? IE oder ich?

Eigentlich sollte es doch aus logischer Sicht gleich sein, ob das obere Element mit margin den Abstand nach unten herstellt (was für mich logisch wäre, weil ich von oben nach unten arbeite) oder ob das untere Element mit margin den Abstand zum oberen herstellt, oder? Nicht eben für den IE (anscheinend ein echter Nervenkitzel für Webworker).

Egal, wenn der Kerl das so will soll er es kriegen - jetzt paßt es, wenngleich die runden Ecken und der Schatten in allen anderen Browsern immernoch schöner aussehen!

@tril
Was ist Afaik?

Grüße und ein herzliches Dankeschön an alle, die mir hier mit Rat und Tat zur Seite gestanden haben!!
Tinchen

**tril** · 30.11.2011, 09:22

Zitat von Tinchen

Was ist Afaik?

As far as i know

**pmmueller** · 30.11.2011, 09:31

Fehlerhafte Darstellungen in IE7 haben oft was mit einem Konzept namens "hasLayout" zu tun. Falls das nichts sagt: Einführung zu hasLayout.

**Tinchen** · 30.11.2011, 13:52

@tril
Danke, wieder was dazugelernt: bin halt blond!

@Peter
vielen Dank für die Info!! "hasLayout" ist mir zwar schon mal irgendwo begegnet, aber was es bedeutet war mir nicht klar. Werde es vertiefen!
1000 Dank und zu Weihnachten werde ich mir jetzt wohl doch mal "Little Boxes" wünschen, um es mir mit klarem, kühlen Kopf nach Sylvester unter das Kopfkissen zu legen.

Grüße
Tinchen

**pmmueller** · 30.11.2011, 14:11

Zitat von Tinchen

... doch mal "Little Boxes" wünschen, um es mir mit klarem, kühlen Kopf nach Sylvester unter das Kopfkissen zu legen.

Nur als Warnung: Das Ding hat inzwischen 800 Seiten.
Unterm Kopfkissen könnte das in Richtung Genickstarre gehen

**Tinchen** · 30.11.2011, 20:34

Nur als Warnung: Das Ding hat inzwischen 800 Seiten.
Unterm Kopfkissen könnte das in Richtung Genickstarre gehen

Letzteres wäre ja gar nicht so schlimm, hab ein dickes Kopfkissen und zur Not schlaf' ich halt im Sitzen; verarbeiten muß ich das ja dann eh.

Viel abschreckender sind 400 Blatt Papier durch die ich durch muß - besser mein rostiges Hirnchen. Gibt es dafür noch keine hömoöpatische Lösung?

Spaß beiseite: Welche ist eigenlich die aktuelle Auflage? Ich hatte es nämlich kürzlich in der Buchhandlung in der Hand und war mir nicht sicher, ob eben dieses Exemplar das aktuelle war. Rückblickend erschien es mir dünner.

Grüße
Tinchen

**pmmueller** · 30.11.2011, 22:51

Zitat von Tinchen

Welche ist eigenlich die aktuelle Auflage?

»Das große Little Boxes-Buch«. Nur echt mit hartem Cover und gelbem Leseband.

**planepix** · 30.11.2011, 22:52

Thumbs up Peter. Hier kein oranje Bändchen?

**pmmueller** · 01.12.2011, 07:51

Nee, »Little Boxes« ist innen »heel veel geel«. Ganz viel gelb.

Contao hat ja sowieso schon Orange als Farbe. Da passte das mit dem orangen Bändsel ganz wunderbar

**thymian** · 02.07.2012, 17:13

Hallo zusammen,

ich möchte noch kurz etwas ergänzen, da ich auch schon stundenlange Quälerei hinter mir habe (und bei einem anderen Projekt hatte).

Bei mir hat geholfen, auf jeden Fall die .inside-Angaben zu machen: width und position:relative. Die vergesse ich gerne mal und gebe nur #main oder #header eine Angabe. Das gefällt zumindest dem IE7 nicht so gut.

**doescher** · 04.03.2013, 22:38

Hallo zusammen,

jetzt hänge ich leider auch in der Internet-Explorer-8-Falle, meine Website wird überall prima dargestellt, leider nur eben im ie8 unter Windows XP nicht.

Die Seite ist mit Contao 2.11.9 aufgebaut (wegen des webShops). Eine andere Website mit Contao 3.0.4 (ohne Shop) läuft hingegen problemlos.

Ich habe das Problem, dass in erster Linie die runden Ecken und die Verläufe nicht angezeigt werden, außerdem noch Transparenzen. Z.B. wird beim Wrapper, der eine Transparenz als Hintergrund hat, gar kein Hintergrund angezeigt, sondern nur der Schatten und somit alles schwarz. Auch alles Formularfelder werden nicht angezeigt...

Contao schreibt ja eigentlich den nötigen Code mit in das CSS. Dort wird eigentlich alles richtig angezeigt.
In der .htaccess steht auch die Zeile AddTYpe text/x-component .htc, allerdings ohne den Punkt von htc drin.

Was muss ich nun machen? Kann/muss ich eine separate CSS-Datei in Contao speziell für den ie8 anlegen und diese Transparenzen herausnehmen? Wie könnte das aussehen? Wie schließe ich aus, dass die funktionierenden CSS-Stiles beeinflusst werden?

Was macht Contao 3 anders, dass hier diese Gestaltungselemente richtig angezeigt werden?

Grüße

**Tinchen** · 05.03.2013, 07:11

Hallo Jan-Dirk,

hast Du denn die htaccess aktiviert in dem Du das default entfernt hast?

Könntest Du die Seite oder Screen-Shots bzw. Code posten?

Lg
Tinchen

**doescher** · 05.03.2013, 08:10

Hallo Tinchen,

.htaccess ist aktiviert und funktioniert.

Angucken kannst Du Dir die Seite im Moment hier.

Ich bin auf diese Seite gestoßen, auf der ebenfalls von Leo Feyer eine Lösung beschrieben wird.
Das ist zwar Arbeit, aber damit sollte es doch klappen, oder?Bildschirmfoto2.jpg

Gruß

PS: zum Vergleich für alle, die kein XP haben hier zwei Screenshots
Bildschirmfoto1.jpg der Schatten verschwindet hinter den Hintergrund des body-Tag
Bildschirmfoto2.jpg keine Darstellung der Eingabefelder des Kontaktformulars

**kleppi** · 05.03.2013, 12:59

Hallo zusammen,

habe den Bericht von Peter Müller über "hasLayout" gelesen.
Ich hatte in einem Div eine H3-Überschrift, die wurde im IE7 immer über dem Div angezeigt.
Durch die Anweisung im Div "position:absolute" wird nun alles richtig angezeigt.

Habe heute wieder etwas gelernt, super!

Gruß kleppi

**doescher** · 05.03.2013, 16:26

Hallo, habe ich gestern auch probiert, dann wurde der Schatten nach vorne genommen, aber der wrapper hatte keinen Hintergrund mehr ...

**pmmueller** · 06.03.2013, 08:33

Wenn im IE 8 und 7 die runden Ecken fehlen und/oder andere komische Dinge passieren, ist meist CSS3Pie daran Schuld:

https://community.contao.org/de/show...l=1#post245446

Die Lösung liegt, wie dort beschrieben, oft darin, position:relative und einen beliebigen z-index für die jeweiligen Elternelemente zu vergeben.

**pmmueller** · 06.03.2013, 08:36

Zitat von kleppi

Ich hatte in einem Div eine H3-Überschrift, die wurde im IE7 immer über dem Div angezeigt.
Durch die Anweisung im Div "position:absolute" wird nun alles richtig angezeigt.

Absolute Positionierung ist eine ziemlich radikale Lösung, nur um hasLayout im IE7 zu erreichen.

- Zu hasLayout
- Zur absoluten Positionierung

Im IE8 gibt es das Konzept von "hasLayout" Gott sei Dank nicht mehr.

**Messa** · 06.03.2013, 09:06

Sonst einfach mit F12 auf der Tastatur in den Entwickler-Modus.
Dort kannst du ca. wie in Firebug CSS testen.
Und in Contao kannst du dann auch z.b. die class "ie7" nehmen.
Dann wird nur dieser angesprochen.

lg Matthias

**doescher** · 06.03.2013, 09:24

Zitat von Messa

Sonst einfach mit F12 auf der Tastatur in den Entwickler-Modus.
Dort kannst du ca. wie in Firebug CSS testen.
Und in Contao kannst du dann auch z.b. die class "ie7" nehmen.
Dann wird nur dieser angesprochen.

lg Matthias

Auf dem Mac ist die F12 die "Lautstärke aufdrehen"-Taste, bei meiner Mucke im Moment auch 'ne gute Idee...

Ich werde heute abend mal die Hinweise von u.a. pmmueller ausprobieren, vielleicht komme ich damit ja schon hin (sein Buch hat mich ja immerhin bis hierhin gebracht).
ie 6 und 7 schließe ich hiermit einfach von meiner Seite aus, wer mit so alten Klamotten unterwegs ist, der will auch mein Buch nicht haben.
Aber ie8 als letzte Möglichkeit des Updates für XP möchte ich schon noch bedienen.

Danke bis hierhin, ich probiere alles mal aus.

**Messa** · 06.03.2013, 09:28

Mucke Lauter ist bei Mac F12 das kann nicht schaden.

Eventuell mit der [FN]+12 oder im IE im Menü "Extras" auf "Entwicklertools".

Dann kannst du dort auf IE7 umstellen und das CSS anpassen.

IE6 (2001) berücksichtige ich auch nicht mehr, ist die Zeit und Geld nicht wert.
IE7 (2006) schau ich, dass wenigsten alles angezeigt wird. und mache dann
noch ein Hinweiß hin für Besucher IE7 das Sie ein Update machen müssen.

lg Matthias

**doescher** · 06.03.2013, 10:17

Ich konnte wieder nicht abwarten...

Habe jetzt den body-Tag auf z-index:-10 und den wrapper auf -5 gesetzt und nun ist es wenigstens alles benutzbar unter ie8.

Übrigens habe ich dazu die Klasse .ie8 benutzt, wie hier geschrieben.

Danke Euch bis hierhin schon einmal. Nun kann ich die Seite online stellen...