zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Drop-down Menü in allen Browsern (IE7/6, FF, Opera) anders (und falsch) dargestellt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.01.2008, 14:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.01.2008
Beiträge: 4
localhost befindet sich auf einem aufstrebenden Ast
Standard Drop-down Menü in allen Browsern (IE7/6, FF, Opera) anders (und falsch) dargestellt

Hallo,

Ich bin nicht mehr blutig, aber immer noch ein Anfänger.

In allen von mir getesteten Browsern wird das Dropdown-Menü anders dargestellt. Dabei produzieren alle unterschiedliche Fehler:

1.) Der Firefox (Version 2.0.0.11) zeigt das Menü zu weit links (es sollte bündig mit der Sidebar sein). Irgendwie bleibt die <ul> nicht in der div-Box drin...

2.) Die IEs (7.0 und 6.0) zeigen das Untermenü von Kontakt rechts daneben an statt darunter und liegen damit unangenehm über den weiteren Menüpunkten. Hier hatte ich schon versucht, die innere <ul> zu clearen, aber ohne Erfolg Zudem zeigt der IE6 das gleiche Verhalten wie der Firefox sobald man mit der Maus über einen der Links läuft.

3.) Im Opera (Version 9.25) ist die Anzeige so wie sie sein sollte. Problem ist, dass die Unterpunkte von Kontakt nicht mehr klickbar sind, sobald die Maus über dem Inhaltsbereich (#main) ist, obwohl das Menü sichtbar darüber liegt...Den Navigationsbereich so gross zu machen, dass auch die ausgeklappten Untermenüs noch darin Platz finden funktioniert zwar, ist aber inakzeptabel.

Das gekürzte html:
Code:
<body>
  <div id="pagewrapper">
      <div id="content">
        <div id="topnavi">
          <ul>
            <li class="currentpage">Startseite</li>
            <li><a href="aktuelles.php">Aktuelles</a></li>
            <li><a href="kontakt.php">Kontakt</a>
              <ul>
                <li><a href="email.php">EMail schreiben</a></li>
                <li><a href="weg.php">Wegbeschreibung</a></li>
              </ul>
            </li>
            <li><a href="impressum.php">Impressum</a></li>
            <li><a href="wir.php">Wir &uuml;ber Uns</a></li>
          </ul>
        </div>
        <div id="sidebar">
        </div>
        <div id="subcontent">
        </div>
        <div id="main">
        </div>
      </div>
  </div><!-- #pagewrapper -->
</body>
Das aufs wesentliche reduzierte CSS:
Code:
/* CSS für das Drop-down Menü ********************************/
#topnavi {
  padding: 0.5em 0% 0.5em 22%;
  overflow: hidden;
}
#topnavi ul {
  background-color: #4242C9;
  list-style: none;
  min-height: 1px;
}
#topnavi li ul { 
   width: 11em;
   position: absolute; 
   top: auto; 
   display: none;
   margin-top: 0.6em;
   clear: both;
}
#topnavi li {
  float: left;
  padding: 0.5em;
}
#topnavi li a{
  padding: 0.5em;
  text-decoration: none;
}
#topnavi .currentpage {
  padding: 0.5em;
  float: left; 
}
#topnavi li li { 
  width: 11em;
  padding: 0em;
  margin-left: 0px;
  margin-top: -1px;
  float: none;
  display: block; 
  position: relative;
}
#topnavi li li a {
  width: 10em;  
  display: block; 
}

/*div#topnavi li:sfhover ul,*/ 
div#topnavi li:hover ul, 
div#topnavi ul li:hover ul, 
div#topnavi ul ul li:hover ul { 
  display: block; 
}

/* IE Hacks */
* html #topnavi ul,
* html #topnavi li a {
  height: 1%;
}
/* weiteres CSS ********************************************/
 div#content {
   margin: 0em auto 2em 0;/* some air above and under menu and content */
   background-color: #B2B2B2;   /* BG-color for sidebar+joboverview*/
}


