zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Dropdown-Menü unterschiedlich in verschiedenen Browsern

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.01.2014, 19:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.01.2014
Beiträge: 2
taiBsu befindet sich auf einem aufstrebenden Ast
Unglücklich Dropdown-Menü unterschiedlich in verschiedenen Browsern

Hallo liebes HXTMLforum,

ich habe folgendes Problem:

ich habe ein Template für Joomla! (jetzt bitte keine Joomla! Hate-Posts^^) geschrieben und die CSS mithilfe der Entwickleroptionen von Chrome angepasst. In Chrome sieht das Dropdown-Menü bei "Produkte" jetzt auch alles super aus, aber mit Firefox und Internet Explorer leider überhaupt nicht. Die padding- und margin- Angaben müssen aus irgendeinem Grund anders sein als in Chrome. Gibt es eine Möglichkeit, diese für verschiedene Browser anzupassen, oder kann mir sonst jemand verraten, warum da alles verschoben ist?

Die Seite hierfür lautet SCHMITZKER - Start, falls es sich jemand mal ansehen will.

Vielen Dank im Voraus.

Hier noch einmal der CSS-Code:

HTML-Code:
@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

html, body {
	height:101%;
	text-align:left;
	font-family: 'Open Sans', sans-serif;	
  font-size: 10.8px;
}

body {
  background-color: #4c4c4c;
	margin:0;
	padding:0;
}

.clear {
	clear:both;
}

#container {
  width: 970px;
  height: 660px;
  max-height: 660px;
  margin: 20px auto;
  background-color: white;
  box-shadow: 0px 0px 10px 5px #333;
}

#section_content {
  float: left;
  width: 627px;
  max-height: 710px;
}

#section_content a:hover {
  color: black;
}

#section_right {
  float: right;
  width: 303px;
  max-height: 710px; 
}

#section_right a:hover {
  color: black;
}

a:link, a:visited {
  color: darkgrey;
  text-decoration: none;
}

a:active {
  color: white;
}

a:hover {
  color: white;
  text-decoration: none;
}

p {
  margin-top: 0px;
}

nav {
  float: right;
  width: 520px;
  height: 37px;
  background-color: black;
  
}

nav ul {
  
}

nav ul.nav.menu {
  
  /*list-style: none;*/
  display: inline-flex;

  margin-top: 6px;
  margin-left: -50px;
}

nav ul li {
  font-size: 12.5px;
  text-align: left;
  text-decoration: none;
  display: block;
  border-left: 1px solid #808080; /*Strich auf der linken Seite*/
  padding: 0.3em 1em 0.3em 1em; /* top, right, bottom, left */
  list-style: none;
}

nav ul li.item-435 {
  border-left: none !important;
}

nav ul li ul li.item-481 {
  -webkit-margin-top: 99px;
  -moz-margin-right: -172px;
}

nav ul li ul li.item-481 ul {
  visibility: hidden;
  padding: 0px 140px 0px 25px;
  margin: 21px 0px 0px -176px;
}

nav ul li ul li.item-486 {
  margin-top: 100px;
}

nav ul li:hover > ul {
  visibility: visible;
}

nav ul li:hover > ul li ul {
  visibility: visible;
}

nav ul li:hover > ul li.item-481 ul {
  visibility: visible;
}

nav ul li:hover > ul li.item-486 ul {
  visibility: visible;
}

nav ul li ul {
  display: inline;
  visibility: hidden;
  position: absolute;
  padding: 0px 41px 0px 0px;
  margin: 22px 0px 0px -67px;
  background: #737373;
}

nav ul li ul li {
  float: none;
  color: black;
  border-left: none !important;
}

nav ul li ul li ul {
   visibility: hidden;
  padding: 0px 118px 0px 25px;
  margin: 21px 0px 0px -201px;
}

nav ul li ul li.item-486 ul {
  visibility: hidden;
  margin-left: -62px;
  padding-right: 44px;
}

nav ul li.item-473 ul {
  margin-left: -55px !important;
  padding-right: 82px;
}

nav ul li.item-474 ul {
  margin-left: -58px !important;
  padding-right: 13px;
}

nav ul li ul li a {
  color: black !important;
}

nav ul li ul li a:hover {
  color: white !important;
}

