Aufklappmenü schiebt sich unter Schrift/Bild

Beagel · 13 Januar 2010

Hallo zusammen,
bin neu hier und in sachen Hompage erstellen Anfänger,
mein Problem ist nach dem ich die CSS verändert habe, so das alle Spalten immer gleich groß sind,wird mein Menü beim Aufklappen im IE <8 unter die Schrift oder Bilder geschoben wird.
siehe www.dietersreisen.de/in.html
die CSS

Code:

body {
  border-color: #009900;
  border-width: 10px;
  margin: 0px auto;
  font-family: Verdana;
  font-size: 12px;
  text-align: left;
  width: 995px;
  background-color: #cccccc;
}
#title {
  border-color: #003300;
  padding: 5px;
  height: 44px;
  background-color: #7b7d8e;
  font-family: Times New Roman,Times,serif;
  font-style: italic;
  text-align: center;
  font-size: 19px;
  color: #ffffff;
  line-height: 227%;
}
* {
  margin: 0;
  padding: 0;
}
#mainBox
{
position: relative;
display: block;
background: #dfdfdf;
border-left: 170px solid #607b9e;
border-right: 170px solid #90abce;
}

#innerBox
{
display: block;
margin-left: -170px;
margin-right: -170px;
padding: 5px;
}

#leftBox
{
float: left;
position: relative;
width: 170px;
left: 0px;
}

#rightBox
{
float: right;
position: relative;
width: 160px;
right: 0px;
}

#centerBox
{
margin-left: 170px;
margin-right: 170px;
position: relative;
display: block;
height: 1%;
}

.clear
{
clear:both;
}


#menu {
  padding: 0 0px;
  width: 100%;
  font-family: Verdana;
  font-size: 1em;
  line-height: 1.5;
  margin-top: 15px;
}
#menu ul {
  list-style-type: none;
  width: 12em;
  padding-left: 10px;
}
#menu h3 {
  border: 1px solid #66ff99;
  background: blue none repeat scroll 0% 50%;
  font-size: 1em;
  text-align: center;
  color: #000000;
}
#menu a {
  border-style: solid;
  border-color: white black black white;
  border-width: 7px;
  background: silver none repeat scroll 0% 50%;
  text-decoration: none;
  display: block;
  text-align: center;
  color: black;
  font-weight: bold;
}
#menu a:hover {
  background: #003366 none repeat scroll 0% 50%;
  color: #ff9224;
}
#menu li {
  position: relative;
}
#menu ul ul {
  top: 0px;
  z-index: 2;
  display: none;
  position: absolute;
  left: 11em;
}
#menu ul li:hover ul {
  display: block;
}
* html #menu ul li {
  float: left;
  width: 100%;
}
* + html #menu ul li {
  float: left;
  width: 100%;
}
#menu a.direkt:link {
  border: 1px solid #66ff99;
  background: #ff8000 none repeat scroll 0% 50%;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  color: #000000;
}
#menu a.direkt:hover {
  border: 1px solid #cccccc;
  background: #003366 none repeat scroll 0% 50%;
  color: #ff9224;
}
#menu ul *:hover ul, #menu ul *:hover ul *:hover ul, #menu ul *:hover ul *:hover ul *:hover ul, #menu ul *:hover ul *:hover ul *:hover ul *:hover ul {
  left: 11em;
  top: -1px;
}
#menu ul *:hover ul ul, #menu ul *:hover ul *:hover ul ul, #menu ul *:hover ul *:hover ul *:hover ul ul {
  left: -9999px;
}

div#Rahmen {
  border-width: 10px;
  padding: 0.8em;
  background-color: #ffcc00;
  float: left;
  width: 658px;
}
* html div#Rahmen {
  border-color: #33ff33;
  border-width: 15px;
  float: left;
  width: 658px;
}
div#Rahmen div {
  float: left;
  width: 658px;
}
ul#Navi {
  margin: 0;
  padding: 0;
  text-align: center;
}
ul#Navi li {
  margin: 0.4em 0.1em;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
  float: left;
  width: 9.6em;
  text-align: left;
}
#Rahmen {
  border-color: #66ffff;
  border-width: 0px;
  padding: 0.8em;
  background-color: #ffcc00;
  width: 658px;
}
ul#Navi li ul li {
  float: none;
  display: block;
  margin-bottom: 0.2em;
}
ul#Navi a, ul#Navi span {
  border-style: solid;
  border-color: white black black white;
  border-width: 7px;
  padding: 0.2em 1em;
  text-decoration: none;
  font-weight: bold;
  color: black;
  background-color: #cccccc;
  display: block;
}
* html ul#Navigation a, * html ul#Navigation span {
  width: 6.4em;
}
ul#Navi a:hover, ul#Navi span, li a#aktuell {
  border-color: black white white black;
  color: white;
  background-color: gray;
}
li a#aktuell {
  color: maroon;
  background-color: #dcdcdc;
}
ul#Navi li ul span {
  border-color: blue;
}