div#main {
   background-color: #EEF;    /* Same BG-color as pagewrapper */
   padding: 2em 2%;
   margin-left: 22%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
   margin-right: 22%; /* this will give room for subcontent to be on the right side, make sure this space is bigger than subconten width */
}

div#sidebar {
   background-color: #B2B2B2;      /* BG-color for sidebar+joboverview*/
   float: left;        /* set sidebar on the left side. Change to right to float it right instead. */
   width: 22%;     /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX IE double margin bug */
   margin-left: 0;
}

div#subcontent{
   font-size: 90%;
   background-color: #B2B2B2;      /* BG-color for sidebar+joboverview*/
   float: right;
   width: 22%;     /* jobsummary width, if you change this please also change #main margins */
   display: inline;  /* FIX IE double margin bug */
   margin-right: 0;
}
Ich glaube kaum, dass diese Codeschnippsel ausreichen werden um die Probleme zu beheben, daher:

Die vollständige online-Version liegt hier:
WSL - Software-Lösungen - Startseite

Ich hoffe auf baldige Lösungen, egal ob nur zu einem der geschilderten Probleme oder zu allen.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.01.2008, 15:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Ich halte overflow:hidden für #topnavi für gar keine gute Idee. Verwende eine andere Lösung zum Einschließen der Floats, Easyclearing wäre möglich.

Zur Position des Submenüs: Mach Positionsangaben für left und top.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.01.2008, 15:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.01.2008
Beiträge: 4
localhost befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Ich halte overflow:hidden für #topnavi für gar keine gute Idee.
Was genau heisst "keine gute Idee"?
Kann Easyclearing ja einfach mal versuchen...
Mit Zitat antworten
  #4 (permalink)  
Alt 23.01.2008, 15:52
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von localhost Beitrag anzeigen
Was genau heisst "keine gute Idee"?
z.B. ältere Geckos können damit nicht umgehen: http://xhtmlforum.de/48975-testcase-...-und-alte.html
Mit Zitat antworten
  #5 (permalink)  
Alt 23.01.2008, 15:55
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von localhost Beitrag anzeigen
Was genau heisst "keine gute Idee"?
Überleg doch mal. Du willst, dass dein Dropdownmenü aus dem Bereich heraushängt. Und was bewirkt overflow:hidden?
Ich bin sehr sicher, dass diese Angabe die Ursache für etliche deiner Probleme ist.

Außerdem ist die overflow-Eigenschaft grundsätzlich nur mit Vorsicht zu verwenden, siehe Heikos Antwort.
Mit Zitat antworten
  #6 (permalink)  
Alt 23.01.2008, 16:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.01.2008
Beiträge: 4
localhost befindet sich auf einem aufstrebenden Ast
Standard

OK, overflow war für die Probleme 1+3 verantwortlich:
die topnavi hat noch die Klasse clearfix bekommen und overflow is wech.

Bleibt Problem 2 für den IE7 (IE6 schmiert mir nach den Änderungen immer ab...)
Zu den Positionsangaben top, left zur inneren ul: Dazu müsste das umschliessende li aber zusätzlich zum "float: left" auch noch'n "position: relative" bekommen, oder? Geht das überhaupt, oder ist die oberste Menü-Ebene dann nur noch mit "display: inline" hinzukriegen?
Mit Zitat antworten
  #7 (permalink)  
Alt 23.01.2008, 17:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
OK, overflow war für die Probleme 1+3 verantwortlich
Bitte, gern geschehen.

Zitat:
Geht das überhaupt
Ja.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten mazzo CSS 10 05.04.2012 18:32
Drop Down menü Frage xero CSS 16 20.06.2007 19:48
Drop down menü geht im IE 6 nicht silverblack CSS 3 10.06.2007 21:36
Ultimate Drop Down Menu Lestat Ressourcen 7 03.08.2005 17:21


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:52 Uhr.