nicht angemeldet
Problem Darstellung von Divs in IE6
Hallo,
habe hier eine Webseite mit 3-spalten Layout + Header, alles durch divs + faux-column Technik erstellt. Sieht normal in Mozilla aus, IE aber versetzt die einzelne divs nach unten... Die Divs Sidebar2 + Maincontent werden später durch PHP-script gefüllt (dynamisch erzeugt von XML über XSLT), aber das Problem mit der Darstellung ist noch hier am Anfang zu sehen.
Hätte jemand Idee wo genauer das Problem im CSS liegt?
Das Code habe ich auf meinem Webblog gerade gestellt:
http://sunflowerlike.wordpress.com/2008/07/13/problem-mit-der-darstellung-von-s-in-ie6/
-
Das Code habe ich auf meinem Webblog gerade gestellt:
http://sunflowerlike.wordpress.com/2008/07/13/problem-mit-der-darstellung-von-s-in-ie6/und du erwartest jetzt, dass sich irgendjemand die mühe macht, deinen wurstcode zu nehmen, die "verschönerten" anführungszeichen zu ersetzen um es in eine validierbare form zu bringen, das ganze in ein demo-umgebung zu packen und zu testen?
ich sags ganz ehrlich: ich hab keine lust dazu ;)
-
Nachdem suit sich so freundlich rückgemeldet hat, dass Wordpress die Einführungszeichen konvertiert, probiere ich doch lieber den wichtigen Teil des Codes hier reinzuklatschen:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="campe_ausschnitt.css"/></head>
<body id="body">
<div id="container">
<div id="header">
<h2>Wörterbuch zur Verdeutschung und Erklärung <br/>der unseren Sprache
aufgedrungenen fremden Ausdrücke </h2>
</div>
<div id="nav">
<div id="nav_main">
<ul>
<li>
<a href="main.php?page=vorwort1.html">Vorwort 1</a>
</li>
<li>
<a href="main.php?page=vorwort2.html">Vorwort 2</a>
</li>
<li>
<a href="main.php?page=regel.html">Preisschrift</a>
</li>
<li>
<a href="main.php?page=personenregister.html"
>Personenregister</a>
</li>
<li>
<a href="main.php?page=impressum.html">Impressum</a>
</li>
<li>
<a href="main.php?page=toc_vm_webserver.html">Zum
Faximile-Ansicht</a>
</li>
</ul>
</div>
</div>
<div id="main">
<div id="sidebars">
<div id="sidebar1">
<p>
<a href="main.php?xmlfile=a">
<span class="letters">A</span>
</a>
<br/>
<a href="lemmata.php?auswahl=x2" target="Lemmata">
<span class="letters">B</span>
</a>
<br/>
<a href="lemmata.php?auswahl=x2" target="Lemmata">
<span class="letters">C</span>
</a>
<br/>
<a href="lemmata.php?auswahl=x2" target="Lemmata">
<span class="letters">D</span>
</a>
<br/>
<a href="lemmata.php?auswahl=x2" target="Lemmata">
<span class="letters">E</span>
</a>
<br/>
<a href="lemmata.php?auswahl=x2" target="Lemmata">
<span class="letters">F</span>
</a>
<br/>
<a href="lemmata.php?auswahl=x2" target="Lemmata">
<span class="letters">G</span>
</a>
<br/>
<a href="lemmata.php?auswahl=x2" target="Lemmata">
<span class="letters">H</span>
</a>
<br/>
<a href="lemmata.php?auswahl=x2" target="Lemmata">
<span class="letters">I</span>
</a>
<br/><a href="lemmata.php?auswahl=x2" target="Lemmata">
<span class="letters">Z</span>
</a>
</p>
</div>
<div id="sidebar2">
<br/>
<form id="form" method="get" action="main.php">
<ul>
<li>
<input name="find" type="text" size="20"/>
</li>
<li>
<input name="goButton" type="submit"
value="Suche"/>
</li>
</ul>
</form>
<br/>
</div>
</div>
<div id="mainContent">
<h4> Wörterbuch zur Erklärung und Verdeutschung der
unserer Sprache aufgedrungenen fremden Ausdrücke [...]</h4></div>
</div>
</div>
</body>
</html>CSS:
#body {
background: #EEEEEE;
margin: 0px;
padding: 0px;
text-align: center;
color: #000000;
}#container {
width: 800px;
background-image: url("mainContent.gif");
background-repeat: repeat-y;
background-position: right;
margin: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
border-color: white;
border-style: groove;
height: 810px;
}#header {
width: auto;
margin-bottom: 0px;
background: #CCCCCC;
border-bottom: 1px black solid;
padding: 0px 10px;
}
#header h2 {
text-align: center;
margin: auto;
padding: 10px 0;
}#main {
position: relative;
width: auto;
left: 0px;
top: 3px;
margin-top: 0px;
padding: 0px;
background-image: url("main_content2.gif");
background-repeat: repeat-y;
background-position: right;
}#sidebars {
position: absolute;
width: auto;
left: 0px;
top: 30px;
margin-top: 0px;
padding: 0px;
background-image: url("sidebar2.2.gif");
background-repeat: repeat-y;
background-position: left;
}#sidebar1 {
position: absolute;
top: 0px;
height: 700px;
width: 30px;
border-right: solid white 1px;
border-bottom: solid white 1px;
background: #AAAAAA;
}#sidebar2 {
position: relative;
top: 0px;
left: 32px;
width: 220px;
height: 700px;
border-right: white solid 1px;}
#sidebar1 h3, #sidebar1 p, #sidebar2 p, #sidebar2 h3{
margin-left: 10px;
margin-right: 10px;
}#sidebar2 a {
text-decoration:none;
}#mainContent {
position: absolute;
top: 30px;
left: 233px;
border-right: white solid 1px;
width: 566px;
background-color: transparent;
background-image: url("mainContent.gif");
background-repeat: repeat-y;
background-position: right;
height: 700px;
overflow:scroll;
}-
Nachdem suit sich so freundlich rückgemeldet hat, dass Wordpress die Einführungszeichen konvertiert, probiere ich doch lieber den wichtigen Teil des Codes hier reinzuklatschen:
ggf befindet sich der internet explorer im quirksmode (dein head-element)
noch besser als eine kopiervorlage ist übrigens ein online-beispiel welches man direkt im browser ansehen kann
-
Ja, sicher ist ein online-Beispiel am besten, aber das Ganze kommt ja online leider erst wenn es fertig wird... Schaue mal, ob ich was darüber machen kann.
Wie kann ich feststellen, ob IE in quirckmodus ist?
Ich dachte, das Problem liegt an die genauere Pixel-Werte der Boxen oder an margins... Aber der Inhalt der einzelnen Spalten wird ganz unterschiedlich, manchmal sind in der dritten Spalte nur zwei Zeilen, manchmal 80 Seiten Text (Vorwort des Wörterbuchs). Musste das Ganze irgendiwe beschränken in der Höhe...
Danke für die Antwort!-
Hm, es scheint mit dem Doctype nicht zusammenzuhängen. Habe mehrere unterschiedliche "sichere" Versionen probiert, es bewegt sich leider nichts...
Auch nicht, wenn ich versuche auf die gleichzeitige Verwendung von width/height und border/padding zu verzichten, was an bestimmten Stellen nicht so ganz geht...-
Hm, es scheint mit dem Doctype nicht zusammenzuhängen. Habe mehrere unterschiedliche "sichere" Versionen probiert, es bewegt sich leider nichts...
Auch nicht, wenn ich versuche auf die gleichzeitige Verwendung von width/height und border/padding zu verzichten, was an bestimmten Stellen nicht so ganz geht...wie wäre es wenn du einfach irgendwo auf deinem webspace ein verzeichnis anlegst mit dem namen "test" - in dieses machst du ein file rein "index.html" in welches du deinen code hineinkopierst und das css verlinkst du auch entsprechend - das war mit "online-beispiel" gemeint
wie gesagt, ich bin ein sehr fauler mensch (und viele andere hier wahrscheinlich auch) und mache das ungern selbst, wenns nicht mein problem ist
den rendermodus des browsers holst du dir am besten per javascript mit alert(document.compatMode);
-
Dass jeder, mich inklusiv, zur Bequemlichkeit neigt ist ja klar:-)) Deshalb sind auch die Foren so beliebt:-)) Immerhin hast du dich gemeldet, ist also nicht so schlimm mit der Faulheit:-)
Also, getan. In meinem Blogg gibt es jetzt noch ein Verzeichnis TEST. Allerdings würde nichts bringen, weil mein Webspace ein dummer account in Wordpress ist und da habe ich Zugriff nur über ein Texteditor. Also- Text kopieren, rein platzieren, speichern, in Verzeichnis schieben. Das bedeutet- das Problem mit den konvertierten Anführungszeichen ist gleich wieder da, und alles wird im Browser als Text interpretiert, nicht als Code:-))Sorry, bin einfach Windoof-user...
Zugriff zum Uni-Server habe ich momentan nicht- der Projektinformatiker hat Feierabend... Morgen, oder Email-attachment?
Danke!-
Zugriff zum Uni-Server habe ich momentan nicht- der Projektinformatiker hat Feierabend... Morgen, oder Email-attachment?
email wird nix helfen, ich lese meine mails und antworte nur, wenns um geld geht, welches mir der staat/versicherung/krankenkassa usw abknöpfen will ;) der rest wird gekübelt
ausserdem lernt niemand sonst etwas
du kannst du aber zum testen irgendwo einen gratis webspace anschaffen, da schadet nie zum herumspielen - bplaced.net ist soweit ich weiss kostenlos
da tust du dir auch selbst leichter damit, da du eben unter echten bedingungen testen kannst oder eben bei problemen schnell mal irgendwem einen link geben kannst
-
Hallo wieder,
danke für den Tipp, war sehr behilflich.
Also, hier der Link:http://sunflowerlike.bplaced.net/test/main.html
-
Also, hier der Link:
http://sunflowerlike.bplaced.net/test/main.htmljetzt validiere das ganze mal und entferne nach möglichkeit diesen krempel - das könnte teile deiner ie-problematik erklären:
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#sidebar1, #sidebar2 { padding-top: 30px; }
#mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->btw: deine buchstabenliste auf der linken seite möchte eine liste sein
-
Wegen der gestrigen Testerei mit unterschiedlcihen Headers ist nicht mehr valide, stimmt.
Und für die Buchstaben in der ersten spalte als Liste hast du auch recht-
habe das jetzt hinzugefügt alles in <ul><li> und dazu im CSS folgendes probiert:#sidebar1 ul{
position: absolute;
width: 0.8em;
margin: 0; padding: 0.2em 0.2em 0.2em;
}#sidebar1 ul li{
width: 0.7em;
margin: 0; padding: 0.1em 0.1em 0.1em;
border: 1px solid black;
background-color: silver;
list-style-type:none;
}Abgesehen von der bisherigen Problemen, sieht die Buchstabenliste in IE jetzt etwas besser, dafür ist die Sache mit der Liste in Mozilla aber total trostlos:-))
Sonst- IE sieht weiter alle Divs nach unten versetzt...
-
-
-
-
-
-
-
-
-