IE6 Probleme mit Submenue

[polygnom]

Hab ein leichtes Problem mit dem Submenu im IE6 (IE7 ka hab den nicht)
und zwar wird es gar nicht angezeigt zudem zwischen Button 2 und 3 ein kleiner Zwischenraum
Im FF haut alles super hin!

eine Browserweiche wurde schon teilweise von mir einbaut dann wird der Abstand auch kleiner zwischen Button 2 und 3 aber weg bekomm ich ihn nicht

ach genau die Navi wurde komplett mit Bildern aufgebaut

CSS

.navi  ul {
	list-style-type: none;
}
.navi {
	float:left;
	position: relative;
}
.navi table {
	position:relative;
	top:0;
	left:0;
}
.navi ul ul {
	visibility:hidden;
	position:absolute;
	top:36px;
	left:120px;
}
.navi ul li:hover ul {
	visibility:visible;
}
a, a:visited {
	text-decoration: none;
	display: block;
	width:120px;
	height:20px;
}
a#home, a#home:visited {
	background-image: url(../bilder/home.jpg);
}
a#home:hover {
	background-image: url(../bilder/home_over.jpg);
}
a#home:active {
	background-image: url(../bilder/home_press.jpg);
}
a#service {
	background-image: url(../bilder/service.jpg);
}
a#service:hover  {
	background-image: url(../bilder/service_over.jpg);
}
a#com, a#com:visited {
	background-image: url(../bilder/com.jpg);
	width: 180px;
}

a#com:hover {
	background-image: url(../bilder/com_over.jpg);
}
a#com:active {
	background-image: url(../bilder/com_press.jpg);
}


a#tele, a#tele:visited {
	background-image: url(../bilder/tele.jpg);
	width: 180px;
}
a#tele:hover {
	background-image: url(../bilder/tele_over.jpg);
}
a#tele:active {
	background-image: url(../bilder/tele_press.jpg);
}

a#angebot, a#angebot:visited{
	background-image: url(../bilder/angebot.jpg);
}
a#angebot:hover {
	background-image: url(../bilder/angebot_over.jpg);
}
a#angebot:active {
	background-image: url(../bilder/angebot_press.jpg);
}

a#kontakt, a#kontakt:visited {
	background-image: url(../bilder/kontakt.jpg);
}
a#kontakt:hover {
	background-image: url(../bilder/kontakt_over.jpg);
}
a#kontakt:active {
	background-image: url(../bilder/kontakt_press.jpg);
}
a#impre, a#impre:visited {
	background-image: url(../bilder/impres.jpg);
}
a#impre:hover {
	background-image: url(../bilder/impres_over.jpg);
}
a#impre:active {
	background-image: url(../bilder/impres_press.jpg);
}
a#gbook, a#gbook:visited {
	background-image: url(../bilder/home.jpg);
}
a#gbook:hover {
	background-image: url(../bilder/home_over.jpg);
}
a#gbook:active {
	background-image: url(../bilder/home_press.jpg);

html

<div class="navi">
                      <ul >
                        <li><a href="#" id="home"></a></li>
                        <li><a href="#" id="service"></a>
                          <!--[if lte IE 6]><table><tr><td><![endif]-->
                          <ul>
                            <li><a href="#" id="com"></a></li>
                            <li><a href="#" id="tele"></a></li>
                          </ul>
                          <!--[if lte IE 6]></td></tr></table><![endif]-->
                        <li><a href="#" id="angebot"></a></li>
                        <li><a href="#" id="kontakt"></a></li>
                        <li><a href="#" id="impre"></a></li>
                        <li><a href="#" id="gbook"></a></li>
                      </ul>
                      <!--[if lte IE 6]></td></tr></table><![endif]-->
     
              </div>

die hover effekte gehen überall ganz gut

 

[Maik]

Hi,

orientiere dich mal am HTML- und CSS-Code von http://www.cssplay.co.uk/menus/flyoutt.html

 

[polygnom]

Danke für die schnelle Antwort

wird mir wohl nichts anderes übrig bleiben als noch ein extra css für IE zu schreiben

hoffe das klappt dann

 

[Maik]

Deinem HTML-Code und den enthaltenden "Conditional Comments" zufolge hat dir dich doch eines von Stu Nicholls' CSS-Dropdown-Menü als Vorlage gedient, oder?

 

[polygnom]

ja aber ein anderes davon hab ich mir angeschaut

nur hab dann meinen Fehler nicht finden können

 

[Maik]

Dann schau doch einfach nach, wie Stu das in dieser Menü-Variante für den IE6 gelöst hat.

 

[polygnom]

hatte vorher noch diese Zeile dabei

.navi ul a:hover ul

das es dann so aussah

.navi ul li:hover ul,
.navi ul a:hover ul {
visibility:visible;

ging aber dadurch auch nicht

und woran liegt dann die Lücke zwischen Button 2 und 3?
da eine kleine Idee

 

[Maik]

Jetzt verrate doch mal, um welches Menü es sich handelt.

 

[polygnom]

um eine reine Bildnavigation als Buttons

keine Texte nur Bilder

und :hover bzw. :active wird jeweils wieder ein neues Bild geladen


nur nach dem Button vom dem Submenu ein ein Abstand
also zwischen Service button (wo bei hover ein Submenu auftaucht) und angebot button
ohne die hacks hab ich ca. 20 pixel mit hacks 3 pixel ca.

 <!--[if lte IE 6]></td></tr></table><![endif]-->

nur zwischen den andern Buttons ist der Abstand null das auch so sein soll

 

[Maik]

Ich wollte mit meiner Frage den Link zum Menü in Erfahrung bringen.