PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : CSS: Browserunterschiede :(


R-Craven
08.06.2004, 16:27
Hier mal ein Beispielcode, der mein Problem verdeutlichen soll:


<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
* {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 0;
margin: 0;
}

#div1 {
width: 500px;
background: #888;
}

#div2 {
width: 200px;
float: left;
background: #eee;
}

#div3 {
width: 300px;
float: right;
background: #bbb;
}

p {
padding: 5px;
margin-bottom: 10px;
-->
</style>

</head>
<body>

<div id="div1">

<div id="div2">
<p>Navi</p>
</div>

<div id="div3">
<p>Inhalt</p>

<p>noch mehr Inhalt</p>
</div>

</div>

</body>
</html>

Jetzt zu meinem Problem: Der Internet Explorer zeigt diese Beispielseite ausnahmsweie mal so an, wie ich ich die haben will:

http://www.r-craven.de/forum/img/ie.gif

Die Gecko-Engine (Firefox) lässt sich dagegen wohl durch das "float: left" bzw. "float: right" verwirren (oder gehört das vielleicht sogar so?) und zieht das #div1 nicht über die ganze Höhe von #div3 ...

http://www.r-craven.de/forum/img/mz.gif
(der weiße Teil ist die Hintergrundfarbe)

Könnt ihr mir da vielleicht weiterhelfen, so dass die Seite auch im Firefox so angezeigt wird wie im IE (oh Gott ... hab ich das jetzt wirklich geschrieben?! ;))
Latency
08.06.2004, 18:22
Ich weiß nicht obs hilft, aber versuch mal die Farbangaben zu komplettieren, also #eeeee anstatt #eee

Ansonsten kannst du versuchen, deine "Pseudoformate" (nicht falsch verstehen, den Ausdruck hab ich aus SelfHTML) richtig zu formatieren, da du deine Div verschachtelt hast. Deswegen kann es sein, das Mozilla nach einem #div2 Objekt innerhalb eines #div1 Objekt im Code oben sucht, keinen Findet und deswegen den Code nicht formatiert.
R-Craven
08.06.2004, 19:43
Also an der Farbkomplettierung liegt es nicht, hab ich schon ausprobiert.

Die Verschachtelung kann ich auch nicht auflösen, weil mein Weblog so ähnlich aufgebaut ist wie das Beispiel oben. Ich wollte dafür eigentlich mehrere verschiedene CSS-Layouts zusammenbasteln, die der Besucher dann selbst durchwechseln kann.

Den letzten Teil deiner Antwort versteh ich nicht ganz, denn #div2 und #div3 sind ja tatsächlich im #div1 enthalten, so dass der Browser doch eigentlich #div1 über das komplette #div2 + #div3 erstrecken sollte, oder?

Und seit wann darf man divs nicht mehr verschachteln?
Latency
08.06.2004, 21:13
In der <body> Tag darfst du es sehrwohl verschachteln, aber du kannst es auch in der CSS verschachteln.
Da ich es nicht besser beschreiben kann, hab ich dir mal den SelfHTML Link (http://selfhtml.teamone.de/css/formate/zentrale.htm#verschachtelte_elemente) rausgesucht, der das beschreibt was ich meine :)

edit:
Ich war mal so frei und hab deine CSS etwas bearbeitet. Bitte versuchs mal damit, vielleicht klappts dann :)

#div1 #div2 {
width: 200px;
float: left;
background: #eeeeee;
}

#div1 #div3 {
width: 300px;
float: right;
background: #bbbbbb;
}
R-Craven
08.06.2004, 22:55
Also ich hab deinen Vorschlag jetzt bei dem simplen Beispiel nicht getestet, dafür aber bei meinem Weblog ... und da funktioniert dann gar nix mehr ;).

Ich hab eine Weblog-Seite mal extrahiert und als normale HTML-Seite hochgeladen (www.r-craven.de/... (http://www.r-craven.de/forum/preview.html)). Das Stylesheet findet man unter http://www.r-craven.de/forum/bluecenter.css

Wenn ich den Quellcode richtig lese, befindet sich darin ein übergreifendes div mit der ID #rap. In dieser ID sind divs mit den IDs #content und #menu enthalten.

Wenn ich nun den CSS-Definitionen der ID #content noch ein #rap voranstelle (also #rap #content { bla blubber }), ziehen die meisten Definitionen gar nicht mehr oder nicht mehr so, wie sie es sollten.

Hab ich (bzw. das Weblog-Tool) da einen Fehler in der div-Verschachtelung gemacht? Dürfte eigentlich nicht sein, weil der HTML-Validator keine solchen Fehler anzeigt ... (nur irgendwas, dass man p-Tags da und dort nicht benutzen darf, aber das ist mir vorerst noch egal *g*).
Latency
08.06.2004, 23:06
Hmpf... erhlich gesagt habe ich keine Ahnung, ich kenne die eigentheiten von Mozilla nicht besonders, denn mein Opera und IE zeigt deinen Original Code und den Code mit meinen veränderungen richtig an. Deswgen weiß ich nun auch nicht weiter, sry :/
R-Craven
11.06.2004, 05:57
Schade ... dann muß ich mir wohl was anderes ausdenken ... oder es einfach hinnehmen, dass die Menüleiste einfach endet, wenn der Content länger ist.