28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous et toutes

Jeune padawan du CSS, j'ai un problème dans la gestion de mon menu principale sous IE 8. En effet celui-ci apparaît parfaitement sous FF et sous Chrome mais se décale vers le haut sous IE8.
En faisant un peu de recherche sur le forum je me dit que peut-être quelques lignes de CSS spécifique IE sont utiles mais lesquelles?? Smiley eek

Ci-après le Code CSS de mes liens

/* Menu */

#primary-menu {
  float: left;
  width: 990px;
  margin:0 5px;
  padding: 0;
  height: 50px;
  background: url(images/top-header.jpg) no-repeat left top;
}

#primary-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

#primary-menu a {
  display: block;
  background-color:tranparent;
  margin: 0;
  padding: 18px 24px 0 24px;
  text-decoration: none;
  text-transform: capitalize;
  background: url(images/vertical.jpg) no-repeat right top;
  color: #FFFFFF;
  height: 32px;
}

#primary-menu li {
  position: relative; 
  float:left; 
  list-style:none;
  display: inline;
  padding:0px;
  margin:0px;
  width:auto;
}

#primary-menu ul ul {
  position: absolute;
  z-index: 500;
}

#primary-menu ul ul ul,
#primary-menu ul ul ul ul {
  position: absolute;
  top: 0;
  left: 100%;
}

#primary-menu ul ul,
#primary-menu ul li:hover ul ul,
#primary-menu ul ul li:hover ul ul,
#primary-menu ul ul ul li:hover ul ul {
  display: none;
}

#primary-menu ul li:hover ul,
#primary-menu ul ul li:hover ul,
#primary-menu ul ul ul li:hover ul,
#primary-menu ul ul ul ul li:hover ul {
  display: block;
  width:156px;
}

#primary-menu ul li ul li {
  background:transparent url(images/top-header.jpg) no-repeat scroll center center;
  border-bottom: 1px solid #FFF;
  float: left;
  padding-left:10px;
  padding-top:3px;
  position:relative;
  width:100%;
}

#primary-menu ul li ul li.last {
  border-bottom: none;
  background:transparent url(images/top-header2.jpg) no-repeat scroll center right;
}

#primary-menu ul li ul li a,
#primary-menu ul li ul li a:link,
#primary-menu ul li ul li a:visited {
  background: transparent;
  padding: 4px 0;
}
#primary-menu ul li ul li ul {
  margin: 0 0 0 1px;
}

#primary-menu .current_page_item a {
  color: #FFFFFF;
}

#secondary-menu {
  float:right;
  padding:0px;
  margin:5px 5px 0px 0px;
}


Par avance merci
Désolée: ci-après le code html:


    <div id="wrapper">
      <div id="container" class="clear-block">
        <!-- start header -->
        <div id="header">
          <div id="header_logo">
                          <div id="secondary-menu">
                <ul class="links secondary-links"><li class="menu-231 first last"><a href="/internet/?q=node/47" title="Mentions légales">Mentions légales</a></li>
</ul>              </div>
                        <h1><a href="/internet/" title=""><img src="/internet/sites/default/files/artsy_logo.gif" alt="" id="logo"></a></h1>          </div>
          <div id="primary-menu">
                          <ul class="menu"><li class="leaf first active-trail"><a href="/internet/?q=node/60" title="page-accueil" class="active">Accueil</a></li>
