Hilfe CSS layout in FF und IE sind unerschiedlich.

micr0 · 18.03.2010

Hallo liebe Community!
Ich habe eine Internetseite mit CCS entworfen. Im Firefox wird alles Tip Top angezeigt.
Im Internetexplorer.. werden anscheinend margin und padding nicht beachtet... Auch positionierungen sind nich zu 100%.

Muss ich jetzt ein 2. layout erstellen dass dann für IE abgestimmt ist?
Kann ich durch bestimmte scripts/befehle die fehler aufheben?
Weiss jemand wo ich eine detailierte info finde?

Habe schon gesucht.. Anscheinend ist es beim IE6 wiederum anders als beim IE7.. Habe mir auch das haslayout teilweise durchgelesen. Probleme gibts unteranderem bei floats, width, max und min werten.Ich werde aber nicht schlauer!

Also wie gesagt die Seite wird noch bearbeitet.
http://mrwp.de

vllt koennt ihr auch gleich meinungen zum design abgeben danke!

AI · 18.03.2010

AW: Hilfe CSS layout in FF und IE sind unerschiedlich.

Stichwort Browserweiche ... kleines Beispiel:

...





...

... also für die betreffenden Versionen jeweils ein maßgeschneidertes css-file, welches eigentlich nur die Passagen enthalten muss, welche im IE nicht korrekt dargestellt werden.

greetz
Al

ChrisvA · 18.03.2010

AW: Hilfe CSS layout in FF und IE sind unerschiedlich.

Nun, vielleicht liegen die Fehler hier:
Ergebnisse des CSS-Validators http://mrwp.de/ (CSS level 2.1)

Es kann möglich sein, dass der IE dir die Fehler übler nimmt, als der FF.
PS: Es gibt auch noch eine Seite, für den HTML-Quelltext, da sind auch noch 3 Fehler drinnen.

micr0 · 18.03.2010

AW: Hilfe CSS layout in FF und IE sind unerschiedlich.

vielen dank für die schnellen Antworten. CSS wurde korrigiert dank den validator.

... also für die betreffenden Versionen jeweils ein maßgeschneidertes css-file, welches eigentlich nur die Passagen enthalten muss, welche im IE nicht korrekt dargestellt werden.

Danke... abe wie definiere ich nur die passagen für den IE? hab leide 0 ahnung

AI · 18.03.2010

AW: Hilfe CSS layout in FF und IE sind unerschiedlich.

... in der Haupt-CSS liegt bsw. das:

.menu a {
font-weight : bold;
display : block;
text-decoration : none;
color : #333333;
background : url(../bilder/menback.gif) #eeeeee no-repeat;
border-left : 1px solid #333333;
padding : 2px 2px 2px 8px;
}

... alles wird aber eben nicht korrekt vom IE interpretiert, also in die IE.CSS folgendes:

.menu a {
padding: 1px 0px 0px 8px;
vertical-align : middle;
}

