CSS Menü im IE7 und Android?

Sprint

Erfahrenes Mitglied
Hallo zusammen,

ich habe hier ein kleines Problem, daß die Menübeschriftung im IE7 und angeblich auch bei Android auf einem Samsung Tablet verschwindet. D.h., daß die Links schon noch da sind, die Maus reagiert darauf und die Links funktionieren auch, aber ansonsten sind sie unsichtbar. Außerdem verschwindet noch ein schmaler Streifen zwischen dem Menü und dem Content Bereich.

Zu sehen ist das hier: Link

Da ich selbst weder einen IE noch Android nutze, kann ich es nur über den IE Tester bestätigen.

Und das ist der Quelltext dazu:

HTML:
<div id="menudiv">
	<ul id="menu">
		<li><a href="index.php">Home</a></li>
		<li><a href="leistung.php">Leistungen</a></li>
		<li><a href="galerie.php">Galerie</a></li>
		<li><a href="referenz.php">Referenzen</a></li>
		<li><a href="impressum.php">Impressum</a></li>
		<li id="kontakt"><a href="javascript:animatedcollapse.toggle(['contslide'])">Kontakt</a></li>
	</ul>
</div>
CSS:
#menu * {
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -ms-transition:     all 0.6s ease;
  -o-transition:      all 0.6s ease;
}

#menudiv{
	position: relative;
	background-color: white;
	width: 962px;
	margin-top: 10px;
}
#menu{ 
	width: 100%; 
	height: 18px; 
	margin: 0; 
	padding: 18px 0 0; 
	list-style: none;  
}

#menu li{
	float: left;
	padding: 0;
	position: relative;
	line-height: 0;
	text-align: center;
}

#menu a { 
	font-size: 14px;
	float: left; 
	height: 29px; 
	padding: 0 20px; 
	color: #640d10; 
	text-decoration: none; 
	text-shadow: 0 1px 0 #000; 
}

#menu li:hover > a{
	color: #590e17; 
}

*html #menu li a:hover{ /* IE6 */
	color: #590e17;
}

#menu li:hover > ul{
	display: block;
}

/* Sub-menu */

#menu ul{
	min-width: 150px;
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 25px;
    left: 0;
    z-index: 99999;
}

#menu ul ul{
  top: 0;
  left: 150px;
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
}

#menu ul a{    
    padding: 10px;
	height: 10px;
	width: auto;
	height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
	text-transform: none;
	background-color: #cfd0c0;
}

*html #menu ul a{ /* IE6 */
	height: 10px;
}

*:first-child+html #menu ul a{ /* IE7 */
	height: 10px;
}

#menu ul a:hover{
	color: white;
    background: #590e17;
	background: -moz-linear-gradient(#5e1821,  #590e17);	
	background: -webkit-gradient(linear, left top, left bottom, from(#5e1821), to(#590e17));
	background: -webkit-linear-gradient(#5e1821,  #590e17);
	background: -o-linear-gradient(#5e1821,  #590e17);
	background: -ms-linear-gradient(#5e1821,  #590e17);
	background: linear-gradient(#5e1821,  #590e17);
}

#menu ul li:first-child > a{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child > a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul ul li:first-child a:after{
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;	
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #626262; 
}

#menu ul ul li:first-child a:hover:after{
    border-right-color: #626262; 
    border-bottom-color: transparent; 	
}


#menu ul li:last-child > a{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

Hat jemand eine Idee, warum die Links verschwinden und wie das und die Verschiebung zu verhindern sind?

Danke schon mal im Voraus,
Sprint
 
Zurück