Dropdown-Menü unterschiedlich in verschiedenen Browsern

taiBsu · #1 (**permalink**) 16.01.2014, 19:20

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;
}

explanator · #2 (**permalink**) 16.01.2014, 19:46

Wende dich an http://www.redim.de/,die scheinen ja für die Seite zuständig zu sein.

taiBsu · #3 (**permalink**) 16.01.2014, 20:06

Zitat:

Zitat von explanator

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.

mymaksimus · #4 (**permalink**) 16.01.2014, 22:05

was genau stört dich denn?
genauere Problem beschreibung? ^^

Manfred62 · #5 (**permalink**) 16.01.2014, 23:58

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>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ä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