• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

IE Optimierung

M

memento

Neues Mitglied
Schönen guten Morgen! :wink:

Das ist meine HP Nummer 1, bei der ich die Umsetzung alleine mache. Deshalb hab ich noch ein paar Fragen, die ich noch nit ganz alleine hinbekomme.
Ich habe mit folgender Seite Raw Matters - Ein ungeschliffener Performanceabend Darstellungsprobleme im IE. Meine Version IE8.


ad 1)
Ich habe für die Galerie Schatten und Rotation im CSS angegeben. Um das auch im IE darstellen zu können, hab ich auch zB "-ms-transform" hinzugefügt in der Klasse. Trotzdem stellt es mir der IE nit dar.
Muss ich noch etwas angeben?


​
ad 2)
Der Menüpunkt "KONTAKT" ist im IE ständig geöffnet und passt irgendwie nicht, obwohl es ident ist, wie die anderen Menüpunkte.
Weiß jemand warum?
​



Ich danke euch vielmals für eure Zeit und Hilfestellung!

Stefanie



CSS
Code: 
@charset "utf-8";

body { font-family: Arial, Helvetica, sans-serif; color: #404040; font-size: 0.95em; line-height: 1.5em; }
p { padding: 0 0 15px 0; }
a { color: #F09; text-decoration: none; }
a:visited { text-decoration: none; }
li { list-style-type: none;}

table { border: none; }
td { font-family: Arial, Helvetica, sans-serif; font-size: 0.95em; width: 160px; }
th { font-family: Arial, Helvetica, sans-serif; font-size: 0.95em; }

h1 { font-family: Arial, Helvetica, sans-serif; font-size: 1.6em; text-align: left; line-height: 1.05em; }
h2 { font-family: Arial, Helvetica, sans-serif; font-size: 1.3em;  padding: 15px 0 0 0; }
h3 { font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; }
h4 { font-family: Arial, Helvetica, sans-serif; font-size: 1.3em;  padding: 15px 0 0 0; color: #f09; }

.large { font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; line-height: 1.25em; }
.small { font-family: Arial, Helvetica, sans-serif; font-size: 0.67em; line-height: 1.25em; }

.pink { font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; color: #f09;  font-weight: bold; }
.pink_std { font-family: Arial, Helvetica, sans-serif; color: #f09;  }

.justified { font-family: Arial, Helvetica, sans-serif; text-align: justify; }
 
/* Schrift ENDE */


.wrapper {
    width: 996px;
    position: absolute;
    top: 0px; right: 0px; bottom: 0px; left: 125px; 
}

#logo_header {
    margin: 125px 0 0 0px;
}

#fb {
    float: left;
    margin: 43px 0 0 0;
}

.content {
    width: 776px;
    padding: 25px 0 25px 0;
    float: right;
    text-align: justify;
    font-size: 0.95em;
    line-height: 1.5em;
}

.artikelbild {
    margin: 0 0 25px 25px;
    border: solid 0.1em #999;     
}

.linie {
    border-bottom: 1em solid #f09;
}

#FlashID {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    margin: -5px 0 0 165px;
}

#footer {
    clear: both;
    text-align: right;
    padding: 25px 0 20px 0;
    color: #F09;
    font-size: 0.7em;
}


/* NAVIGATION */

ul.menue { display: inline; } /* Breite muss noch angepasst werden */
ul.menue  li { background: #F09 ; color: #FFF ; float: left ; list-style-type: none ; text-align: center ; }
ul.menue  li a { color: #FFF ; text-decoration: none ; display: block ; width: 166px ; height: 40px ; line-height: 40px ; font-weight: bold ; }  /* Breite und Höhe eines Menüpunktes */
ul.menue  li:hover a { border-bottom: 12px solid #F09 ; } /* Ausbuchtung unten */
    
.navigation {
    font-size: 1em;
    background: #F09; 
}


/* GALERIE */

.container {
    width: 800px;
    float: left;
    padding: 0 0 50px 0;
}

ul.gallery li a {
    float: left;
    padding: 15px 15px 40px 15px;
    background: #FFF;
    border: 1px solid #828181;    
}

ul.gallery li a.pic-1 {
    z-index: 5;
    -ms-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
}

ul.gallery li a.pic-2 {
    z-index: 3;
    transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -o-transform: rotate(4deg);
}

ul.gallery li a.pic-3 {
    z-index: 4;
    transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
}

ul.gallery li a.pic-4 {
    z-index: 7;
    transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    -webkit-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);
}

ul.gallery li a.pic-5 {
    z-index: 6;
    transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -o-transform: rotate(6deg);
}

ul.gallery li a.pic-6 {
    z-index: 8;
    width: 200px;
    height: 150px;
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}

ul.gallery li a:hover {
    z-index: 10;
    -moz-box-shadow: 3px 5px 15px #333;
    box-shadow: 3px 5px 15px #333;
}


/* KONTAKTFORMULAR */

input { 
    width: 250px;
    height: 20px;
    margin: 0 0 5px 0;
}

textarea {
    min-width: 250px;
    height: 50px;
    max-width: 600px;
}

.leer {
    visibility: hidden;
    max-height: 10px;
}

.absenden input {
    height: 30px;
    width: 256px;
}



 /* MOUSE OVER

.navigation {
    width: 1000px;
    height: 55px;
    overflow: hidden;
}
.navigation a {
    text-decoration: none;
    display: block;
    height: 110px;
}
.navigation a img {
    border: 0;
}
.navigation a:hover {
    margin-top: -55px;
}

*/
 
Zuletzt bearbeitet:
Der IE 10 wird fast alles an CSS3 umsetzen können.

IE 8 kann fast gar nichts von CSS3. Rotation und Schatteneffekte gehören dazu.

Durch dein CSS-Code steige ich nicht durch. Du hast für die Navigation ein Div und ein UL und die Klassen navigation und menue:


ul.menue li a
und
.navigation a

Beide Angaben haben Einfluss auf die Darstellung des nachfolgenden a-Elements.
Was soll den nun gelten?
 
Ja, stimmt! Was hab i da für einen Blödsinn geschrieben.
Werd ich gleich die CSS nochmal checken...


IE ist so mühsam! Willkommen in der Welt eines Marktführers.
Im IE9 sieht sie eh so halbwegs aus.

Danke für dein Feedback!
 
Matrix nennt sich sowas. Alles klar, ich werd das Tutorial dann nach dem machen. Ich möchte dass es zumindest im IE 8 eine vernünftige Darstellung hat.
Aber bis zum IE6 optimier ich sicher nicht... wie sagte Microsoft so schön: "Würden Sie eine 9 Jahre alte Milch trinken?" :mrgreen:

Danke für den Link, das hilft mir sehr weiter!
 
OT: Ja, würde niemand. Total lächerlich. Es weiß doch jeder, dass nur bis zu 5 Jahre alte Milch genießbar ist. Das ist der Zeitraum zwischen Veröffentlichung der IE-Versionen 6 und 7. Solche Bonmots haben aus dem Munde dieser Firma einen reichlich schalen Beigeschmack.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben