nicht angemeldet
Valides CSS wird in Browsern verschieden dargestellt
Hallo,
ich hab gestern schonmal gepostet - dort wurden einige Möglichkeiten zur Problembeseitigung gepostet, die ich auch alle durchgeführt habe... aber leider ohne wirklichen Erfolg.
Mein Problem: Eine Seite, die ein simples Layout aus <DIV>-Elementen und CSS enthält, wird im IE korrekt angezeigt und in den anderen Browsern verschiebt sich alles. Wenn ich es nun auf die anderen Browser ausrichte, ist es im IE verschoben... dabei sind das eigentlich ganz simple Sachen... exakte Ausrichtung mehrer DIV-Elemente ... mehr nicht.
Und mal nebenbei erwähnt, ich bin genau nach dieser Anleitung vorgegangen:http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#position. Mehr als das, was hier beschrieben steht, kommt auf der Seite und im CSS auch nicht vor... nur ein paar andere Definitionen für h1, p, table, a, usw.
Wie bekomme ich das denn nun hin, dass alle gängigen Browser (IE, Netscape, Opera, Mozilla) das korrekt interpretieren?
Hier die Seite nochmal: http://www.jugendflirtchat.de/admin
Hier ein Auszug aus der design.css - meiner CSS-Datei. Es sind einmal der body und 3 div-elemente festgelegt. Diese DIV-Elemente dienen im Prinzip nur als farbliche Rechtecke in bestimmter Grösse.
Vielleicht kann mir ja einer weiterhelfen... erst wird man davon überzeugt, von alten Table-Layouts die Finger zu lassen und dann muss man feststellen, dass mit CSS nix klappt, wie es soll... *grummel* <= ironisch gemeint ;)
body {
background-color: #dcdcdc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #336699;
margin-top: 0;
margin-left: 0;
padding: 0;
}
#layout1 {
position: absolute;
top: 0px;
left: 0px;
width: 10px;
height: 100%;
z-index: 1;
background-color: #666666;
}
#layout2 {
position: absolute;
top: 0px;
left: 10px;
width: 100%;
height: 20px;
z-index: 2;
background-color: #666666;
}
#layout3 {
position: absolute;
top: 18px;
left: 10px;
width: 100%;
height: 60px;
z-index: 3;
background-color: #cccccc;
}
-
Hallo, Mike,
Mein Problem: Eine Seite, die ein simples Layout aus <DIV>-Elementen und CSS enthält, wird im IE korrekt angezeigt und in den anderen Browsern verschiebt sich alles. Wenn ich es nun auf die anderen Browser ausrichte, ist es im IE verschoben... dabei sind das eigentlich ganz simple Sachen... exakte Ausrichtung mehrer DIV-Elemente ... mehr nicht.
Nein, simpel ist das keinesfalls, du hast das Layout sehr kompliziert mit CSS nachgebaut, dabei ging es eigentlich viel einfacher. Dein vielen div-Bereiche brauchst du gar nicht, die Ränder kannst du mit margin, padding und Hintergrundfarben erreichen und das Übrige kannst du viel einfacher lösen.
Hier einmal eine abgespeckte Version:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<title>Jugendflirtchat Administration</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" title="Autorenstylesheet">
html {margin:0; padding:0 0 0 20px; color:#336699; background-color:#666666; height:100%}
body {margin:0; padding:0; height:100%; font-family:verdana,arial,helvetica,sans-serif; font-size:12px; color:#336699; background-color:#dcdcdc;}
#links {background-color:#cccccc; width:100%;}
#links th, #links td {width:33%; font-family:verdana,arial,helvetica,sans-serif; font-size:12px;text-align:center;}
#links th {padding:10px 0 5px 0;}
#links td {padding:0 0 10px 0;}
h1 {margin:0; padding:5px 0; font-size:16px; color:#cccccc; background-color:#666666; font-weight:bold;}
h2 {font-size:12px; font-weight:bold;}
#text {margin:0; padding:40px 0; color:inherit; background-color:#dcdcdc; text-align:center;}
a:link {font-weight:bold; color:#336699; background-color:transparent; text-decoration:none;}
a:visited {font-weight:bold; color:#336699; background-color:transparent; text-decoration:none;}
a:hover {font-weight:bold; color:#336699; background-color:transparent; text-decoration:underline overline;}
</style>
</head>
<body><h1>Jugendflirtchat Administration</h1>
<table border="0" cellspacing="0" cellpadding="0" id="links">
<tr>
<th><a href="asd">» Teammail «</a></th>
<th><a href="asd">» Hostdaten einsehen «</a></th>
<th><a href="asd">» Hostdaten administrieren «</a></th>
</tr>
<tr>
<td>Sendet eine E-Mail an alle Mitglieder<br>des Jugendflirtchat-Teams!</td>
<td>Erlaubt die vollstände Ansicht aller<br>Daten eines Team-Mitglieds!</td>
<td>Daten der Team-Mitglieder ändern,<br>aktualisieren oder löschen!</td>
</tr>
</table><div id="text">
<p><img src="http://www.jugendflirtchat.de/admin/adminlogo.jpg" width="287" height="249" alt="Logo mit drei Zahnrädern"></p>
<h2>Willkommen im Administrationsbereich von www.jugendflirtchat.de</h2>
</div></body>
</html>Diese Version dürfte dieselbe Funktionalität haben (Opera/IE 6/Mozilla), die Anzeigefeinheiten kannst du natürlich noch anpassen. Im Übrigen haben ich die <div align="center"> herausgeworfen und konsequent mit CSS gearbeitet, das Markup wurde geschmälert und alle "Effekte" über CSS realisiert (leere div-Container haben ja keine Semantik).
Wenn ich etwas erläutern soll, frage nur.
Grüße,
Mathias
(Mal wieder keine Hilfe zur Selbsthilfe, ich gelobe Besserung, naja, ich hoffe auf Imitationslernen.)-
Nein, simpel ist das keinesfalls, du hast das Layout sehr kompliziert mit CSS nachgebaut, dabei ging es eigentlich viel einfacher. Dein vielen div-Bereiche brauchst du gar nicht, die Ränder kannst du mit margin, padding und Hintergrundfarben erreichen und das Übrige kannst du viel einfacher lösen.
hm... CSS ist mir Allgemein recht neu und die Variante mit den DIVs war die einzige, die ich kannte *g* Ich hatte aber schon vermutet, dass es auch anders gehen muss.
(Mal wieder keine Hilfe zur Selbsthilfe, ich gelobe Besserung, naja, ich hoffe auf Imitationslernen.)
Das finde ich viel besser... dein Quelltext bringt mich weiter, als alles was ich bisher dazu gehört habe. So kann ich mir CSS direkt an meinem Layout ansehen und es in Zukunft so weiter anwenden.
Vielen Dank :-) Ich werd das jetzt erstmal ausführlich ausprobieren und rumtesten und sollte noch was unklar sein, meld ich mich ;-)
Grüsse
Mike -
hallo,
ersma: schönes CSS, sehr übersichtlich. und die kleine kante oben links, die im M$IE zu sehen war, is auch wech ;)
meine frage: ist es nicht relevant, wie (gROSS, kLein etc.) die schriftartennamen geschrieben sind?
noch ne kleine anmerkung: alle end-/ bei leeren tags (br, img) fehlen, außerdem head. (denke mal geschludert und normales html in nen xml-doctype kopiert.)
grüße!
willie.de *jemandderkeineahnunghat*-
Hallo, Willie,
meine frage: ist es nicht relevant, wie (gROSS, kLein etc.) die schriftartennamen geschrieben sind?
Ja, im Grunde genommen ist es unwichtig, aber da in XHTML alle CSS-Selektoren (bis auf IDs), -Eigenschaften und -Werte klein geschrieben werden müssen, vereinfache ich mir die Schreib- und Denkarbeit bei der Fehlersuche und mache alles innerhalb des style-Elements 'lowercase'. Es ist demnach nichts als eine Angewohnheit, genauso wie zwischen Eigenschaft und Wert und zwischen Deklarationen und Klammern keine Leerzeichen mache.
noch ne kleine anmerkung: alle end-/ bei leeren tags (br, img) fehlen, außerdem head. (denke mal geschludert und normales html in nen xml-doctype kopiert.)
Genau, ich hatte die Fehler einfach übersehen, da ich mich auf die Positionierung und den Kram konzentriert hatte. Es ging mir ja auch nicht darum, eine perfekte Bilderbuchversion zu erstellen, dadurch würde der Fragende (Mike) wenig lernen. (Oder besser: Die Fehler habe ich absichtlich eingebaut, damit der Fragende den Quellcode nicht unreflektiert übernimmt, sondern sich durchwühlt, um ihn zu verstehen. ;))
*jemandderkeineahnunghat*
Nicht untertreiben! :)
Grüße,
Mathias
-
-
-
Hallo
da ich wenig zeit habe nur ne kurze Antwort:
1. das problem ist mir bekannt ... du kannst probeir auf die browser rücksicht zu nehmen ... wenn du dazu jav(-script) / php oder so einsetzt, oder du versuchst das problem zu umgehen.
Ich weiß z.B. v.a. von Netspcape das dort einiges anders aussieht als im IE.
Und es gibt einige sachen die der NN an CSS garnicht kann.
http://www.w3schools.com/css/css_reference.asp
Auf der URL findet man dazu immer eine aktuelle Liste.
-
Hallo, Marxus,
- das problem ist mir bekannt ... du kannst probeir auf die browser rücksicht zu nehmen ... wenn du dazu jav(-script) / php oder so einsetzt, oder du versuchst das problem zu umgehen.
Äh... Wie meinen? Nun, egal, man sollte jedenfalls grundsätzlich auf alle Browser Rücksicht nehmen. Das ist sogar recht einfach, ganz ehrlich. Java, Javascript oder PHP (?) braucht es dafür auch nicht.
Ich weiß z.B. v.a. von Netspcape das dort einiges anders aussieht als im IE.
Ja. Nämlich i.d.R. so, wie es auch auszusehen *hat*. Oder, ach, Du meinst den NN4, dieses dunkle Gerücht längst vergessener Tage? Wenn Du den Navigator schon mit der Pest aus Redmond vergleichst, dann doch bitte die aktuelle Version, das ist nämlich mittlerweile die 7. Und wer die Nase im direkten Vergleich (wieder) vorn hat, dürfte klar werden, wenn man sich die jeweils aktuellen Versionen dieser beiden Browser einmal ansieht.
Und es gibt einige sachen die der NN an CSS garnicht kann.
Ein paar Sachen schon, sicher, aber da musst Du schon 'ne Weile suchen. Zähl mal auf, ich liefere Dir danach 'ne Liste, was der IE alles nicht kann. Was glaubst Du, wer von uns beiden mehr einzutippen hat, hm?
http://www.w3schools.com/css/css_reference.asp
Auf der URL findet man dazu immer eine aktuelle Liste.
Aktuell...? Naja, *hüstel*. Aber zugegeben, irgendwann war sie das bestimmt mal...
Grüße,
-
-
Hallo,
Mein Problem: Eine Seite, die ein simples Layout aus <DIV>-Elementen und CSS enthält, wird im IE korrekt angezeigt und in den anderen Browsern verschiebt sich alles.
Die Tatsache, daß es in IE so angezeigt wird, wie Du es gerne hättest, heißt noch lange nicht, daß es im IE korrekt angezeigt wird.
Das hört sich nämlich sehr nach dem Box-Bug des IE an.Andreas