zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Dropdown-Menü nicht in jedem Browser einheitlich

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.01.2012, 14:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.01.2012
Ort: Thüringen
Beiträge: 10
Tony-S befindet sich auf einem aufstrebenden Ast
Standard Dropdown-Menü nicht in jedem Browser einheitlich

Hallo,

über ein Tutorial habe ich mir ein Dropdown-Menü zusammengebaut
(von wo genau weiß ich nicht mehr)
und dieses über ein anderes Stylesheet optisch (im Google-Stil) verändert.
1 : 1 kopiert habe ich auch nicht, das was dort steht verstehe ich soweit auch.

Jedenfalls brauche ich dieses Menü sowohl im IE 8 als auch im Firefox 5.
Im IE 8 sind die Menüeinträge bis auf die letzte Oberkategorie nicht untereinander, wie man hier sehen kann:



Im FireFox 5 hingegen schaut es noch ganz normal aus:



Wenn ich die gleiche Seite im Chromium (Build 18 oder 19) und Opera (11) ansehe, wird das Menü auch richtig dargstellt im Firefox 9 wiederum nicht (im 5er geht es ja noch).

Zur Erläuterung noch: um den Button Suchen ist ein DIV-Container (grün), um die restlichen drei Buttons ebenso (orange) und um diese beiden ein weiteres (rot). Vielleicht liegt es auch schon daran?



Jetzt ist erst mal die Frage ob das an der Breite der einzelnen Menüeinträge (was aber nichts brachte das zu verändern)
oder an etwas anderem liegt?

Die Bilder allein reichen sicher nicht, daher noch mein css für das Menü:
Code:
*{ margin: 0px; padding: 0px; }
 
#navcon { width: 100%;}
 
#nav {
  font-family: arial, sans-serif;

  width: 300px;
  font-size: 14px;
  
  margin: 0px auto;
}
 
#nav ul {
  list-style-type: none;
}
 
#nav ul li {
  float: left;
  position: relative;
}
 
#nav ul li a {
  text-align: center;

  padding: 8px 15px;
  display: block;
  text-decoration: none;
}
 
#nav ul li ul {
  display: none;
}
 
#nav ul li:hover ul {
  display: block;
  position: absolute;
}

/* Oberkategorie */ 
#nav ul li:hover ul li a {
  display: block;
  background: rgb(153, 153, 153);
  color: #ffffff;
  width: 109px;
  text-align: center;
  border-bottom: 1px solid #f2f2f2;
  border-right: none;
}

/* Unterkategorien */ 
#nav ul li:hover ul li a:hover {
  background: rgb(201, 201, 201);
}
und hier falls von belang die Google-css:

[CSS] google_gui - Pastebin.com

und hier noch das HTML-Dokument:

HTML-Code:
<!DOCTYPE html>
<html>
  <head>
    <title>Lager</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="stylesheet" type="text/css" href="menu_style.css" />
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  
  <body>
    <div id="bar">
      <h1>database</h1>
     
      <input name="search" type="text" size="30" maxlength="55">
      
      <div class="wrap-this">
      
        <div class="wrap-search-button">
          <a href="#" class="button big">Suche</a>
        </div>
        
        <div class="wrap-menu-box">
          <div id="navcon">
            <div id="nav">
              
              <ul>
                <!-- Suchkriterien -->
                <li><a href="#" class="button big">Suchkriterium</a>
                  <ul>
                    <li id="s1"><a style="width: 109px;" href="#">Materialnummer</a></li>
                    <li id="s2"><a style="width: 109px;" href="#">Materialkurztext</a></li>
                    <li id="s3"><a style="width: 109px;" href="#">Lagerort</a></li>
                    <li id="s4"><a style="width: 109px;" href="#">Regal</a></li>
                    <li id="s5"><a style="width: 109px;" href="#">Mengeneinheit</a></li>
                  </ul>
                </li>
                
                <!-- Vergleich -->
                <li><a href="#" class="button big">Filter</a>
                  <ul> 
                    <li id="f1"><a style="width: 40px;" href="#">&lt;</a></li>
                    <li id="f2"><a style="width: 40px;" href="#">=</a></li>
                    <li id="f3"><a style="width: 40px;" href="#">&gt;</a></li>
                    <li id="f4"><a style="width: 40px;" href="#">&lt; &gt;</a></li>
                  </ul>
                </li>
                
                <!-- Anzahl -->
                <li><a href="#" class="button big">Anzahl</a>
                  <ul>
                    <li id="a1"><a style="width: 55px;" href="#">1</a></li>
                    <li id="a2"><a style="width: 55px;" href="#">5</a></li>
                    <li id="a3"><a style="width: 55px;" href="#">10</a></li>
                    <li id="a4"><a style="width: 55px;" href="#">25</a></li>
                    <li id="a5"><a style="width: 55px;" href="#">50</a></li>
                    <li id="a6"><a style="width: 55px;" href="#">100</a></li>
                    <li id="a7"><a style="width: 55px;" href="#">500</a></li>
                    <li id="a8"><a style="width: 55px;" href="#">1000</a></li>
                  </ul>
                </li>
               </ul>
                
            </div>
          </div>
        </div>
        
      </div>
    </div>

  </body>