p#Fusszeile {
  border-top: 1px solid silver;
  margin: 0;
  padding: 0.1em;
  clear: both;
  font-size: 0.83em;
  text-align: center;
  background-color: #ffeedd;
  width: 995px;
}

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html
 lang="de-at"><head><title>Dietersreisen</title>

<meta name="language" content="deutsch">
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="Easy Metaman Pro 1.0"> <link
 rel="stylesheet" type="text/css" href="aktuell-grau.css"><link
 rel="stylesheet"type="text/javascript"><link rel="shortcut icon" href="favicon.ico" ></head>
<body>
 <div id="body">
 <img src="Banner2.jpg" style="width: 995px; height: 139px;">
 <div id="title"><h1>Gitta`s und Dieter`s Reisen</h1>
</div>
<div id="mainBox">
<div id="innerBox">
       <div id="leftBox"><div id="menu">
<ul>
  <li><a id="aktuell" href="index.html">Home</a></li>
  <li><a href="nl.html">Niederlande</a><ul>
        <li><a href="#">Flügeverfolgen</a></li></ul></li>
  <li><a href="paris.html">Frankreich</a></li>
  <li><a href="dublin.html">Irland</a></li>
  <li><a href="ca.html">Kanada</a></li>
  <li><a href="es.html">Spanien</a></li>
  <li><a href="usa.html">USA</a></li>
  <li><a href="#">Links</a>
    <ul>
      <li><a href="http://meine.flugstatistik.de/Beagel" target="_blank">Flugstatistik</a></li>
          <li><a href="links.html">Verschiedenes</a></li>
      <li><a href="#">Rund ums Fliegen</a><ul>
        <li><a href="#">Flügeverfolgen</a></li></ul></li>
      </ul>
  </li>
  <li><a href="impressum.html">Impressum</a>
  </li>
</ul>
</div>
<a id="klickmonster-586850" href="http://www.klickmonster.de/">Counter</a><br>
<script type="text/javascript" language="JavaScript"
 src="http://www.klickmonster.de/show_free_counter.js.php?id=586850&amp;style=53"></script></div>
 <div id="rightBox">&nbsp;<!-- 120x160 Beginn Kalenderuhr www.neuste-info.de -->
<center><SCRIPT LANGUAGE="Javascript"><!--
document.write(unescape("<iframe name%3D%22I1%22%20src%3D%22http%3A%2F%2Fwww%2Eneuste%2Dinfo%2Ede%2FAward%2Faward%2Dkalenderuhr%2Dneutral%2Fneutral008%5Findex%2Ehtml%22%20width%3D%22120%22%20height%3D%22160%22%20marginwidth%3D%220%22%20marginheight%3D%220%22%20scrolling%3D%22no%22%20border%3D%220%22%20frameborder%3D%220%22%3E%3C%2Fiframe%3E%0D%0A"));//  End --></SCRIPT><NOSCRIPT><a href="http://www.neuste-info.de/">Wissen ist immer die neusten Informationen</a>
</NOSCRIPT></center>
<!-- 120x160 Ende Kalenderuhr www.neuste-info.de --></div>
 <div id="centerBox"><p><br><br><br><a
 href="http://www.flaggen-server.de/europa1/brd01.php" target="_blank"><img
 style="border: 0px solid ; width: 56px; height: 44px;" alt="flag1"
 src="dlandanim04.gif"> </a><br><br><br><big><big><big><span
 style="font-style:italic; font-weight: bold;">
Eine Webseite,mit kurzen
Reiseberichten, Info&acute;s
und <br>vielen Bildern.<small>(in Webalben, einfach
auf Bilder,Flaggen, Datum klicken.)</small><br>Einige
Bilder
sind geogetaggt und man kann direkt aus
dem Webalbum
auf die Karten kommen.</span><br><br></big></big></big><br></p><a href="http://www.wunderground.com/global/stations/10518.html?bannertypeclick=bigwx"target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/bigwx_metric_cond/language/www/global/stations/10518.gif" alt="" border="0" height="60" width="628" ></a>
</div><div class="clear"></div></div></div><p id="Fusszeile">letzte &Auml;nderung 06.01.2010</p></body></html>

Gruß Beagel

threadi · 13 Januar 2010

Gib #rightBox mal noch den z-index von 1. Und achte darauf, dass Du für den IE bei Elementen auf der selben Ebene auch entsprechende z-indizes setzt.

Beagel · 14 Januar 2010

Hallo
danke für die schnelle Antwort, hab in der rigthbox z auf 1 gesetzt auch verschieden Elemente aber leider keinen Erfolg, welche Element sollten im speziellen Fall z 1 gesetzt werden.
Oder hat jemand noch einen anderen Vorschlag wie man die Seiten hinbekommt so wie sie im FF/ Opera/ Chromo / IE8 funktioniren.

Gruß Beagel

neuroleptika · 14 Januar 2010

Entferne das position: relative; aus #centerBox.

edit:
IE Hacks wie height:1%; dürfen nur die betroffenen IE-Versionen sehen.

Aufklappmenü schiebt sich unter Schrift/Bild

Beagel

Neues Mitglied

threadi

Moderator

Beagel

Neues Mitglied

neuroleptika

Aktives Mitglied

Neueste Beiträge