Winch: Darstellungsproblem in Firefox und IE

SELF-Forum

Darstellungsproblem in Firefox und IE

Winch
– Informationen zu den Bewertungsregeln

Hi,

ich habe ein Problem mit einem Menü, das ich erstellt habe. In Chrome und Opera funktioniert es, wie es soll. Im Internet Explorer und in Firefox erscheinen die Submenüs immer in der linken oberen Ecke und ich weiß beim besten Willen nicht wieso, vielleicht hat jemand damit schon ähnliche Erfahrungen gemacht? Wäre für jede Hilfe dankbar!

Code sieht folgendermaßen aus:

  
  
            <div class="menu">  
  
            <ul>  
  
              <li class="topmenu"><a href="#">bb PORSCHE</a>  
                <ul>  
                  <li class="submenu"><a href="#"><span class="bla">TURBO TARGA RAINBOW</span></a></li>  
                  <li class="submenu"><a href="#"><span class="bla">TURBO TARGA WEISS</span></a></li>  
                  <li class="submenu"><a href="#">TURBO TARGA SCHWARZ</a></li>  
                  <li class="submenu"><a href="#">P828 TARGA</a></li>  
                  <li class="submenu"><a href="#">928 CABRIO</a></li>  
                </ul>  
              </li>  
  
  
              <li class="topmenu"><a href="#">bb MERCEDES</a>  
                <ul>  
                  <li class="submenu"><a href="#">Punkt1</a></li>  
                  <li class="submenu"><a href="#">Punkt2</a></li>  
                  <li class="submenu"><a href="#">Punkt3</a></li>  
                  <li class="submenu"><a href="#">Punkt4</a></li>  
                  <li class="submenu"><a href="#">Punkt5</a></li>  
                </ul>  
              </li>  
  
  
              <li class="topmenu"><a href="#">bb GOLF</a>  
                <ul>  
                  <li class="submenu"><a href="#">GOLF</a></li>  
                  <li class="submenu"><a href="#">GOLF CABRIO</a></li>  
                </ul>  
              </li>  
  
           </ul>  
       </div>  
  
  


  
  
.menu {  
	text-align: center;  
	height: 100%;  
}  
  
  
.menu a {  
	text-decoration: none;  
	font-weight: bold;  
	font-size: 90%;  
    color: #3A3A39;  
	letter-spacing: 2px;  
}  
  
  
.menu ul {  
	margin: 0px;  
	padding: 5px;  
}  
  
  
.menu ul li {  
	display: inline;  
	position: relative;  
}  
  
  
.menu ul li:hover > ul {  
	display: block;  
	position: absolute;  
	padding-top: 10px;  
}  
  
  
.menu ul ul {  
	display: none;  
}  
  
  
.menu ul ul a {  
	padding: 7px 10px;  
	display: block;  
	border-top: 1px solid transparent;  
	border-bottom: 1px solid transparent;  
}  
  
  
.menu ul ul a:hover {  
	color: #FFFFFF;  
	display: block;  
	background-color: #5D5D5D;  
	border-top: 1px solid #000000;  
	border-bottom: 1px solid #000000;  
}  
  
  
.menu ul ul li {  
	display: block;  
}  
  
  
.submenu {  
	background-color: #777777;  
	width: 200%;  
	font-size: 70%;  
	text-align: left;  
	margin-left: -50%;  
	opacity: 0.85;	  
}
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Darstellungsproblem in Firefox und IE

    Gunther
    – Informationen zu den Bewertungsregeln

    Hi,

    Im Internet Explorer und in Firefox erscheinen die Submenüs immer in der linken oberen Ecke und ich weiß beim besten Willen nicht wieso, ...

    Deswegen:

    .menu ul li {
    display: inline;
    ...
    }

      
