mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 26.04.2024 03:23 Benutzername: Passwort: Auto-Login

Thema: DropDown-Menü funktioniert im FF, aber nicht im IE vom 01.03.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> DropDown-Menü funktioniert im FF, aber nicht im IE
Seite: 1, 2  Weiter
Autor Nachricht
Nimroy
Community Manager
Threadersteller

Dabei seit: 26.05.2004
Ort: zwischen Köln und D'dorf
Alter: 46
Geschlecht: Männlich
Verfasst Do 01.03.2007 20:23
Titel

DropDown-Menü funktioniert im FF, aber nicht im IE

Antworten mit Zitat Zum Seitenanfang

Und ich hab keine Ahnung wieso. Zu sehen hier: http://autohaus.jungundmittellos.de

Und wenn mir dann noch jemand verrät, warum das Content-Bild bei ie nach oben rutscht...

MErci!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
rob

Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht: Männlich
Verfasst Do 01.03.2007 20:44
Titel

Antworten mit Zitat Zum Seitenanfang

ich hab jetzt leider keinen IE hier um mir das problem anzuschauen.
mit fällt aber direkt mal auf, daß die dtd-angabe fehlerhaft ist.

so sieht sie aus:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd" >

und so sollte sie aussehen:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

bei der fehlerhaften angabe schaltet der IE sicherlich in den quirks-mode.
weiß nicht, ob es vielleicht daran liegen könnte...

werde mir das heute später mal im IE anschauen.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Nimroy
Community Manager
Threadersteller

Dabei seit: 26.05.2004
Ort: zwischen Köln und D'dorf
Alter: 46
Geschlecht: Männlich
Verfasst Do 01.03.2007 20:53
Titel

Antworten mit Zitat Zum Seitenanfang

Habs korrigiert und hochgeladen. Sieht unverändert aus.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 01.03.2007 20:55
Titel

Antworten mit Zitat Zum Seitenanfang

IE6? Unterstützt :hover nur für Hyperlink Elemente und nicht wie
bei dir notwendig für Listen Punkte. Um das zum laufen zu bringen musst
du auf eine kleines JavaScript zurückgreifen. Google: Suckerfish Dropdown


Zuletzt bearbeitet von m am Do 01.03.2007 20:55, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
pRiMUS

Dabei seit: 09.09.2003
Ort: Vienna
Alter: 48
Geschlecht: Männlich
Verfasst Do 01.03.2007 20:57
Titel

Antworten mit Zitat Zum Seitenanfang

nochwas, im ie7 stimmen die positionen deiner dropdowns nicht.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Nimroy
Community Manager
Threadersteller

Dabei seit: 26.05.2004
Ort: zwischen Köln und D'dorf
Alter: 46
Geschlecht: Männlich
Verfasst Mo 19.03.2007 15:25
Titel

Antworten mit Zitat Zum Seitenanfang

So, hab jetzt mal das berühmte suckerfish dropdown integriert. Leider zeigt er das Menü nicht mehr in einer reihe, sondern untereinander an. Kann mir wer verraten, wie ich das wieder hinkriege?

...Muss noch viel lernen mit css...

Hier mal das HTML:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Leichlinger Autohaus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles2.css" rel="stylesheet" type="text/css">
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
   if (document.all&&document.getElementById) {
      navRoot = document.getElementById("nav");
      for (i=0; i<navRoot.childNodes.length; i++) {
         node = navRoot.childNodes[i];
         if (node.nodeName=="LI") {
            node.onmouseover=function() {
               this.className+=" over";
            }
            node.onmouseout=function() {
               this.className=this.className.replace(" over", "");
            }
         }
      }
   }
}
window.onload=startList;

//--><!]]></script>
</head>

<body>
   <div id="main">
      <div id="linie_oben">&nbsp;</div>
      <div id="header">
         <div id="box_links">&nbsp;</div>
         <div id="header_img"><img src="back1.jpg"></div>
         <div id="logo">&nbsp;</div>
      </div>
      <div id="menu">
         <ul id="nav">
            <li><h2><a href="index.php">Home</a></h2></li>
            <li><h2>Handel</h2>
               <ul>
               <li><a href="neuwagen.php">Neuwagen</a></li>
               <li><a href="jahreswagen.php">Jahres- und Gebrauchtwagen</a></li>
               <li><a href="importwagen.php">EU-Importe</a></li>
               <li><a href="autoscout.php">Autoscout24</a></li>
               </ul>
            </li>
            <li><h2>Service</h2>
               <ul>
               <li><a href="reparatur.php">Reparatur</a></li>
               <li><a href="inspektion.php">Inspektion &amp; Wartung</a></li>
               <li><a href="mietwagen.php">Mietwagen</a></li>
                </ul>
            </li>
            <li><h2><a href="unternehmen.php">Unternehmen</a></h2></li>
            <li><h2>Kontakt</h2>
               <ul>
               <li><a href="mailform.php">Mailformular</a></li>
               <li><a href="anfahrt.php">Anfahrt</a></li>
               </ul>
            </li>
         </ul>
      </div>
      <div id="content">
         <img src="home.gif">
      </div>
      <div id="footer">
         <p><a href="impressum.html">Impressum</a></p>
      </div>
   </div>
