28173 sujets

CSS et mise en forme, CSS3

[RESOLU] Liste (dl, dt, dd) : problème d'alinéat

Bonjour à tous Smiley smile .

J'ai un problème avec ma liste. Tout fonctionne parfaitement sous Firefox cependant IE ne l'entend pas de la même manière.
J'ai un désagréable alinéat UNIQUEMENT au niveau du dd ...


Du côté du HTML : 

<ul id="main">
        
          <li>
            <dl>IE & Co</dl>
            <dt>samedi 3 mars 2007 - 20h30</dt>
            <dd>Ce n'est pas un secret : Internet Explorer a la fâcheuse manie d'être très permissif avec le code et pas toujours très respectueux des Standards et des Normes</dd>
         </li>


Voici un bout du CSS :


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

dl
{
   font-weight: bold ;
   font-size: 1.2em;
   line-height : 0.9em;
}


dt
{
   font-size: 0.8em;
   font-style : italic;
   line-height : 0.9em;
}




dd
{
   margin-left : 0px;
   font-size: 0.8em;
   line-height : 0.9em;
}


Merci pour votre aide et je m'excuse auprès des puristes, je débute ...
Modifié par Furious-Candy (17 Jul 2007 - 08:57)
Merci beaucoup Smiley smile j'ai n'avais pas fait attention. Du coup mon problème d'alinéat est réglé. Voici à quoi ressemble mon code désormais

HTML :

         <li><dl>
            <dt class="titre">Nuit Blanche à Montréal</dt>
            <dt class="sub">samedi 3 mars 2007 - 20h30</dt>
            <dd>Ce n'est pas un secret : Internet Explorer a la fâcheuse manie d'être très permissif avec le code et pas toujours très respectueux des Standards et des Normes</dd>
            </dl>
          </li>


CSS :


ul#main
{ 
   display : block;
   list-style-type : none;
   margin : 0px;
   padding : 0px;
}


li
{
   display : block;
   font-family:"times new roman",times,serif;
   text-align : justify;
   background-image : url(../etoile.png);
   background-repeat : no-repeat;
   background-position : left top;
   padding-left : 25px;
   margin-top : 10px;
}

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

.titre
{
   font-weight: bold ;
   font-size: 1.2em;
   line-height : 0.9em;
}


.sub
{
   font-size: 0.8em;
   font-style : italic;
   line-height : 0.9em;
}




dd
{
   margin-left : 0px;
   font-size: 0.8em;
   line-height : 0.8em;
}


Sous Internet Explorer, ma puce (étoile) s'affiche mais j'ai un retour à la ligne juste en dessous .. auriez-vous une idée ?

Merci encore Smiley smile .
Problème résolu. IE considère le background comme un block apparament, il faut donc lui donner une position float:left.
Merci pour ton aide Benjamin D.C.
Sujet clos
Aller à