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 HTML code:
<!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“>J</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>K</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>L</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>M</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>N</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>O</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>P</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>Q</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>R</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>R</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>S</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>T</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>U</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>V</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>W</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>X</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>
<h5> Ein Ergänzungsband zu Adelung’s und Campe’s
Wörterbüchern </h5>
<br/>
<h5> Neue starkvermehrte und durchgängig verbesserte
Ausgabe<br/> von <span class=“name“> Joachim Heinrich
Campe</span>,<br/> Dokter der Gottesgelehrtheit. </h5>
<br/>
<p> Eines Volkes Ehre hängt größtentheils
an seiner Muttersprache. Diese ist der Laudesehre Fuhr=werk (
<span class=“roman“>Vehikel</span>). Ueber sie
muß man schärfer halten, über ihre
Reinigkeit muß man mehr eifern, als über der
zartesten Liebsten Ehre . <br/>
<span class=“bibl“>
<br/>Realis de Vienna. </span>
</p>
<h6> Braunschweig, 1813. In der Schulbuchhandlung. </h6>
</div>
</div>
</div>
</body>
</html>
Das CSS-code:
@charset „utf-8″;
/* CSS Document */
#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;
}
#nav_main {
width: 100%; /* Einfassen der Floats im IE */
float:left; /* Einfassen der Floats in allen anderen Browsern */
background: transparent url(„background.gif“) repeat-x center right;
margin-top: 1px;
margin-bottom: 5px;
border-bottom: 1px #333 solid;
line-height: 0px;
}
#nav_main ul {
float:left;
display:inline; /* Fix für IE Doubled Float Margin Bug */
margin:0; /* Standard-Listendefinition zurücksetzen */
padding: 0;
margin-left: 43px; /* Abstand des ersten Buttons vom linken Rand (-2 Pixel für 3D-Schatten) über basemod.css anpassen */
border-left: 1px #aaa solid;
border-right: 1px #fff solid;
}
#nav_main ul li {
float: left;
display:inline; /* Fix für IE Doubled Float Margin Bug */
margin: 0;
padding: 0;
font-size: 1.0em;
line-height: 1em;
list-style-type: none;
border-left: 1px #fff solid;
border-right: 1px #aaa solid;
}
#nav_main ul li a {
display:block;
width: auto;
font-size: 0.9em;
font-weight: bold;
background: transparent;
text-decoration: none;
color: #000;
margin: 0;
padding: 0.5em 0.8em 0.5em 0.8em;
}
#nav_main ul li a:hover {
background: #eee;
color: #333;
text-decoration: none;
}
#nav_main ul li#current {
border-left: 1px #444 solid;
border-right: 1px #888 solid;
background: transparent url(„background_active.gif“) repeat-x center right;
}
#nav_main ul li#current a,
#nav_main ul li#current a:hover {
color: #fff;
background: transparent;
text-decoration: none;
}
#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;
}
#form{
margin-left: 3px;
width: auto;
margin-top: 10px;
}
#form ul{
margin-left: 0px;
width: auto;
margin-top: 0px;
}
#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;
}
#mainContent p {
margin-left: 10px;
margin-right: 10px;
font: 1em „Times New Roman“, Arial, Helvetica, sans-serif;
}
.letters {
float: left;
margin-right: 8px;
font: 0.9em „Times New Roman“, Arial, Helvetica, sans-serif;
font-weight:bold;
text-decoration:none;
color:blue;
}
.a {
text-decoration:none;
}
.a:hover
{background-color: #dddddd
}
.roman {
font-family: monospace;
font-size: 1em;
text-align: left;
}
.bibl{
color:#0000cd;
}
.name{
font-variant:small-caps;
color:#0000cd;
}
h3 {
font-size: 1.6em;
font-weight: normal;
text-align: center;
}
h4 {
font-size: 1.4em;
font-weight: normal;
text-align: center;
}
h5 {
font-size: 1.2em;
font-weight: normal;
text-align: center;
}
h6 {
font-size: 1.1em;
font-weight: normal;
text-align: center;
}
Danke im Voraus!