28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un souci de superposition de menu avec IE6 et consort. Les secondary-links passent dessous alors que sous Firefox ils sont chassés sous le dessous comme je le voudrais.

Voici le code :

ul.primary-links {
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: -1px;
  right: 0;
  list-style: none;
}
ul.primary-links li {
  margin: 0;
  padding: 0;
  display: inline;
  float: left;
  margin: 0 0.2em 1px;
  background: url(images/bg-header-tab-left.gif) no-repeat left top;
}
ul.primary-links li.active {
  background: url(images/bg-header-tab-left-active.gif) no-repeat left top;
}
ul.primary-links li span, ul.primary-links li span {
  margin: 0;
  padding: 0;
  display: block;	
  float: left;
  background: url(images/bg-header-tab-right.gif) no-repeat right top;
}
ul.primary-links li span a:link, ul.primary-links li span a:visited  {
  margin: 0;
  color: #fff;
  background: transparent url(images/bg-header.gif) repeat-x left bottom; 
  display: block;
  padding: 0.2em 0.9em;
  font-weight: bold;
  float: left;
}
ul.primary-links li span a:hover {
  color: #9cc32a;
  text-decoration: none;
}
ul.primary-links li.active span, #header ul.primary-links li.active span {
  background: url(images/bg-header-tab-right-active.gif) no-repeat right top;
  color: #555;
}
ul.primary-links li.active a:active, #header ul.primary-links li.active a.active, #header ul.primary-links li.active a {
  color: #4c4f53;
  background: url(images/bg-header-tab-bottom-active.gif) repeat-x left bottom;
}
/* --------------------------------- */
ul.secondary-links {
  float: right;
}

ul.secondary-links li {
  margin: 0;
  padding: 0;
  display: inline;
  background: transparent;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  list-style: none;
}

ul.secondary-links li a:link, ul.secondary-links li a:visited {
 margin: 0;
  padding: 7px 10px 7px 10px;
  display: inline;
  background:#F8F8F8 url(images/bg-block.gif) repeat-x scroll left top;
  border-bottom:1px solid #EEEDED;
  text-decoration: none;
}

ul.secondary-links li a:hover {
  color: #4C4F53;
}

ul.secondary-links .active {
  color: #4C4F53;
}



<ul class="primary-links">
  <li class="active"><span><a href="/liena">Lien A</a></span></li>
  <li><span><a href="/lienb">Lien B</a></span></li>
  <li><span><a href="/lienc">Lien C</a></span></li>
  <li><span><a href="/liend">Lien D</a></span></li>
  <li><span><a href="/liene">Lien E</a></span></li>
</ul>

<ul class="secondary-links">
  <li  class="first"><a href="/lien1">Lien 1</a></li>
  <li  class=""><a href="/lien2">Lien 2</a></li>
  <li  class=""><a href="/lien3">Lien 3</a></li>
  <li  class=""><a href="/lien4">Lien 4</a></li>
  <li  class="last"><a href="/lien5">Lien 5</a></li>
</ul>


Merci de votre aide.