28173 sujets

CSS et mise en forme, CSS3

[RESOLU] IE marge et bordure

Bonjour à tous,

J'ai un soucis avec mon CSS sous Internet Explorer.
Quand je met des border autour des éléments, tout est bien définie à l'exeption d'une marge haute sur le deuxième paragraphe (cf image 1).
Maintenant si j'enlève les bordures des éléments, IE me mangent mes marges!!

Le code XHTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <style type="text/css" media="screen">
   @import "../include/screen.css";
  </style>
  <link rel="stylesheet" type="text/css" href="../include/printProgramme.css" media="print"/>
  
  <title>Impression Programme Semaine</title>
  
  </head>

  
  <body>
    
    <div id="global">
    
      <img src="../images/semaine.png" title="programme de la semaine" alt="programme" width="100%" height="100%"/>
    
      <div id="conteneur">
      
        <ul id="main">

<li><dl>
           <dt class="logo"><img src="../images/etoile.png" alt="programme_semaine"/></dt>
           <dt class="titre">Around the table</dt>

           <dt class="sub">Du 20 juin au 8 juillet /<br />From June 20th to July 8th<br /></dt>
           <dd>Exposition au bar<br />Exhibition at the bar</dd>
           </dl></li><li><dl>
           <dt class="logo"><img src="../images/etoile.png" alt="programme_semaine"/></dt>
           <dt class="titre">FIAP non fumeur</dt>
           <dt class="sub">[7-March-2007] This release addresses a bug introduced in 2.6.17 regarding detection of non-cached blocks. Please upgrade from 2.6.17 if you have that version.</dt>

           <dd>test</dd>
           </dl></li><li><dl>
           <dt class="logo"><img src="../images/etoile.png" alt="programme_semaine"/></dt>
           <dt class="titre">Discotheque</dt>
           <dt class="sub">Tous les Mardi, Jeudi, Samedi /<br />Every Tuesday, Thursday, Saturday </dt>
           <dd>Salle Oslo de 21h a 0h /<br />Oslo Room from 9pm to 12am<br /></dd>

           </dl></li><li><dl>
           <dt class="logo"><img src="../images/etoile.png" alt="programme_semaine"/></dt>
           <dt class="titre">Atelier de langue</dt>
           <dt class="sub">Mardi 26 juin, 20h salle Londres /<br />Tuesday, June 26th at 8pm, Londres room</dt>
           <dd>Cours d'H&eacute;breu et d'arabe /<br />Hebrew and Arabic lessons<br /></dd>
           </dl></li><li><dl>

           <dt class="logo"><img src="../images/etoile.png" alt="programme_semaine"/></dt>
           <dt class="titre">Expo LSU</dt>
           <dt class="sub">Du 27 au 30 juin, 1er &eacute;tage /<br />From 27th to 30th of June</dt>
           <dd>Ouverture le mercredi 27 juin &agrave; 17h /<br />Opening on Wednesday, June 27th at 5pm</dd>
           </dl></li><li><dl>

           <dt class="logo"><img src="../images/etoile.png" alt="programme_semaine"/></dt>
           <dt class="titre">Soirée Univ de Louisiane</dt>
           <dt class="sub"></dt>
           <dd></dd>
           </dl></li><li><dl>
           <dt class="logo"><img src="../images/etoile.png" alt="programme_semaine"/></dt>
           <dt class="titre">Concert de Jazz</dt>
           <dt class="sub">fdfgdfgddedgegegvzegv</dt>

           <dd>dfgefgzegzeggherherherher</dd>
           </dl></li>
          
        </ul>
      
      </div>      
        
    </div>
    
  </body>
  
</html>


Et le CSS :

/* programme_semaine PRINT */

body
{
   background-color : #fff; /* Couleur d'arrière plan */
   margin : 0px; /* suppression des marges */
}


#global
{
   position : relative;
   width: 20.99cm; /* Impression format A4 */
   height: 29.1cm;
}

#conteneur
{
   position : absolute;
   left : 30%; /* Position du block "conteneur" */
   top : 20%;
   width : 50%; /* hauteur, largeur et marges */
   height : 75%;
}


ul#main
{ 
   display : block;
   list-style-type : none; /* Suppression des puces par défaut */
   margin : 0px;
   padding : 0px;
}


li
{
   display : block;
   font-family: verdana, times,serif; /* Polices par défaut */
   text-align : justify; /* position du texte Justifié */
   padding-left : 25px; /* Marge pour le logo */
   float : left; /* Nécessaire sinon bug sous IE */
}

dl,dt,dd{/* suppression des marges */
margin : 0px;
padding: 0px;
/*border : 1px solid green;*/
}

.titre /* Titre de l'événement */
{
   display : block;
   font-weight: bold ; /* style du texte : gras */
   font-size: 1.5em; /* Taille du Texte */
   line-height : 0.7em; /* Hauteur des lignes */
   font-family: "Myriad Pro"; /* Police du titre */
   margin-bottom : 5px;
}


.sub /* Date de l'événement */
{
   display : block;
   font-size: 1.1em;
   font-style : italic;
   line-height : 0.9em;
   font-family: "Nueva Std"; /* Police de la date */
   margin-bottom : 5px;;
}


.logo {
   display : block;
   float : left; /* mettre le titre à droite du logo */
   margin-left : -26px; /* mettre le logo en "avant" */
   padding-right : 6px; /* mettre un espace entre le logo et le titre */
}

dd
{
   display : block;
   margin-left : 20px; /* marqué une différence par rapport a "titre" et "sub" */
   font-size: 1em;
   line-height : 0.9em;
   font-family: "Nueva Std"; /* Police du descriptif */
   margin-bottom : 25px;
}


Le border se trouve au niveau de la définition des styles pour dl,dt,dd.
avec_bordure
sans_bordure
Quelqu'un peut-il venir à mon secours ?

Merci par avance, Greg.
Modifié par Furious-Candy (19 Jul 2007 - 10:43)
Bon et bien problème résolu ...
Dans le media Print IE supprime les marges des éléments dd qui étaient contenus dans mon li ( et dl par conséquence). J'ai donc mis la marge inférieur sur l'élément li pour régler le problème. Mais je ne vois toujours pas pourquoi IE à réagit comme ça.

Merci quand même, je met en RESOLU.

Grégoire.
Sujet clos
Aller à