<li class="expanded"><a href="/internet/?q=node/4" title="Découvrir l'hôpital">Présentation</a><ul class="menu"><li class="leaf first"><a href="/internet/?q=node/5" title="Historique">Historique</a></li>
<li class="leaf"><a href="/internet/?q=node/20" title="Organisation">Organisation</a></li>
<li class="leaf"><a href="/internet/?q=node/21" title="Chiffres clés">Chiffres clés</a></li>
<li class="leaf"><a href="/internet/?q=node/7" title="Le personnel hospitalier">Personnel hospitalier</a></li>
<li class="leaf last"><a href="/internet/?q=node/68" title="Partenaires">Partenaires</a></li>
</ul></li>
<li class="expanded"><a href="/internet/?q=node/8" title="Patients et Visiteurs">Patients et Visiteurs</a><ul class="menu"><li class="expanded first"><a href="/internet/?q=node/9" title="Patients">Patients</a><ul class="menu"><li class="leaf first"><a href="/internet/?q=node/10" title="Votre admission">Votre admission</a></li>
<li class="leaf"><a href="/internet/?q=node/11" title="Votre séjour">Votre séjour</a></li>
<li class="leaf"><a href="/internet/?q=node/12" title="Votre départ">Votre départ</a></li>
<li class="leaf last"><a href="/internet/?q=node/13" title="Droits du patient hospitalisé">Droit du patient hospitalisé</a></li>
</ul></li>
<li class="leaf last"><a href="/internet/?q=node/16" title="Visiteurs">Visiteurs</a></li>
</ul></li>
<li class="leaf"><a href="/internet/?q=node/26" title="Professionnels de santé">Professionnels</a></li>
<li class="expanded"><a href="/internet/?q=node/24" title="Recrutement">Recrutement</a><ul class="menu"><li class="leaf first"><a href="/internet/?q=node/61" title="IFSI">IFAS/IFSI</a></li>
<li class="leaf last"><a href="/internet/?q=node/62" title="Internes">Internes</a></li>
</ul></li>
<li class="leaf"><a href="/internet/?q=node/25" title="Marchés publics">Marchés publics</a></li>
<li class="leaf last"><a href="/internet/?q=node/39" title="Faire un don">Faire un don, legs</a></li>
</ul>                      </div>
        </div>
        <!-- end header -->

        <!-- start page -->
        <div id="page">
                      <div id="sidebar-left" class="sidebar">
                            <div id="block-block-11" class="clear-block block block-block">


  <div class="content"><p>
	<a href="?q=node/66"><img alt="" src="sites/default/files/bouton/block-accueil/block-header-venir-urgence.png" style="width: 220px; height: 40px;"></a></p>
</div>
</div>
<div id="block-block-6" class="clear-block block block-block">


  <div class="content"><p align="left">
	<img alt="" src="sites/default/files/bouton/block-accueil/block-header-services.png" style="width: 220px; height: 40px;"></p>
<p align="left">
	<a href="?q=node/34"><span style="font-family: verdana,arial,sans-serif;"><img alt="" src="sites/default/files/bouton/btn-pole/btn-pole-urgences.png" style="width: 19px; height: 18px; float: left;">Pôle accueil et hospitalisation d'urgence</span></a></p>
<p align="left">
	<span style="font-family: verdana,geneva,sans-serif;"><a href="?q=node/27"><img alt="" src="sites/default/files/bouton/btn-pole/btn-pole-femmes.png" style="width: 19px; height: 18px; float: left;">Pôle femmes et enfants</a></span></p>
<p align="left">
	<span align="left" style="font-family: verdana,geneva,sans-serif;"><a href="?q=node/30"><img alt="" src="sites/default/files/bouton/btn-pole/btn-pole-chir.png" style="width: 19px; height: 18px; float: left;">Pôle chirurgie-anesthésie</a></span></p>
<p align="left">
	<span align="left" style="font-family: verdana,geneva,sans-serif;"><a href="?q=node/33"><img alt="" src="sites/default/files/bouton/btn-pole/btn-pole-medecine.png" style="width: 19px; height: 18px; float: left;">Pôle médecine</a></span></p>
<p align="left">
	<span align="left" style="font-family: verdana,geneva,sans-serif;"><a href="?q=node/31"><img alt="" src="sites/default/files/bouton/btn-pole/btn-pole-consult.png" style="width: 19px; height: 18px; float: left;">Pôle consultations, explorations et diagnostics</a></span></p>
<p align="left">
	<span align="left" style="font-family: verdana,geneva,sans-serif;"><a href="?q=node/28"><img alt="" src="sites/default/files/bouton/btn-pole/btn-pole-psy.png" style="width: 19px; height: 18px; float: left;">Pôle psychiatrie générale et infanto-juvénile</a></span></p>
<p align="left">
	<span align="left" style="font-family: verdana,geneva,sans-serif;"><a href="?q=node/29"><img alt="" src="sites/default/files/bouton/btn-pole/btn-pole-ehpad.png" style="width: 19px; height: 18px; float: left;">Filière gériatrique</a></span></p>
</div>
</div>
<div id="block-block-7" class="clear-block block block-block">


  <div class="content"><p align="left">
	<img alt="" src="sites/default/files/bouton/block-accueil/block-header-act-trans.png" style="width: 220px; height: 40px;"></p>
<p align="left">
	<img alt="" src="sites/default/files/logo-soleil.jpg" style="width: 10px; height: 10px;"> Politique Qualité</p>
<p align="left">
	<img alt="" src="sites/default/files/logo-soleil.jpg" style="width: 10px; height: 10px;"> <a href="?q=node/46">Lutte contre la douleur</a></p>
<p align="left">
	<a href="?q=node/63"><img alt="" src="sites/default/files/logo-soleil.jpg" style="width: 10px; height: 10px;"> Prélèvements et greffes</a></p>
