CSS menu en IE6

[YoshiBignose]

Ik heb een CSS menu op mijn website staan. Nu werkt deze perfect onder firefox, IE7 etc.

Alleen IE6 (en eerder denk ik) moet weer raar doen. Er komt een wit extra blok aan de rechterkant van de site en onderin is wat layout verneukt.

Ik heb dit soort codes er tussen staan voor IE6:

code:

<!--[if lte IE 6]>
<a href="#">HOME
<table><tr><td>
<![endif]-->

zoiets dus:

code:

<li><a class="hide" href="#">TEST</a>

<!--[if lte IE 6]>
<a href="#">TEST
<table><tr><td>
<![endif]-->

    <ul>
   <li><a href="TEST">TEST</a></li>
   <li><a href="TEST">TEST</a></li>    
   <li><a href="TEST">TEST</a></li>
    </ul>
    
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

Wat kan ik fout doen? Heb op internet gezocht en kwam iets tegen van suckerfish menu's. Die gebruikten een soort javascript om het hover probleem op te lossen. Dit kan ik wel gebruiken, maar dat is niet het enige probleem dus wat ik krijg.

Wat kan dit zijn?

[Boelie-Boelie]

Ik vind het best grappig als je over een CSS-menu begint en vervolgens alleen HTML plaatst, zeker als het hoogstwaarschijnlijk aan je CSS ligt. Maar los daarvan is ook niet duidelijk wat je precies wilt bereiken (er staat alleen 'het werkt niet'). Verdere tips:
- Conditional comments worden voornamelijk gebruikt voor het oproepen van IE-specifieke stylesheets, niet zozeer om IE rare HTML-constructies voor te schotelen.
- Een suckerfishmenu is te prefereren boven het pad dat je nu hebt gekozen, gezien je HTML.

[YoshiBignose]

In de CSS bestanden staat eigenlijk alleen dingen over hover in, wat in IE6 anders werkt dan IE7 e.d.

code:

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#990000;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#ddd; color:#000;}
.menu ul li a:hover ul li a {display:block; background:#ccc; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#ccc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}

Omdat de layout van mijn site verneukt werd, dacht ik dat het eerder aan de <table><td><tr> etc. lag en niet aan het .ccs bestand.

Dit is trouwens het menu waar ik het over heb: http://www.cssplay.co.uk/menus/dd_valid.html

[ Voor 4% gewijzigd door YoshiBignose op 12-03-2008 09:16 ]

[Geert.H]

Je oplossing is best wel ranzig als ik eerlijk ben. Een anchor om een tabel zetten waarin zich dan weer een list bevind? Dat is ongeveer hetzelfde als je huis van de buitenkant behangen en in je woonkamer de tuinmeubels zetten (nofi voor studenten).

Het is denk ik beter als je verder gaat met de suckerfish menu's. Verder is het ook handig als we je eigen testcase hebben. Het werkende menu is leuk, maar dat werkt al. Het gaat om wat er fout bij jou gaat