nicht angemeldet
Layout mit CSS... wird nur im IE richtig angezeigt :(
Hi,
ich dachte bei CSS sind sich alle Browser zum Grossteil einig? Hab jetzt ein Layout zum Grossteil mit CSS gemacht und im IE siehts toll aus, aber Opera und Netscape verschieben manches ein paar Pixel zu weit nach oben. Würde ich es jetzt für die korrigieren, wärs wahrscheinlich im IE zu weit unten...
Es geht mir jetzt nicht darum, welcher Browser Schuld hat oder welcher besser ist... ich möchte einfach, dass es in ALLEN gängigen Browsern angezeigt wird (Netscape 4.x ist mir aufgrund der lausigen CSS-Unterstützung egal... irgendwo muss man einen Schlussstrich ziehen *g*)
Das hier ist die Seite: http://www.jugendflirtchat.de/admin Wie gesagt, es geht nur um das Layout und CSS... Links funzen noch nicht.
Und hier ist mal meine CSS-Datei... vielleicht fällt ja jemandem auf Anhieb etwas auf?
body {
background-color: #DCDCDC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #336699;
margin-top: 0px;
margin-left: 0px;
padding: 0px;
}
#layout1 {
position: absolute;
width: 10px;
height: 100%;
border: solid 0px black;
background-color: #666666;
margin: 0px 0px 0px 0px;
}
#layout2 {
position: absolute;
width: 100%;
height: 10px;
border: solid 0px black;
background-color: #666666;
padding: 0px;
margin: 0px 0px 0px 10px;
}
#layout3 {
position: absolute;
width: 100%;
height: 60px;
border: solid 0px black;
background-color: #cccccc;
margin: 20px 0px 0px 10px;
}
#links1 {
position: absolute;
margin: 25px 0px 0px 10px;
width: 100%;
height: 10;
}
#text1 {
position: absolute;
margin: 45px 0px 0px 10px;
width: 100%;
height: 10;
}
#text2 {
position: absolute;
margin: 80px 0px 0px 12px;
padding: 2px 2px 2px 2px;
align: center;
width: 100%;
}
table {
font-size: 12px;
}
h1 {
font-size: 16px;
font-weight: bold;
color: #CCCCCC;
}
h2 {
font-weight: bold;
}
a {
font-weight: bold;
color: #336699;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: overline underline;
}
-
Hab die html-Datei und das Stylesheet jetzt mal vom Validator checken lassen... waren Fehler drin, aber jetzt sind beide valide! Problem bleibt leider trotzdem noch.
-
Hi,
Zuerst habe ich vermutet, daß es am Boxmodel-Problem des IE liegt, bis ich die Seite dann auch mal durch den Validator gejagt habe. Ähem.
Also habe ich mir nochmal Deinen CSS-Code angeschaut. Und mir ist aufgefallen, daß Du zwar all Deine divs zum Positionieren (Wozu sind #layout1 und layout3 gut?) absolut anordnest, aaaber keine Positionsabgaben im Sinne von top oder left angibst.
Wie es schon in Selfhtml so schön steht:
"Die Angabe position: legt noch nicht fest, wo genau ein Element beginnen soll. Die Angabe macht nur Sinn, wenn Sie zugleich die gewünschte Startposition angeben."
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#positionIch vermute der Internet Explorer ist mal wieder zu eifrig am interpretieren.
Grüße, Tim
-
-
Hi,
ich dachte bei CSS sind sich alle Browser zum Grossteil einig?
Netscape 4 ist tot und der M$IE liegt diesbezüglich seit langem im Sterben. Mozilla (generell alle Geckos) und Opera können CSS größtenteils. Jedenfalls muss man schon sehr wühlen, um an die Grenzen zu gelangen ;)
Hab jetzt ein Layout zum Grossteil mit CSS gemacht und im IE siehts toll aus, aber Opera und Netscape verschieben manches ein paar Pixel zu weit nach oben. Würde ich es jetzt für die korrigieren, wärs wahrscheinlich im IE zu weit unten...
Ich ahne es bereits...
Es geht mir jetzt nicht darum, welcher Browser Schuld hat oder welcher besser ist...
...gut, der Betriebssystembestandteil, der sich Browser schimpft ist schuld.
#layout3 {
width: 100%;
margin: 20px 0px 0px 10px;
}Der M$IE rechnet hier ohne den passenden Doctype den Außenabstand nicht dazu, wie es sich eigentlich gehört.
#links1 {
margin: 25px 0px 0px 10px;
width: 100%;
}Hier ebenfalls.
#text1 {
margin: 45px 0px 0px 10px;
width: 100%;
}Hier auch.
#text2 {
margin: 80px 0px 0px 12px;
padding: 2px 2px 2px 2px;
width: 100%;
}Das betrifft übrigens auch den Innenabstand und Ränder ;)
Mit dem passenden Doctype rechnet der M$IE korrekt, dann *sollten* die Probleme verschwinden. Du verwendest
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Mit
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
rendert er dagegen im sog. standards compliant mode.
http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp#cssenhancements_topic2
http://gutfeldt.ch/matthias/articles/doctypeswitch.htmlHilft das immer noch nicht, sieh dir mal
http://aktuell.de.selfhtml.org/tippstricks/css/browserweiche/
an. Außerdem könntest du alle Abstandsangeben entfernen, die ohnehin nur Nullwerte enthalten. Man kann nie wissen, was sich der M$IE denkt. Wenn er es denn tut. Der Trottel (was hab' ich mich auch heute wieder mit ihm geärgert...).
LG Orlando
-
Hi,
Mit dem passenden Doctype rechnet der M$IE korrekt, dann *sollten* die Probleme verschwinden. Du verwendest
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Mit
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
rendert er dagegen im sog. standards compliant mode.Das heißt, beim IE muß man nicht nur darauf achten, überhaupt eine Doctype anzugeben, sondern auch noch was für eine. Hmpf.
Also dürfte es sich hier um eine Kombination aus beiden Problemen handeln:
- Box-Model beim IE
- Fehlende Startpositionen bei absoluter Positionierung.
Besonders bei letzterem würde ich, wäre ich ein Browser, auch ins Schwitzen kommen. ;-)
Tim
-