<p align="left">
	<img alt="" src="sites/default/files/logo-soleil.jpg" style="width: 10px; height: 10px;"> <a href="?q=node/45">Hygiène hospitalière</a></p>
<p align="left">
	<img alt="" src="sites/default/files/logo-soleil.jpg" style="width: 10px; height: 10px;"> <a href="?q=node/41">Communication</a></p>
</div>
</div>
            </div>
                    <!-- start content -->
          <div id="content">
            <div id="center">
                                                                <h2>Accueil</h2>                                                                                <div class="clear-block">
                  <div id="node-60" class="node">



  
  <div class="content clear-block">
    <p>
	<object data="/internet/sites/default/files/carousel_gallery/banner.swf" id="BannerDiv" style="visibility: visible;" type="application/x-shockwave-flash" width="514" height="320"> <param name="scale" value="noscale"> <param name="salign" value="tl"> <param name="wmode" value="transparent"> <param name="flashvars" value="settingsXML=/internet/sites/default/files/carousel_gallery/banner_settings.xml"> </object></p>
<div id="BannerDiv">
	<div style="text-align: center;">
		&nbsp;</div>
</div>
<p class="rtecenter">
	<img alt="" src="sites/default/files/photos/etablissements/sous-titre.png" style="width: 328px; height: 126px;"></p>
  </div>

  <div class="clear-block">
    <div class="meta">
        </div>

      </div>

</div>
                </div>
                            </div> <!-- /#center -->
          </div>
          <!-- end content -->
          <!-- start sidebars -->
                      <div id="sidebar-right" class="sidebar">
              <div id="block-block-2" class="clear-block block block-block">


  <div class="content"><h4>
	<img alt="" src="sites/default/files/bouton/block-accueil/block-header-contact.png" style="width: 220px; height: 40px;"></h4>
<p align="left">
	<strong><img alt="" src="sites/default/files/bouton/telephone.png" style="width: 16px; height: 16px; float: left;">Romans: </strong>04 75 05 75 05</p>
<p align="left">
	<strong><img alt="" src="sites/default/files/bouton/telephone.png" style="width: 16px; height: 16px; float: left;">Saint-Vallier</strong>: 04 75 23 80 00</p>
<p align="left">
	<a href="?q=contact">Envoyer un message</a></p>
<h4>
	<a href="?q=node/23"><img alt="" src="sites/default/files/bouton/btn-carte.png" style="width: 25px; height: 25px;">Venir aux HDN</a></h4>
</div>
</div>
<div id="block-block-1" class="clear-block block block-block">


  <div class="content"><p>
	<img alt="" src="sites/default/files/bouton/block-accueil/block-header-numero.png" style="width: 220px; height: 40px;"></p>
<p>
	<a href="?q=node/14">Site de Romans</a></p>
<p>
	<a href="?q=node/15">Site de Saint-Vallier</a></p>
</div>
</div>
<div id="block-block-3" class="clear-block block block-block">


  <div class="content"><p>
	<img alt="" src="sites/default/files/bouton/block-accueil/block-header-consult.png" style="width: 220px; height: 40px;"></p>
<p>
	<a href="?q=node/64">Toutes les consultations</a></p>
<p>
	<a href="sites/default/files/plaquette-consultations-fevrier-2011.pdf" target="_blank">Jours et contacts - <img alt="" src="sites/default/files/bouton/spw_logo_pdf.png" style="width: 16px; height: 16px;">pdf</a></p>
<p>
	<a href="?q=node/67">Les documents à fournir</a></p>
</div>
</div>
<div id="block-block-9" class="clear-block block block-block">


  <div class="content"><p>
	<a href="?q=node/48"><img alt="" src="sites/default/files/bouton/block-accueil/block-header-actualite.png" style="width: 220px; height: 40px;"></a></p>
<p>
	<img alt="" src="sites/default/files/bouton/btn-news.gif" style="width: 58px; height: 12px;"></p>
<p>
	<a href="?q=node/48">Une compagnie de théâtre aux HDN</a></p>
<p>
	<a href="?q=node/48">Cérémonie des voeux</a></p>
<p>
	<a href="?q=node/48">Travaux: début des travaux de rénovation des consultations</a></p>
</div>
</div>
<div id="block-search-0" class="clear-block block block-search">


  <div class="content"><form action="/internet/" accept-charset="UTF-8" method="post" id="search-block-form">
<div><div class="container-inline">
  <div class="form-item" id="edit-search-block-form-1-wrapper">
 <label for="edit-search-block-form-1">Chercher dans ce site&nbsp;: </label>
 <input maxlength="128" name="search_block_form" id="edit-search-block-form-1" size="15" value="" title="Saisissez les termes que vous voulez rechercher." class="form-text" type="text">