</html>
Sieht nach sehr viel aus aber vielleicht blickt jemand durch und kann mir sagen was ich falsch mache oder worauf ich bei den beiden Browsern achten muss.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.01.2012, 14:22
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Heb mal für #nav ul li:hover ul li den Float auf.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.01.2012, 15:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.01.2012
Ort: Thüringen
Beiträge: 10
Tony-S befindet sich auf einem aufstrebenden Ast
Standard

Ich glaube ich komme dem ganzen schön näher, meintest du das mit dem aufheben in etwa so:

HTML-Code:
<!-- Vergleich -->
  <li><a href="#" class="button big">Filter</a>
   <ul> 
     <li id="f1"><a style="width: 40px;" href="#">&lt;</a></li>
     <li style="clear: left;" id="f2"><a style="width: 40px;" href="#">=</a></li>
     <li style="clear: left;" id="f3"><a style="width: 40px;" href="#">&gt;</a></li>
     <li style="clear: left;" id="f4"><a style="width: 40px;" href="#">&lt; &gt;</a></li>
   </ul>
  </li>
Edit: Zumindestens für "Filter" klappt das hier im FF5:

Geändert von Tony-S (10.01.2012 um 15:35 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 10.01.2012, 15:28
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

Der einzige Browser, in dem ich dein Problem nachvollziehen kann -- nachdem ich den Code lokal zusammengebastelt habe -- ist IE (8+9) im Kompatibilitätsmodus. Im FF9 sehe ich nichts davon.
Bitte poste immer einen Link zum Problem. Eine weitere Codeablage braucht niemand.

Zitat:
Das einzige was da ja float ist wäre "#nav ul li".
Ja, eben. Und dieses Float gilt für alle li-Elemente. Auch für die der Subnavigation. Dort musst du es aufheben: float:none

edit: Nein, Clear ist nicht das, was du brauchst. Du brauchst kein Float.
Mit Zitat antworten
  #5 (permalink)  
Alt 10.01.2012, 15:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.01.2012
Ort: Thüringen
Beiträge: 10
Tony-S befindet sich auf einem aufstrebenden Ast
Standard

Ich habe das clear: left auf die beiden Buttons (Suchkriterium/Filter) angewandt, das funktioniert. Aber wenn das nicht wirklich richtig ist, wäre es mir lieber wenn ihr mir das mit dem float: none auf die li-Elemente angewandt nochmal genauer erklärt. Wenn ich das so mache, sind zwar die Listenelemente untereinander, jedoch die drei Buttons auch - ebenso nehmen sie die komplette Breite des drüber liegenden DIVs ein.
Mit Zitat antworten
  #6 (permalink)  
Alt 10.01.2012, 15:50
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

Du verstehst nicht. Du sollst es nicht "ändern".
Du brauchst eine neue Regel im CSS (mit einem passenden Selektor), der das Float für die li-Elemente der zweiten Listenebene aufhebt.

edit: Jetzt ist der Beitrag, auf den ich antwortete, plötzlich anders.
Zitat:
Wenn ich das so mache,
Du hast es nicht "so" gemacht. Du hast für alle li-Elemente das Float entfernt. Du sollst das aber nur für die li-Elemente der zweiten Listenebene tun.

Geändert von fricca (10.01.2012 um 15:52 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 10.01.2012, 16:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.01.2012
Ort: Thüringen
Beiträge: 10
Tony-S befindet sich auf einem aufstrebenden Ast
Standard

Entschuldige @fricca dein "Dort" habe ich genauso missverstanden wie den Post von Praktikant. Das ist natürlich richtig, dass ich das so auf alle Elemente anwende;

richtig ist es dann so:

Code:
#nav ul li ul li {
  float: none;
}
Danke für die Mühe
Mit Zitat antworten
Antwort

Stichwörter
dropdown menü, google, gui, horizontal, menü

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
Hilfe beim Dropdown Menü julianmeier CSS 4 15.09.2010 12:12
Problem: Dropdown Menü Matt_Skyes CSS 2 01.09.2010 13:15
Dropdown Menü über CSS realisiseren (Joomla) Robeat CSS 0 20.01.2009 13:24
Dropdown Menue wird durch Untermenue gestreckt Schelm.isch CSS 4 31.08.2008 23:31
Suche CSS Dropdown Menü Lloyd Larkin CSS 0 11.10.2006 21:50


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:08 Uhr.