CSS Menü - Problem

[mlaukel]

Hallo,

habe ein Problem mit einem CSS Menü innerhalb eines Templatemonster Templates.

Und zwar spinnt es bei mouse over, on & out (Schrift bleibt weiß und andere Eigenartigkeiten) zum anderen sollen ein paar Menüelemente 2 zeilig dargestellt werden (funktioniert bisher im Firefox aber nicht IE).

Hier der HTML-Quelltext:

        <div id="header">
        <form action="login.php" id="search-form">
            <div class="wrapper">
             <input type="submit" value="LOGIN" id="search-submit" />
            </div>
          </form>
          <a href="index.php"><img src="images/logo.gif" id="logo" alt="" /></a>
          <div id="menu">
            <div>
              <div>
               <ul>
                  <li><a href="index.php">Inicio</a></li>
                  <li><a href="affiliate.php">Inscripci&oacute;n</a></li>
                  <li><a href="nachweis.php">Comprobantes</a></li>
                  <li class="2sp"><a href="faq.php">Preguntas<br />frecuentes</a></li>
                  <li class="2sp"><a href="agb.php">Condiciones<br />generales</a></li>
                  <li><a href="impressum.php">Aviso legal</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>

Hier der CSS-Code:

#menu {
	background: url(images/menu-tail.gif) repeat-x 0% 0%;
	height: 54px;
	overflow: hidden;
	position: absolute;
	top: 115px;
	left: 330px;
}

	#menu div {
		background: url(images/menu-left.gif) no-repeat 0% 0%;
	}
	
		#menu div div {
			background: url(images/menu-right.gif) no-repeat 100% 0%;
			height: 54px;
		}
		
			#menu div div ul {
				overflow: hidden;
				list-style-type:none;
			}
			
				#menu div div ul li {
					float: left;
					/*text-transform: uppercase;*/
					font-size: 1.217em;
					font-weight: 400;
					color: #464e53;
				}
				
					#menu div div ul li a {
						display: block;
						height: 54px;
						float: left;
						padding: 18px 14px 0 14px;
						line-height: 54px;
						text-decoration: none;
						color: #464e53;
					}
					#menu div div ul li.2sp a {
					    display: block;
						height: 54px;
						float: left;
						padding: 18px 14px 0 14px;
						line-height: 54px;
						text-decoration: none;
						color: #464e53;
					}
					
					#menu div div ul li a:hover {
						background: url(images/menu-act.gif) repeat-x 0% 0%;
						color: #fff;
					}
					
						#menu div div ul li a span {
							display: block;
							padding: 0 0 0 5px;
						}
						
							#menu div div ul li a:hover span {
								background: url(images/menu-act-left.gif) no-repeat 0% 0%;
								display: block;
								margin: 0 0 0 -14px;
								padding: 0 0 0 19px;
							}
					
						#menu div div ul li a strong {
							display: block;
							padding: 0 22px 0 0;
							font-weight: 400;
						}
						
							#menu div div ul li a:hover strong {
								background: url(images/menu-act-right.gif) no-repeat 100% 0%;
								display: block;
								margin: 0 -14px 0 0;
								padding: 0 36px 0 0;
							}
						
						#menu div div ul li.act a {
							background: url(images/menu-act.gif) repeat-x 0% 0%;
							color: #fff;
						}
						
							#menu div div ul li.act a span {
								background: url(images/menu-act-left.gif) no-repeat 0% 0%;
								display: block;
								margin: 0 0 0 -14px;
								padding: 0 0 0 19px;
							}
							
							#menu div div ul li.act a strong {
								background: url(images/menu-act-right.gif) no-repeat 100% 0%;
								display: block;
								margin: 0 -14px 0 0;
								padding: 0 36px 0 0;
							}

Komplette Seite: http://ganancia-segura.com/index.php
Komplettes Stylesheet: http://ganancia-segura.com/style.css

Hoffe es kann wer beim beheben des Problems behilflich sein und den Quelltext entsprechend optimieren.

Vielen Dank !

 

[Maik]

(funktioniert bisher im Firefox aber nicht IE).

Diese allgemeine Aussage trifft nicht auf den aktuellen IE8 zu.

mfg Maik

 

[mlaukel]

Ja, ok, IE8 geht

Fehler von mir, sorry.

 

[Maik]

Zum einen solltest du mal deine Regeln für die <a>-Elemente bzgl. des Box-Modells überprüfen, wonach der deklarierte obere Innenenabstand padding-top:18px zur height:54px-Eigenschaft hinzuaddiert wird, womit sich eine "tatsächliche" Höhe von 72px ergibt, die umschliessenden Elemente aber auch nur 54px hoch sind, und zum anderen die line-height:54px-Deklaration entfernen, wodurch IE6 und IE7 den Elementinhalt zusätzlich vertikal zentrieren, und somit die zweite Zeile des Linktextes aus dem sichtbaren Bereich verschwindet.

Ein Problem mit dem Wechsel der Schriftfarbe beim Überfahren und Verlassen der Links kann ich bei mir in keiner IE-Version registrieren.

mfg Maik