</div>
<input name="op" id="edit-submit" value="Recherche" class="form-submit" type="submit">
<input name="form_build_id" id="form-33833f73e136c4cd2703fe31d1188635" value="form-33833f73e136c4cd2703fe31d1188635" type="hidden">
<input name="form_id" id="edit-search-block-form" value="search_block_form" type="hidden">
</div>

</div></form>
</div>
</div>
            </div>
                    <!-- end sidebars -->
          <div style="clear: both;">&nbsp;</div>
        </div>
        <!-- end page -->
        <div id="footer">
          <p class="footer_message">
            </p><p>
	- Copyright © 2010 - xxx</p>
<p>
	xxx</p>
          
                  </div>
      </div> <!-- /container -->
    </div>

Modifié par marine26 (07 Mar 2011 - 12:20)
Bonjour, avec une page en ligne, il serait plus facile de constater le problème... Là, pas évident en lisant ton code de deviner le bug. En plus, on a pas tout le css... Bref, tu aurais plus de chance que quelqu'un puisse t'aider. Smiley smile
Désolée mais je travaille encore sur serveur interne. Le site n'est pas en ligne.
Mais je peux mettre le CSS complet. En tout cas merci de te pencher sur mon problème.

/* $Id: style.css,v 1.3 2009/08/17 08:40:53 cignex Exp $ */

body {
  margin-top: 50px;
  padding: 0;
  text-align: justify;
  font-family: Verdana, Arial, sans-serif; 
  font-size: 12px;
  color: #616161;
}

body.mainbody {
  background: #999087;
  /*background-image:url(/internet/themes/artsy/images/bg_rounds.gif);
  background-repeat:no-repeat;*/

  
}

h1, h2, h3 {
  margin-top: 0;
  color: #519524;
}

h1 {
  font-size: 1.6em;
  font-weight: normal;
}

h2 {
  font-size: 1.4em;
  font-weight: normal;
}

h3 {
  font-size: 1em;
}

ul {
}

a {
  text-decoration: none;
  color: #616161;
}

a:hover {
  border-bottom: none;
  color: #519524;
}

a img {
  border: none;
}

img.left {
  float: left;
  margin: 0 20px 0 0;
}

img.right {
  float: right;
  margin: 0 0 0 20px;
}

table {
  margin: 1em 0;
  width: 100%;
}

#header {
  width: 1000px;
  margin: 0 auto;
  height: 150px;
  background: #FFFAFA url(images/top-header.jpg) repeat-x left top;
}

/* Header */

#header_logo {
  height: 100px;
  margin: 0 auto;
  padding: 0 10px 0 70px;
  background: url(images/header.jpg) no-repeat left top;
}

#header_logo h1, #header_logo p {
  float: left;
  margin: 0;
  color: #AACE5A;
}

#header_logo span {
 /* color: #000000;
  float:left;*/
  font-size: 2em;
  margin-top:15px;
  margin-right:10px;
}

#header_logo #logo {
  float:left;
}

#header_logo h1 {
  padding: 30px 0 0 0;
  letter-spacing: -1px;
  text-transform: lowercase;
  font-weight: normal;
}

#header_logo p {
  text-transform: uppercase;
  padding: 47px 0 0 3px;
  font-size: 10px;
  color: #110E0F;
}

#header_logo a {
  border: none;
  text-decoration: none;
  color: #519524;
}

/* Menu */

#primary-menu {
  float: left;
  width: 990px;
  margin:0 5px;
  padding: 0;
  height: 50px;
  background: url(images/top-header.jpg) no-repeat left top;
}

#primary-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

#primary-menu a {
  display: block;
  background-color:tranparent;
  margin: 0;
  padding: 18px 24px 0 24px;
  text-decoration: none;
  text-transform: capitalize;
  background: url(images/vertical.jpg) no-repeat right top;
  color: #FFFFFF;
  height: 32px;
}

#primary-menu li {
  position: relative; 
  float:left; 
  list-style:none;
  display: inline;
  padding:0px;
  margin:0px;
  width:auto;
}

#primary-menu ul ul {
  position: absolute;
  z-index: 500;
}

#primary-menu ul ul ul,
#primary-menu ul ul ul ul {
  position: absolute;
  top: 0;
  left: 100%;
}

#primary-menu ul ul,
#primary-menu ul li:hover ul ul,
#primary-menu ul ul li:hover ul ul,
#primary-menu ul ul ul li:hover ul ul {
  display: none;
}