nav ul li ul li ul li ul.nav-child.unstyled.small.dropdown-menu {
 visibility: hidden;
}

header {
  background: url(http://www.schmitzker.de/images/logo_schmitzker.png) no-repeat;
  background-color: black;
  float: left;
  width: 450px;
  height: 37px;
  
}

div.flexicontact {
  background: url(http://www.schmitzker.de/images/form_bg.png) no-repeat;
  margin-left: 20px;
  margin-top: 30px;
  margin-right: 40px;
  padding-left: 40px;
  padding-right: 15px;
  padding-top: 40px;
  padding-bottom: 30px;
  font-size: 8pt;
  height: 491px;
}

input.button.fc_button {
  background-image: url(http://www.taibsu.de/schmitzker/images/senden.png);
  cursor: pointer;
  width: 57px !important;
  height: 57px;
  border: none;
  font-size: 0px;
}

table.fc_table {
  margin-left: 0px;
  background: #bfbfbf;
}

table tbody tr td input.rapid_contact.button {
  background-image: url(http://www.taibsu.de/schmitzker/images/senden.png);
  cursor: pointer;
  width: 57px !important;
  height: 57px;
  border: none;
  font-size: 0px;
}

.headerlogo{
	font-size:25px;
}

#main {
	padding: 20px;
}

footer {
	padding:10px 10px 0;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.01.2014, 19:46
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Wende dich an http://www.redim.de/,die scheinen ja für die Seite zuständig zu sein.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.01.2014, 20:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.01.2014
Beiträge: 2
taiBsu befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von explanator Beitrag anzeigen
Wende dich an Webdesign Agentur & Internetagentur | Design, Entwicklung & SEO - Webdesign Agentur reDim,die scheinen ja für die Seite zuständig zu sein.
Nein, sind sie nicht - außerdem habe ich die CSS-Datei selbst geschrieben und möchte wissen, ob ich einen Fehler im CSS Code gemacht habe.
Mit Zitat antworten
  #4 (permalink)  
Alt 16.01.2014, 22:05
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.08.2013
Beiträge: 242
mymaksimus befindet sich auf einem aufstrebenden Ast
Standard

was genau stört dich denn?
genauere Problem beschreibung? ^^
__________________
Das Leben ist wie ein Hermeneutischer Zirkel - man muss es erst verstanden haben bevor man es verstehen kann
Mit Zitat antworten
  #5 (permalink)  
Alt 16.01.2014, 23:58
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

vermute mal, die Probleme sind in den Dropdowns zu sehen (siehe Screenshots).
Hab mal in den Quelltext reingeschaut --> schlimm. Allein der Bereich 'Produkte' ist extrem verschachtelt. Wozu? Das wird in dem Dropdown gar nicht ersichtlich?
Der imho falsche Quelltext wird wohl eins der Probleme sein.
HTML-Code:
        <li class="item-472 deeper parent"><a href="/index.php/produkte/wasserfuehrende-kamineinsaetze/iron" >Produkte</a>
          <ul class="nav-child unstyled small">
            <li class="item-477 deeper parent"><a href="/index.php/produkte/wasserfuehrende-kamineinsaetze/iron" >Wasserführende Kamineinsätze</a>
              <ul class="nav-child unstyled small">
                <li class="item-476 deeper parent"><a href="/index.php/produkte/wasserfuehrende-kamineinsaetze/iron" >IRON</a>
                  <ul class="nav-child unstyled small">
                    <li class="item-491"><a href="/index.php/produkte/wasserfuehrende-kamineinsaetze/iron/ixr" >Iron Excellence R</a></li>
                    <li class="item-492"><a href="/index.php/produkte/wasserfuehrende-kamineinsaetze/iron/iron-prisma" >Iron Prisma</a></li>
                    <li class="item-493"><a href="/index.php/produkte/wasserfuehrende-kamineinsaetze/iron/iron-panorama" >Iron Panorama</a></li>
                    <li class="item-494"><a href="/index.php/produkte/wasserfuehrende-kamineinsaetze/iron/iron-t-double" >Iron T-Double</a></li>
                  </ul>
                </li>
                <li class="item-478 deeper parent"><a href="/index.php/produkte/wasserfuehrende-kamineinsaetze/highline-n-1" >HIGHLINE N° 1</a>
                  <ul class="nav-child unstyled small">
                    <li class="item-495"><a href="/index.php/produkte/wasserfuehrende-kamineinsaetze/highline-n-1/hl1-details" >Details</a></li>
                  </ul>
                </li>
                <li class="item-479 deeper parent"><a href="/index.php/produkte/wasserfuehrende-kamineinsaetze/highline-n-2" >HIGHLINE N° 2</a>
                  <ul class="nav-child unstyled small">
                    <li class="item-501"><a href="/index.php/produkte/wasserfuehrende-kamineinsaetze/highline-n-2/hl2-details" >Details</a></li>
                  </ul>
                </li>
                <li class="item-480 deeper parent"><a href="/index.php/produkte/wasserfuehrende-kamineinsaetze/highline-n-4" >HIGHLINE N° 4</a>
                  <ul class="nav-child unstyled small">
                    <li class="item-502"><a href="/index.php/produkte/wasserfuehrende-kamineinsaetze/highline-n-4/hl4-details" >Details</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="item-481 deeper parent"><a href="/index.php/produkte/wasserfuehrende-kaminoefen/santiago" >Wasserführende Kaminöfen</a>
              <ul class="nav-child unstyled small">
                <li class="item-482 deeper parent"><a href="/index.php/produkte/wasserfuehrende-kaminoefen/santiago" >SANTIAGO</a>
                  <ul class="nav-child unstyled small">
                    <li class="item-497"><a href="/index.php/produkte/wasserfuehrende-kaminoefen/santiago/santiago-base" >SANTIAGO Base</a></li>
                    <li class="item-498"><a href="/index.php/produkte/wasserfuehrende-kaminoefen/santiago/santiago-excellence" >SANTIAGO Excellence</a></li>
                  </ul>
                </li>
                <li class="item-483 deeper parent"><a href="/index.php/produkte/wasserfuehrende-kaminoefen/alicante" >ALICANTE</a>
                  <ul class="nav-child unstyled small">
                    <li class="item-496"><a href="/index.php/produkte/wasserfuehrende-kaminoefen/alicante/alicante-details" >Details</a></li>
                  </ul>
                </li>
                <li class="item-484 deeper parent"><a href="/index.php/produkte/wasserfuehrende-kaminoefen/faro" >FARO</a>
                  <ul class="nav-child unstyled small">
                    <li class="item-500"><a href="/index.php/produkte/wasserfuehrende-kaminoefen/faro/faro-details" >Details</a></li>
                  </ul>
                </li>
                <li class="item-485 deeper parent"><a href="/index.php/produkte/wasserfuehrende-kaminoefen/vitoria" >VITORIA</a>
                  <ul class="nav-child unstyled small">
                    <li class="item-499"><a href="/index.php/produkte/wasserfuehrende-kaminoefen/vitoria/vitoria-details" >Details</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="item-486 deeper parent"><a href="/index.php/produkte/zubehoer/controller" >Zubehör</a>
              <ul class="nav-child unstyled small"><li class="item-487"><a href="/index.php/produkte/zubehoer/controller" >Controller</a>
              </li>
              <li class="item-488"><a href="/index.php/produkte/zubehoer/zugbegrenzer" >Kaminzugbegrenzer</a></li>
              <li class="item-489"><a href="/index.php/produkte/zubehoer/ruecklaufanhebungsgruppe" >Rücklaufanhebungsgruppe</a></li>
            </ul>
          </li>
        </ul>
      </li>
Angehängte Grafiken
Dateityp: jpg demo1.jpg (117,8 KB, 2x aufgerufen)
Dateityp: jpg demo2.jpg (71,8 KB, 2x aufgerufen)
Mit Zitat antworten
Antwort

Stichwörter
css, margin, padding

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
Wie sieht eine Webseite in verschiedenen Browsern aus TreasureZone Grafik, Design, Typografie 5 18.05.2010 20:52
Darstellungsproblem flohpapa CSS 3 16.12.2009 09:55
DropDown Menü verschwindet andre-ne CSS 2 18.11.2009 11:44
CSS in verschiedenen Browsern klausschwaben CSS 1 29.07.2008 16:04
dropdown menü einbauen PatrickM CSS 6 07.01.2008 17:13


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:33 Uhr.