[CSS] Navigatie werkt niet in IE6

[DNA_Saint]

Ik heb een navigatie gemaakt voor een schoolproject.
Dank gaat mede uit naar Siege!

maar het probleem is dat het niet werkt in IE6. (IE7 wel)
Als je er overheen gaan onstaat er in IE6 een extra header balk en je krijg dus menu-tabs en dropdown niet te zien.

Ik probeerde al met Conditional comments voor IE6 iets eraan te doen, maar het heeft tot nu toe nog niet geholpen.
Ben al sinds gisteravond ermee bezig geweest, maar krijg het maar niet voor elkaar.
Als iemand tips heeft graag!

link:
http://www.andy-man.nl/php/rentafriend/

css

Cascading Stylesheet:

#navigation {
  width: 600px;
  margin: 0px auto;
  padding-top:110px;
  padding-left: 220px;
}

#navigation a {
  color: #FFF;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  width: 120px;
  height: 30px;
  display: block;
  font: 10px/30px Verdana, Arial, Helvetica, sans-serif
}

#navigation ul {
  list-style-type: none;
}

#navigation ul li {
  display: block;
  width: auto;
  float: left;
}

#navigation ul li ul {
  position: absolute;
  display: none;
  clear: both;
  width: 120px;
    padding-right: 4px;
    padding-bottom: 4px;
    padding-left: 2px;
    margin-left: -2px;
    background: url(../images/header/menu_shadow.png) bottom right;
    z-index: 20;
}

#navigation ul li:hover, #navigation ul li.hover {
  background: url(../images/header/menu_tab.gif) no-repeat top;
}

#navigation ul li:hover ul, #navigation ul li.hover ul {
  display: block;
    border-top: 1px solid #FFF
}

#navigation ul li ul li {
  float: none;
  background: #390;
    border-right: 1px solid #F1F1EE;
    border-left: 1px solid #FFF;
}

#navigation ul li ul li a {
  width: auto;
  height: 20px;
  display: block;
  background: #FAFAF9 url(../images/header/menu_option_hover.gif) no-repeat top;
  line-height: 20px;
  color: #555;
  text-transform: none;
  text-align: left;
  padding: 1px 10px 1px 10px;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #F1F1EE;
}

#navigation ul li ul li a:hover {
  background: #FAFAF9 url(../images/header/menu_option.gif) no-repeat bottom;
    color: #039;
    border-top: 1px solid #F1F1EE;
    border-bottom: 1px solid #FFF;
    padding-left: 11px;
}
        

IE6.css aanroepen

HTML:

    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" media="screen" href="styles/IE6.css" /> 
    <![endif]-->

ie6.css

Cascading Stylesheet:

/* Hacks for IE 5.5 & IE6  */

#navigation ul li ul {
  background: none;
    padding: 0px;
    border: 1px solid #DEDEDD;
    width: 118px;
    margin-left: 0px;
}




#navigation a:hover {
  background: url(../images/header/menu_tab_hover.gif) no-repeat top;
}

HTML

HTML:

<div id="navigation">
  <ul>
    <li><a href="#">home</a>
    </li>
    <li><a href="#">mijn profiel</a>
      <ul>
        <li><a href="#">Profiel pagina</a></li>
        <li><a href="#">wijzig profiel</a></li>
      </ul>
    </li>
    <li><a href="#">zoeken</a>
      <ul>
        <li><a href="#">Alle</a></li>
        <li><a href="#">specifiek</a></li>
      </ul>
    </li>
    <li><a href="#">faq</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</div>
</div>

heeft iemand enig idee?

[crisp]

Je weet dat IE6 enkel :hover ondersteund op A-elementen en dat je dus een workaround moet implementeren voor dit soort dingen:

Cascading Stylesheet:

#navigation ul li:hover, #navigation ul li.hover {
  background: url(../images/header/menu_tab.gif) no-repeat top;
}

#navigation ul li:hover ul, #navigation ul li.hover ul {
  display: block;
    border-top: 1px solid #FFF
}

check bijvoorbeeld Clay's whatever:hover eens

Overigens ben ik persoonlijk geen fan van pure CSS menu's omdat ik van mening ben dat behavior geen taak is van CSS.

[DNA_Saint]

thnx...ik zal er even mee experimenteren.
maar ondanks dat IE6 niet andere :hovers ondersteund, snap ik nog niet waarom die ineens dubbele header maakt. Want die li:hover is voor achtergrond plaatje.
En die heb ik nu wel gefixed.

[crisp]

DNA_Saint schreef op donderdag 05 april 2007 @ 12:53:
thnx...ik zal er even mee experimenteren.
maar ondanks dat IE6 niet andere :hovers ondersteund, snap ik nog niet waarom die ineens dubbele header maakt. Want die li:hover is voor achtergrond plaatje.

Nee, die tweede li:hover is voor het zichtbaar maken van het submenu (dat werkt nu ook niet).

Overigens sluit ik niet uit dat je nog tegen andere IE6-brakheid aanloopt hoor, da's immers geen zeldzaamheid

edit: die dubbele header is een hasLayout rendering issue, op te lossen door dit toe te voegen:

Cascading Stylesheet:

#navigation ul {
    width: 100%;
}

[ Voor 15% gewijzigd door crisp op 05-04-2007 12:59 ]

[DNA_Saint]

aaah
thnx! en nu kan ik zeker ff aan de slag met die site van jou

hartelijk dank!