#primary-menu ul li:hover ul,
#primary-menu ul ul li:hover ul,
#primary-menu ul ul ul li:hover ul,
#primary-menu ul ul ul ul li:hover ul {
  display: block;
  width:156px;
}

#primary-menu ul li ul li {
  background:transparent url(images/top-header.jpg) no-repeat scroll center center;
  border-bottom: 1px solid #FFF;
  float: left;
  padding-left:10px;
  padding-top:3px;
  position:relative;
  width:100%;
}

#primary-menu ul li ul li.last {
  border-bottom: none;
  background:transparent url(images/top-header2.jpg) no-repeat scroll center right;
}

#primary-menu ul li ul li a,
#primary-menu ul li ul li a:link,
#primary-menu ul li ul li a:visited {
  background: transparent;
  padding: 4px 0;
}
#primary-menu ul li ul li ul {
  margin: 0 0 0 1px;
}

#primary-menu .current_page_item a {
  color: #FFFFFF;
}

#secondary-menu {
  float:right;
  padding:0px;
  margin:5px 5px 0px 0px;
}
/* Wrapper */

#wrapper {
  width: 1000px;
  margin: 0 auto;
}

/* Page */

#page {
  padding: 20px 5px;
  background: #FFFFFF;
}

/* Content */

#content {
  float: left;
  width: 970px;
  padding:0px 10px;
}

.sidebars #content {
  width:525px;
}

.sidebar-left #content,
.sidebar-right #content {
  width:750px;
}

/* Sidebars */

#sidebar-left {
  float: left;
}

#sidebar-right {
  float: right;

}

.sidebar {
  float: left;
  width: 220px;
  padding: 0;
  font-size: 12px;
}

.sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar li {
  padding: 0 0 20px 0;
}

.sidebar ul.menu li {
  margin: 0 20px 0 15px;
  padding: 8px 0px;
  border-bottom: 1px #BBBBBB dashed;
}

.sidebar ul.menu .expanded li.last {
  border:none;
  padding-bottom:0;
}

.sidebar h2 {
  height: 30px;
  margin: 0 0 0 0;
  padding: 10px 15px 0px 15px;
  background: #519524 url(images/block-header.jpg) no-repeat left top;
  letter-spacing: 1px;
  font-size: 14px;
  color: #FFFFFF;
}

#wrapper #container .sidebar .block {
  margin: 0 0 1.5em 0;
}

.block .content {
  margin: 0.5em 0;
}

.block-region {
  padding: 1em;
  background: transparent;
  border: 2px dashed #b4d7f0;
  text-align: center;
  font-size: 1.3em;
}

/* Footer */

#footer {
  width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  background: #FFFFFF url(images/footer.jpg) no-repeat left bottom;
}

#footer p {
  margin: 0;
  padding: 25px 0 0 0;
  text-align: center;
  font-size: smaller;
}

#footer a {
}

#footer .link {
  float: right;
}

#footer .footer_message {
  float: left;
}

#footer ul li {
  display:inline;
}

.form-submit {
  border:none;
  -moz-border-radius-bottomright:10px;
  -moz-border-radius-topleft:10px;
  color:#FFFFFF;
  padding-bottom:2px;
  padding-left:10px;
  padding-right:10px;
  padding-top:2px;
  background-color:#519524;
}

#search-theme-form .container-inline label {
  display:block;
}

/**
 * Nodes & comments
 */
.node {
  border-bottom:1px dashed #BBBBBB;
  margin:0 20px 0 15px;
  padding:8px 0;
}

.node .submitted {
  color:#999999;
}
ul.links li, ul.inline li {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0; /* LTR */
  padding-right: 1em; /* LTR */
  background-image: none;
}

.node .links, .comment .links {
  text-align: left; /* LTR */
}

.comment {
  padding: 1.5em 25px 1.5em;
  border-top: 1px solid #BBBBBB;
}

div.admin .left,
div.admin .right {
  margin:0px;
}

table tr.even {
  background-color:#FFFFFF;
}

/**
 * Generic elements.
 */
.messages {
  background-color: #fff;
  border: 1px solid #b8d3e5;
}

.preview {
  background-color: #fcfce8;
  border: 1px solid #e5e58f;
}

div.status {
  color: #33a333;
  border-color: #c7f2c8;
}

div.error, tr.error {
  color: #519524;
  background-color: #FFCCCC;
}

.form-item input.error, .form-item textarea.error {
  border: 1px solid #519524;
  color: #363636;
}

.messages, .preview {
  margin: .75em 0 .75em;
  padding: .5em 1em;
}

.messages ul {
  margin: 0;
}