Hallo, ich bin mal wieder auf ein Problem gestoßen.
Meine Webseite nährt sich dem Ende und ich wollte auf der linken Seite eine Grafik unter meiner fixierten Menüleiste positionieren. Dafür habe ich jeweils ein paar Div's angelegt. Leider stellt der IE6 es völlig anders, als der Firefox dar. Beim Firefox befindet sich das Bild an der gleichen Stelle wie das Menü. Beim IE6 genau darunter, wie ich es eigentlich auch wollte.
Stelle ich nun in der CSS die Position für die Grafik "inhaltbwilogo" ein, befindet sich das Bild im Firefox an der richtigen Stelle, nur der IE6 schiebt es ganz weit nach unten, weil sich das margin-top ja an der Unterkante des Menüs ausrichtet.
Für Antworten wäre ich wie immer sehr dankbar.
http://img818.imageshack.us/img818/1945/oberflaeche.jpg
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<title>Mal sehen</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="Lee Roe" content="Adobe GoLive" />
<meta name="keywords" content="Da weiß ich noch nicht"/>
<link rel="stylesheet" type="text/css" media="screen" href="screen.css"/>
</head>
<body>
<div id="main-container">
<div id="top_section">
<img src="images/kopf.png" alt="Auch noch nichts" />
</div>
<div id="inhalt">
<div id="inhalt-haupt">
<div id="inhaltglossy">
<ul class="glossymenu">
<li><a href="index.php">Das Programm</a></li>
<li><a class="navi_self navi_first" href="oberflaechen.php">Die Oberfläche</a></li>
<li><a href="mailer.php">Die E-Mailfunktion</a></li>
<li><a href="technisches.php">Technisches</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
</ul>
</div>
<div id="inhaltbwilogo">
<img src="images/bwi.gif" alt="Gähnende Leere" />
</div>
</div>
<div id="inhalt-sub">
<div id="fusszeile">
<p class="bottom-right"><a href="impressum.php">Impressum</a></p>
<p class="fusszeile">Webdesign by </p>
</div>
</div>
</div>
<div id="fuss">
</div>
</div>
</body>
</html>* {
margin: 0px;
padding: 0px;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
background: #cccccc;
}
#main-container {
width: 880px;
height:auto;
margin: 10px 0px 10px 120px;
background: url("images/hintergrund.png") 0px 0px repeat-y;
}
#top_section {
height:172px;
margin:0px;
padding:0px;
}
#inhalt {
margin-top: 0px;
}
#inhalt-haupt {
float:left;
width: 219px;
height:350px;
padding-right: 1px;
}
#inhaltglossy {
float:left;
width: 219px;
padding-right: 1px;
}
#inhaltbwilogo{
float:left;
width: 167px;
height:90px;
margin:0px 0px 0px 40px;
}
#inhalt-sub {
float: right;
border-left: 1px dotted #999999;
width: 650px;
}
.glossymenu{
position:fixed;
list-style-type: none;
margin: 5px 0;
padding: 0px 0px 0px 40px;
width: 170px;
}
.glossymenu li a{
background: white url(images/menübutton.bmp) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
margin-bottom: 2px;
width: auto;
padding: 9px 0;
padding-left: 10px;
text-decoration: none;
}
#fusszeile {
clear: both;
margin-top:2em;
padding:0px;
}
#fusszeile .bottom-right {
text-decoration: underline;
text-align:justify;
font-weight:normal;
font-style:normal;
font-size:80%;
line-height:1em;
color:black;
padding-top:5px;
padding-right:3px;
float: right;
}
#fuss{
clear:both;
width: 880px;
height:53px;
margin:0px;
padding:0px;
background: url("images/fuss.png");
}