Anfängerproblem? IE 7 macht keine runden Ecken! (PIE bzw. Conditional Comments?)
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
Liste der Anhänge anzeigen (Anzahl: 1)
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.
Anhang 5927
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
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo,
hier kommt der Vollständigkeit halber noch das Bild, wie's im IE aussieht:
Anhang 5928
Grüße
Tinchen
Liste der Anhänge anzeigen (Anzahl: 2)
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?Anhang 10183
Gruß
PS: zum Vergleich für alle, die kein XP haben hier zwei Screenshots
Anhang 10182 der Schatten verschwindet hinter den Hintergrund des body-Tag
Anhang 10183 keine Darstellung der Eingabefelder des Kontaktformulars