Abgesehen davon würde ich dir auch empfehlen, die grundlegenden Eigenschaften nicht in Selektoren mit Pseudo-Klassen festzulegen, sondern separat und dann nur die Eigenschaften festlegen, die sich auch tatsächlich ändern (hier bei :hover).  
  
  
Gruß Gunther
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Darstellungsproblem in Firefox und IE

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@Gunther:

      nuqneH

      Deswegen:

      .menu ul li

      Selektoren sollten so kurz und unspezifisch wie möglich sein. 'ul' bringt keinerlei sinnvollen Zusatz.

      Deswegen:
      .menu li

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Darstellungsproblem in Firefox und IE

        Winch
        – Informationen zu den Bewertungsregeln

        Hi,

        vielen Dank schonmal für die schnelle Antwort.
        Wenn ich das inline ändere funktioniert jedoch leider gar nichts mehr...

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Darstellungsproblem in Firefox und IE

    Klaus Meseck
    – Informationen zu den Bewertungsregeln

    Hi,

    ich habe ein Problem mit einem Menü, das ich erstellt habe. In Chrome und Opera funktioniert es, wie es soll. Im Internet Explorer und in Firefox erscheinen die Submenüs immer in der linken oberen Ecke und ich weiß beim besten Willen nicht wieso, vielleicht hat jemand damit schon ähnliche Erfahrungen gemacht? Wäre für jede Hilfe dankbar!

    Code sieht folgendermaßen aus:

    <div class="menu">

    <ul>

    <li class="topmenu"><a href="#">bb PORSCHE</a>
                    <ul>
                      <li class="submenu"><a href="#"><span class="bla">TURBO TARGA RAINBOW</span></a></li>
                      <li class="submenu"><a href="#"><span class="bla">TURBO TARGA WEISS</span></a></li>
                      <li class="submenu"><a href="#">TURBO TARGA SCHWARZ</a></li>
                      <li class="submenu"><a href="#">P828 TARGA</a></li>
                      <li class="submenu"><a href="#">928 CABRIO</a></li>
                    </ul>
                  </li>

    <li class="topmenu"><a href="#">bb MERCEDES</a>
                    <ul>
                      <li class="submenu"><a href="#">Punkt1</a></li>
                      <li class="submenu"><a href="#">Punkt2</a></li>
                      <li class="submenu"><a href="#">Punkt3</a></li>
                      <li class="submenu"><a href="#">Punkt4</a></li>
                      <li class="submenu"><a href="#">Punkt5</a></li>
                    </ul>
                  </li>

    <li class="topmenu"><a href="#">bb GOLF</a>
                    <ul>
                      <li class="submenu"><a href="#">GOLF</a></li>
                      <li class="submenu"><a href="#">GOLF CABRIO</a></li>
                    </ul>
                  </li>

    </ul>
           </div>

    
>   
>   
> ~~~css
  

>   
> .menu {  
> 	text-align: center;  
> 	height: 100%;  
> }  
>   
>   
> .menu a {  
> 	text-decoration: none;  
> 	font-weight: bold;  
> 	font-size: 90%;  
>     color: #3A3A39;  
> 	letter-spacing: 2px;  
> }  
>   
>   
> .menu ul {  
> 	margin: 0px;  
> 	padding: 5px;  
> }  
>   
>   
> .menu ul li {  
> 	display: inline;  
> 	position: relative;  
> }  
>   
>   
> .menu ul li:hover > ul {  
> 	display: block;  
> 	position: absolute;  
> 	padding-top: 10px;  
> }  
>   
>   
> .menu ul ul {  
> 	display: none;  
> }  
>   
>   
> .menu ul ul a {  
> 	padding: 7px 10px;  
> 	display: block;  
> 	border-top: 1px solid transparent;  
> 	border-bottom: 1px solid transparent;  
> }  
>   
>   
> .menu ul ul a:hover {  
> 	color: #FFFFFF;  
> 	display: block;  
> 	background-color: #5D5D5D;  
> 	border-top: 1px solid #000000;  
> 	border-bottom: 1px solid #000000;  
> }  
>   
>   
> .menu ul ul li {  
> 	display: block;  
> }  
>   
>   
> .submenu {  
> 	background-color: #777777;  
> 	width: 200%;  
> 	font-size: 70%;  
> 	text-align: left;  
> 	margin-left: -50%;  
> 	opacity: 0.85;	  
> }  
>   
>   
>

    Des Fehler dürfte in der Verschachtelung der CSS-Eigenschaft 'position:absolute' liegen. Die Position 'topmenu' ist nicht definiert.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln