Layout wird im IE komplett unrichtig dargestellt
0 
Gunnar Bittersmann
1 
molily
0 0 Gunnar Bittersmann
0 1 molily
0 0 0 0 molily
Layout wird im IE komplett unrichtig dargestellt
Hallo,
Mein Problem war es ursprünglich, ein Seitenlayout zu bekommen, in der man die Navigation wie auch den Inhalt unabhängig von einander scrollen können sollte. Das Problem habe ich mittlerweile noch nicht gelöst, habe aber eine potenzielle Lösung, die im Firefox funktioniert.
Meine Frage (jetzt unabhängig vom vorhergegangenen Problem) ist jetzt, warum der Internet-Explorer so einen Mist damit macht???
<html><head><title>Hauptseite</title></head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<body>
<table style="width:100%;height:100%;">
<tbody style="height:100%;margin:0;">
<tr>
<td style="min-width:200px;overflow-y:scroll;padding:0;">Bla</td>
<td style="height:100%;padding:0;"><div style="overflow:scroll;max-height:100%;"><img src="logo.png"></div></td>
</tr></tbody>
</table>
</body></html>
body{
background-color:#343434;
color:orange;
margin:0;
padding:0;
border:0;
overflow:hidden;
}
Also, wieso geht das im IE (und im Opera übrigens auch) nicht nach meinen Vorstellungen, im Firefox aber schon?
Ich hoffe sehr auf Hilfe, denn bei sowas bin ich immer beim Verzweifeln...
Danke, Typhox
-
@@Typhox:
Meine Frage (jetzt unabhängig vom vorhergegangenen Problem) ist jetzt, warum der Internet-Explorer so einen Mist damit macht???
Weil du ihn in den http://de.selfhtml.org/css/formate/box_modell.htm#doctype_switch@title=Mist-Modus schickst.
Und weil er mit {min|max}-{width|height} nichts anfangen kann.Aber warum machst du so einen Mist und schreibst unleserlichen Code mit Inline-Style-Angaben, anstatt Markup und Stylesheet sauber voneinander zu trennen?
BTW, 'overflow-y' gibt es nicht in CSS 2.1; erst in CSS 3.
Live long and prosper,
Gunnar--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort. -
Also, wieso geht das im IE (und im Opera übrigens auch) nicht nach meinen Vorstellungen, im Firefox aber schon?
Wenn ich mir deinen Code ansehe, wird es wahrscheinlich länger dauern, diese komplexe Konstruktion zu untersuchen und zu verbessern, als sie von Grund auf neu zu machen. Auf Tabellenlayout kannst und solltest du verzichten. Die zwei Bereiche kannst du absolut positionieren, ihnen eine Höhe von 100% geben und overflow:auto. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>Hauptseite</title></head> <style type="text/css"> [code lang=css]html, body { margin:0; padding:0; border:0; height:100%; color:orange; background-color:#343434; overflow:hidden; } #navi, #content { position:absolute; top:0; height:100%; overflow:auto; } #navi { left:0; width:20%; } #content { left:20%; width:80%; }</style>
<body><div id="navi">
<p>bla</p><p>bla</p>...
</div><div id="content">
<p>bla</p><p>bla</p>...
</div></body></html>[/code]
Das scheint auf Anhieb schon im IE, Opera und Firefox zu funktionieren.
Möglicherweise sind noch Anpassungen nötig, die aber einfacher sein sollten.Mathias
-
Das scheint auf Anhieb schon im IE, Opera und Firefox zu funktionieren.
Möglicherweise sind noch Anpassungen nötig, die aber einfacher sein sollten.Hab' erstmal vielen, vielen Dank dafür! Das ist die Lösung, die bisher am nächstliegenden ist.
Trotzdem gibt es noch immer ein Problem: Da Navi- und Content-Breite relative Angaben sind, ich aber eine Navigation mit fester Breite benutzen möchte, habe ich mal versucht, das auf absolute Angaben um zu konvertieren. Leider stößt man dabei zwangsweise auf das Problem, dass es keinen Wert für die Breite des Contents gibt, weil man dafür soetwas wie width:* verwenden können müsste.
Mit anderen Worten, ich bekomm's nicht hin, dass die Navigation eine feste Breite hat, während der Content den Rest des Fensters einnimmt.
Hat noch jemand 'ne Idee?Vielen Dank,
Typhox-
@@Typhox:
Mit anderen Worten, ich bekomm's nicht hin, dass die Navigation eine feste Breite hat, während der Content den Rest des Fensters einnimmt.
Hat noch jemand 'ne Idee?<http://de.selfhtml.org/css/layouts/mehrspaltige.htm#zweispaltig@title=SELFHTML lesen.>
Live long and prosper,
Gunnar--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.-
<http://de.selfhtml.org/css/layouts/mehrspaltige.htm#zweispaltig@title=SELFHTML lesen.>
Danke dafür, dass du mir helfen willst, aber die Seite bringt mir überhaupt nichts. Wie man ein zweispaltiges Layout hinbekommt, weiß ich längst, das Problem ist ja, dass man nicht das Menü unabhängig vom Content (also mit eigenem Scrollbalken) scrollen kann. Und so, wie es aussieht scheint es dafür keine CSS-Seitige Lösung zu geben (Ich kenne nur Lösungen mittels Frames und welche mit Javascript, das will ich aber beides vermeiden).
Also wie?
Der Link bringt mich nicht weiter.-
@@Typhox:
dass man nicht das Menü unabhängig vom Content (also mit eigenem Scrollbalken) scrollen kann. Und so, wie es aussieht scheint es dafür keine CSS-Seitige Lösung zu geben
Der Schein trügt: <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=fixe Positionierung>, eine Höhenangabe und http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow@title='overflow'-Eigenschaft
Aber warum sollte man das wollen??
Live long and prosper,
Gunnar--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.
-
-
-
hi,
Mit anderen Worten, ich bekomm's nicht hin, dass die Navigation eine feste Breite hat, während der Content den Rest des Fensters einnimmt.
Hat noch jemand 'ne Idee?Wenn ich dich richtig verstehe suchst du ein Zweispaltiges Layout (Bsp. 2)?
holla holla
-
Wenn du mit CSS-Layout noch nicht vertraut bist - was ich mal annehme, weil du mit Tabellenlayout ankamst -, solltest du dich in die verlinkten Quellen einarbeiten. Das Arbeiten mit floats ist nichts anderes als deine Fragestellung, sondern die nötige Grundlage. Du kannst dir auch Grundlagen für Spaltenlayout mit CSS ansehen.
Wenn du mit float statt position arbeitest, brauchst du keine festen Breiten vorgeben, sondern kannst (bei der besagten Dokumentreihenfolge) die Navigation links floaten lassen. Der Content fließt dann automatisch rechts dran vorbei und füllt den restlichen Platz aus. Ein margin-left ist in diesem Fall nicht nötig, da der Float overflow:auto besitzt. Dadurch wird ein Block Formatting Context erzeugt wird, der dafür sorgt, dass der #navi-Float nicht #content überlappt und nur seinen Inhalt verschiebt.
Die Änderungen am CSS sind z.B.:
#navi, #content {
/* position fällt raus, Rest bleibt */
height:100%;
overflow:auto;
}
#navi {
float:left;
width:200px;
}
#content {
/* leer */
}Bitte probiere mal selbstständig in diese Richtung weiter und beschäftige dich mit den Quellen.
Mathias
-
-
Gut, dank molily habe ich's jetzt geschafft.
Die Lösung war einfach, zusätzlich zu left:200px; auch noch ein right:0; einzufügen. Ich weiß zwar nicht, in welchen Browsern das alles funktioniert, aber es geht in allen, die ich bis jetzt getestet habe (also 3 :P).
Also, vielen herzlichen Dank dir, ohne dich würde ich vermutlich noch Tage daran arbeiten (oder es als unmöglich erklären und darauf verzichten).
Nun kann ich endlich schlafen gehen :-)Danke,
Typhox-
Die Lösung war einfach, zusätzlich zu left:200px; auch noch ein right:0; einzufügen. Ich weiß zwar nicht, in welchen Browsern das alles funktioniert, aber es geht in allen, die ich bis jetzt getestet habe (also 3 :P).
dann solltest du mal den internet exploder 6 und 7 testen
mehr infos dazu findest du auf ala, da werden auch einige workarounds beschrieben
-
Die Lösung war einfach, zusätzlich zu left:200px; auch noch ein right:0; einzufügen. Ich weiß zwar nicht, in welchen Browsern das alles funktioniert, aber es geht in allen, die ich bis jetzt getestet habe (also 3 :P).
dann solltest du mal den internet exploder 6 und 7 testenDanke für den Link, Ich hab's mit dem IE7 getestet, und es ging. Mit dem IE6 hatte ich bisher noch keine Möglichkeit das zu testen, aber den kann ich eh nicht leiden, weil der nichtmal meine PNG-Grafiken richtig darstellt und die Überreste aus dem Browser-Krieg leider wirklich überhaupt garnicht standardkonform sind. Sprich: Ich müsste viel extra für den IE6 einbauen, und das mache ich doch erst, wenn es im IE7, Opera und Firefox richtig funktioniert und soweit fertig ist.
Danke, Typhox
-
mehr infos dazu findest du auf ala, da werden auch einige workarounds beschrieben
Womit wir dann wieder bei JavaScript in Form von CSS-Expressions wären, deshalb würde ich doch mal in die float-Richtung weiterforschen...
Mathias
-
-
-