... nun sieht das in beiden Browsern gleich aus ... ist ein bissel Bastelarbeit, aber leider (noch!) notwendig! :-(

greetz
Al

ChrisvA · 18.03.2010

AW: Hilfe CSS layout in FF und IE sind unerschiedlich.

Also dafür, dass die Fehler behoben sind, sind die 4 Fehler immer noch da.
Außerdem müsstest du einige Fehler schon beseitigen können, falls du einfach noch einige Eigenschaften hinzufügst.
Die Zentrierung sollte beispielsweise klappen, falls du dem Div noch left:0% und right:0% zuweist.
Der Hover-Effekt der Links sollte im IE vollständig sein (immer gleich), falls du eine feste Breite angibst.
Weitere Fehler sollten ähnlich zu beheben sein.
Poste die Fehler mal bitte, da ich auf Anhieb nicht erkennen kann, wo es sonst noch hackt.
Falls die zusätzlichen Eigenschaften nicht helfen muss man dann leider noch auf die Methode von AI zurückgreifen, würde es aber zunächst einmal so versuchen.

micr0 · 18.03.2010

AW: Hilfe CSS layout in FF und IE sind unerschiedlich.

also, seite habe ich neu hochgeladen und der CSS validator hat keine Fehler gefunden

... nur farbwarnungen, abet denke die sind nicht das grosse problem.

Was mir noch probleme macht sind die feinheiten für den IE zu machen. Also muss ich schauen oder raten was nicht funktioniert? Und die Stellen dann in eine neue .css datei (z.B. IE6.css , IE7.css) validieren/konfigurieren? Oder neue schreiben?

Sorry leute... wie ihr seht stehe ich gerade voll aufm schlauch!!

Freue mich über jede erklaerung. Ich meine die Theorie ist ja da!

hubspe · 18.03.2010

AW: Hilfe CSS layout in FF und IE sind unerschiedlich.

micr0 schrieb:
Und die Stellen dann in eine neue .css datei (z.B. IE6.css , IE7.css) validieren/konfigurieren? Oder neue schreiben?

da reicht eine ie.css für alle IE-Versionen.
Innerhalb dieser Datei kann man problemlos nach IE-versionen unterscheiden.

dragobert · 19.03.2010

AW: Hilfe CSS layout in FF und IE sind unerschiedlich.

Wahrscheinlich hast du pixelgenau gearbeitet.
CSS im FireFox und CSS im IExplorer sind eben nicht gleich.

Unterschiede ergeben sich haupsächlich durch das unterschiedliche Boxmodell
(margin, padding usw.)

Guckst du hier:
CSS 4 You - The Finest in Stylesheets: Workshop: Boxmodell
(beachte den Unterschied zum IExplorer ganz am Ende der erwähnten Seite...)

Lösung:
1. Browserweiche (schlechtere Lösung, mehr Aufwand)
2. Layout anpassen (nicht pixelgenau arbeiten, in Prozent = besser, wenigstens zum Teil)

micr0 · 22.03.2010

AW: Hilfe CSS layout in FF und IE sind unerschiedlich.

Hallo leute, ich brauche euch wieder. Hab nun eine iefix.css angelegt und da ein paar definitionen geaendert.

Probleme:
1.Der Inhaltskasten hat im IE nicht den gleichen Abstand vom weissen "Rahmen".(padding sollte 10px sein, ist im IE aber nur rechts)
2.Auf der index seite und im Impressum gibts einmal News und Design buttons, welche aber im IE zu weit oben sind.
3. Im impressum ist auf einmal die Navi Fett... also bold... ich checks nicht mehr...

Im Firefox soweit alles tip top.

Code:

 body {
    background-color : black;
    font-family : Verdana;
    font-size : 12px;
    color : #fff8dc;
    }
#page {
    width : 780px;
    height : 100%;
    background-color : black;
    margin : 0 auto;
    border-right : 1px solid #333333;
    border-left : 1px solid #333333;
    }
#kasten {
    width : 780px;
    height : 700px;
    background-color : black;
    margin : 0 auto;
    }
#inhalt {
    height : 480px;
    max-height : 100%;
    width : 400px;
    background-color : white;
    position : relative;
    top : 15%;
    left : 10%;
    }
#inhalt1 {
    height : 400px;
    width : 360px;
    background-color : #cccccc;
    position : relative;
    top : 10px;
    left : 10px;
    padding : 10px;
    }
#description {
    height : 60px;
    position : relative;
    top : 10px;
    left : 10px;
    }
#navi {
    width : 130px;
    height : 250px;
    position : relative;
    left : 65%;
    top : -5%;
    }
#newsnavi {
    width : auto;
    height : auto;
    position : relative;
    top : 10%;
    left : 50%;
    }
#news {
    height : auto;
    max-height : 200px;
    width : 200px;
    border-top : 1px solid #333333;
    border-bottom : 1px solid #333333;
    position : absolute;
    top : 150px;
    left : 755px;
    }