CSS Formatierung mit verschiedenen Browsern ?

[Fubbel]

Hi,

Ich habe angefangen eine Seite in php zu schreiben.

Jetzt habe ich bemerkt das die Darstellung ie in Ordnung ist im Firefox jedoch total beschi***** aussieht.
Beim Firefox stimmen keinerlei der div Layer. Manche überlappen auch.

Nun meine Frage. An was sollte man sich halten wenn man die Seite hinterher per css formatieren und die größt mögliche Kompatibilität zu andern Browsern haben möchte?

Derzeit habe ich das entweder über div id oder div class gemacht. Dann mit dem css file formatiert.

Habe diesbezüglich nichts gescheites gefunden.
Oder vllt das falsche Suchwort?......


Würde mich über Anregungen freuen.
Danke.

[Wurzel]

das sticky hast du offenbar übersehen

[derHund]

Re: CSS Formatierung mit verschiedenen Browsern ?

Jetzt habe ich bemerkt das die Darstellung ie in Ordnung ist im Firefox jedoch total beschi***** aussieht.

als erstes muß dir eine wichtige sache klar werden: firefox stellt im allgemeinen so dar, wie die definition lautet. ie ist hier meist der, der eine extra-wursch will.

An was sollte man sich halten wenn man die Seite hinterher per css formatieren und die größt mögliche Kompatibilität zu andern Browsern haben möchte?

firefox/opera (die, die css beherrschen) verwenden, und anschließend für ie anpassen (was aber meist nicht nötig ist, wenn man von anfang an vernünftig vorgeht).

ansonsten gibt es nur eine wichtige sache, meiner meinung nach, die hauptsächlich für probleme verantwortlich ist. wenn dir die bewußt ist beim stylen, kann eigentlich nichts passieren: wenn du einen element eine breite (höhe) gibst, darfst du diesem element kein padding-left/right (top/bottom) geben, da der ie hier falsch rechnet. das wars schon.

ach nee, wichtig ist auch, am anfang des css bestimmte voraussetzungen zu schaffen:

* {
  margin  : 0;
  padding : 0;
}

das schützt vor überaschungen ...

Derzeit habe ich das entweder über div id oder div class gemacht. Dann mit dem css file formatiert.

spielt ja so gesehen keinerlei rolle. solange du auch die von html vorgesehenen tags verwendest, und keine div-suppe generierst.

[Fubbel]

Hi erstmal danke für die Antworten.

Hat einiges geholfen.

Hab jetzt aber nochmal ne Frage.

Hab z.B. eine News Seite.
Diese hat eine Überschrift. Nicht im Div eingebunden.
Dann hab ich nen div, der folgendes enthält.
Titel, Datum, Newstext (Jedes davon ist nen einzelnes div, alle ein einem div enthalten.)

Mein Ziel ist es nun den Titel und das Datum in einer Linie zu haben am oberen Rand. Darunter den Newseintrag.

Sieht bei mir so aus.

#n_Datum {
    /*padding: 2px; */
    width: 40%;
    white-space: nowrap;
    /*padding-right: 0px; */
    float: right;
    height: 10px;
    background-color:green;
    text-align: right;
}
#n_Titel {
    /*padding: 2px;*/
    float: left;
    width: 45%;
    font-weight: bold;
    /*border-left: 1px solid darkgray;*/
    height: 10px;
    background-color:red;
}
#n_Inhalt {
    /*padding: 2px;*/
    /*clear: both; */
    border-top: 1px solid darkgray;
    text-align: left;
} 

Jetzt ist mein Problem das mit der Einstellung es im Firefox überlapt. Also das Datum und Titel.

Im IE hingegen ist in der Mitte von beiden eine Fläche frei. Dort fängt er bereits an den Newsinhalt rein zu schreiben.

Das Problem denke ich hieran ist das der Teil in der die gesamte News Seite steht im Firefox einfach kleiner ist. Die Newsseite wird über eine array über die inhalt.php geladen.

Hier mal das Layout der index. 3 Spalten Layout mit einer zusätzlichen Leiste am unteren Rand.

#banner {
    height: 80px;
    width: 100%;
    top: 0%;
    text-align: center;
    background-color: red;
}
#menu {
    width: 15%;
    line-height: 100%;
    height: 450px;
    float: left;
    background-color: white;
}
#inhalt {
    width: 69%;
    /*height: 100px;*/
    /*margin-left: 18px;*/
    background-color: #EEEEFF;
    text-align: center;
}
#bottom {
    height: 10px;
    width: 100%;
    bottom: 0px;
    background-color: green;
    font-size: 100%;
    text-align: center;
    font-weight: bold;
    position: fixed;
} 

Die Größe vom inhalt kann ich anpassen. Allerdings scheint es mir so als ob der IE und Firefox verschieden rechnen.
IE für die ganze Seite? Firefox vom div element ausgehend?

Wenn ich die Breite in px angebe könnte es eventuell klappen.
Ich denke dann hab ich aber das prob das bei verschiedenen Auflösungen die Anpassung auf dem Bildschirm nicht ganz passt?

Nochmals danke fürs lesen und eventuelle Tips.

gruss