</body>
</html>


Und hier das CSS:
Code:

body {
   background: url(background.png) repeat-x;
   margin: 0px;
   font-family: verdana, arial, helvetica, sans-serif;
   font-size: 12px;
}

h2 {
   margin: 0;
}

#main{
   background-color: white;
   margin-left: auto;
   margin-right: auto;
   padding: 10px 16px 0px 16px;
   position: relative;
   width: 740px;
}

#linie_oben{
   width: 740px;
   height: 20px;
   background-color: #8384aa;
   margin: 0 0 5px 0;
}

#header {
   height: 205px;
   position: relative;
}

#header_img {
   position: absolute;
   right: 0;
   top: 0;
}

#box_links {
   background: #080A55;
   height: 200px;
   left: 0;
   position: absolute;
   top: 0;
   width: 260px;
}

#logo{
   position: absolute;
   top: 62px;
   right: 0px;
   width: 170px;
   height: 76px;
   background: #080a55 url(logo.gif);
   z-index: 1;
}


#menu {
   background-color: #8384aa ;
   float: left;
   height: 20px;
   width: 740px;
   z-index: 1;
}

#menu ul, #menu ul a {
   list-style: none;
   margin: 0px;
   padding: 0px;
   text-decoration: none;
   width: 127px;
}

#menu ul h2{
   border-right: 5px solid white;
}

#menu a, #menu h2  {
   font: bold 12px/14px verdana, arial, helvetica, sans-serif;
   display: block;
   margin-top: 0px;
   margin-right: 0px;
   padding-top: 0px;
   padding-left: 20px;
   height: 20px;
   vertical-align: middle;
}

#menu h2, #menu h2 a {
   color: #FFFFFF;
   line-height: 20px;
}

#menu ul li ul a {
   border-bottom: 1px solid white;
   border-right: none;
   color: #080a55;
   background: #cecedd;
   text-decoration: none;
   font-weight: normal;
   font-size: 10px;
   line-height: 12pt;
   height: auto;
   padding-left: 4px;
   padding-right: 4px;
   padding-top: 0px;
   width: 119px;
}

#menu ul li ul a:hover {
   background: #fff;
   color: #a00;
}

#menu li {
  float: left;
  position: relative;
  width: 10em;
}
/*
#menu ul ul {
   margin: 0px 0px 0px 0px;
   border-right: none;
   padding-top: 0px;
   z-index: 500;
}

div#menu ul li ul{
   display: none;
} */

div#menu ul li:hover ul{
   display: block;
}

#menu li ul { /* second-level lists */
   display: none;
   position: absolute;
   top: 1em;
   left: 0;
}


#menu li:hover ul, #menu li.over ul { /* lists nested under hovered list items */
   display: block;
}

#content{
   background-color: white;
   width: 740px;
   clear: left;
}

#footer p {
   margin: 0;
   padding-left: 10px;
}

#footer {
   background-color: #8384aa;
   height: 20px;
   margin: 10px 0px 20px 0px;
   width: 740px;
}

#footer a, #footer a:visited {
   color: white;
   font-family: verdana, arial, helvetica, sans-serif;
   font-size: 11px;
   line-height: 20px;
   text-decoration: none;
   vertical-align: middle;
}

#footer a:hover {
   font-weight: bold;
   text-decoration: underline;
}

a:visited {
   color:#4E4B4A; text-decoration: underline;
}

a:link {
   color:#4E4B4A; text-decoration: underline;
}

a:hover {
   color: #4E4B4A;
   font-weight: ;
   line-height: 165%;
   text-decoration: underline;
}

li > ul {
   top: auto;
   left: auto;
   }


Ich bedanke mich schon mal jetzt überschwenglich für die Mühe!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 19.03.2007 15:45
Titel

Antworten mit Zitat Zum Seitenanfang

Entferne mal bei "#menu ul" die width Angabe.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Nimroy
Community Manager
Threadersteller

Dabei seit: 26.05.2004
Ort: zwischen Köln und D'dorf
Alter: 46
Geschlecht: Männlich
Verfasst Mo 19.03.2007 17:55
Titel

Antworten mit Zitat Zum Seitenanfang

m hat geschrieben:
Entferne mal bei "#menu ul" die width Angabe.


Darf ich fragen, warum das jetzt geht? Ich würde natürlich schon gerne eine Breite haben, die der der Submenüs entspricht. Außerdem sind die Submenüs jetzt ein paar Pixel zu hoch.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Dropdown Menü
DropDown Menü verschwindet
CSS Javascript Dropdown menü
JavaScript-Dropdown-Menü
IE Fehler bei DropDown Menü
[FLASH] DropDown Menü
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.