28173 sujets

CSS et mise en forme, CSS3

[Résolu] Marge sous IE

Bonjour,

J'ai encore une fois un problème avec mon design: http://bricosign.free.fr/xeki/

Je me suis rendu compte que sous Firefox tout le contenu est à 7 pixels du bord.
Alors que sous Internet Explorer, le titre (Accueil, et la barre dessous) et les barres au bas de la page sont à 7px du bord. Mais que le reste du contenu (Lorem ipsum dolor sit amet....) est à 10px du bord.

Sur cette page ce n'est pas gênant, mais sur cette page où il y a un tableau: http://bricosign.free.fr/xeki/ajouter.html La marge choque...

J'ai essayé de supprimer une par une les lignes du fichier CSS mais je ne trouve pas d'où vient cette marge de 3px. Le fichier CSS complet est à cette adresse: http://bricosign.free.fr/xeki/css/styles.css

Les parties probablement concerncée:

    <div id="contenu">
     <h2>Accueil</h2>
     <p>Lorem ipsum dolor sit amet, consectetuer <a href="#null">adipiscing</a> elit. Sed vel dui. In purus. Etiam molestie, lacus eu dapibus pellentesque, mauris leo luctus lacus, id sodales elit augue quis risus. Nunc sollicitudin ultricies justo. Aliquam pretium laoreet arcu. Sed posuere posuere risus. Nulla ac pede eu pede vulputate lobortis.</p>
     <p>Lorem ipsum dolor sit amet, <a href="#null">consectetuer</a> adipiscing elit. Sed vel dui. In purus. Etiam molestie, lacus eu dapibus pellentesque, mauris leo luctus lacus, id sodales elit augue quis risus. Nunc sollicitudin ultricies justo. Aliquam pretium laoreet arcu. Sed posuere posuere risus. Nulla ac pede eu pede vulputate lobortis.</p>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing <a href="#null">elit</a>. Sed vel dui. In purus. Etiam molestie, lacus eu dapibus pellentesque, mauris leo luctus lacus, id sodales elit augue quis risus. Nunc sollicitudin ultricies justo. Aliquam pretium laoreet arcu. Sed posuere posuere risus. Nulla ac pede eu pede vulputate lobortis.</p>
     <h3 class="titre_info_barre">Article</h3>
     <ul class="contenu_info_barre">
      <li><a href="#null">Commenter cet article sur le forum</a></li>
      <li><a href="#null">Proposer une modification de cet article</a></li>
     </ul>
     <h3 class="titre_info_barre">Administration</h3>
     <ul class="contenu_info_barre">
      <li><a href="#null">Modifier cet article</a></li>
      <li><a href="#null">Déplacer cet article</a></li>
      <li><a href="#null">Supprimer cet article</a></li>
     </ul>
     <div id="clear"></div>
    </div>


#contenu {
        margin-left: 159px;
	padding: 5px 7px 0px 7px;
	background: #E7E7E7 url(../images/degrade_contenu.gif) repeat-x left top;
	border: 1px solid #8A8A8A;
	border-left: 1px solid #FAFAFA;
	border-top-color: #FAFAFA;
	position: relative;
}
#contenu h2 {
        padding-bottom: 3px;
        margin-bottom: 9px;
	color: #333332;
        font-weight: bold;
        font-size: 1.4em;
	border-bottom: 1px solid #333332;
}
#contenu a.externe {
        color: #3E8D09;
        padding-right: 12px;
	background: url(../images/externe.gif) no-repeat right;
        text-decoration: none;
}
#contenu a.externe:hover, #contenu a.externe:focus {
        text-decoration: underline;
}
#contenu a {
        color: #3D58DD;
        text-decoration: none;
}
#contenu a:hover, #contenu a:focus {
        text-decoration: underline;
}
#contenu p {
	text-align: justify;
	color: #333332;
        font-size: 1em;
        margin-bottom: 8px;
        line-height: 1.4em;
}
#clear {
        clear: both;
}


Merci pour votre aide.

Bonne journée,

Rémi
Modifié par *|~ XiKuXan ~|* (25 Apr 2006 - 14:10)
Ceci est dû au fait que la marge par défaut de l'élément body n'est pas nulle dans nos navigateurs. Il existe deux moyens d'y remédier :

1. positionner le bloc de manière absolue à 0px du haut (top) et 0px du bord gauche (left).
2. définir la marge de l'élément body à éro en insérant la règle body {margin:0px}.

Je te conseil le deuxième point, et par la même occasion, définir, le width et le height du body à 100%
Merci beaucoup, j'ai pris la deuxième solution ça marche à merveille. Smiley smile

Et aussi, est-ce que vous sauriez si c'est possible sur cette page http://bricosign.free.fr/xeki/ajouter.html de faire en sorte que la case à cocher soit centrée verticalement dans la cellule ? Parceque sous Firefox elle est positionnée vers le bas, alors que sous IE elle est centrée verticalement.
*|~ XiKuXan ~|* a écrit :
Et aussi, est-ce que vous sauriez si c'est possible sur cette page http://bricosign.free.fr/xeki/ajouter.html de faire en sorte que la case à cocher soit centrée verticalement dans la cellule ? Parceque sous Firefox elle est positionnée vers le bas, alors que sous IE elle est centrée verticalement.


En fait j'aimerais bien savoir si quelqu'un aurait une solution pour ma deuxième question ? (ou est-ce qu'il faut que je crée un autre sujet pour ça ?)
Oui, vertcal align : middle;

Mozilla aligne le texte et cadre sur la ligne du bas

Pour aligner sur la ligne du milieu, met ce que j'ai mis la haut.

Bonne chance Smiley cligne
line-height: 1em; en faite, c'est l'interligne entre le haut, et la case, si je ne me trompe pas, je pense pas que cela soit bon.
C'est bon, j'ai affiché la source du lien

Tu utilises un tableau, je vois donc pas comment, tu peux mettre le texte au milieu, car ton texte est sur deux lignes...

Sinon essaye avec :
.axe_y td {
vertical-align: middle;
padding-left: 1em;
}
Modifié par yoshimitsu (25 Apr 2006 - 13:33)
Sujet clos
Aller à