28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous

je travaille sur un thème Dotclear. J'ai un problème au niveau de mon menu je souhaite mettre une bordure haut à mes éléments de liste li. Cela fonctionne bien sous Firefox mais pas sous IE (seul les bodures de la liste categories s'affichent).
Si quelqu'un a une idée d'ou vient le problème ?

Voici mon code pour le template.php


<div id="categories">
		<?php dcCatList(); ?>
	</div>
	<div id="menuSeparateur"></div>
	
	<div id="links">
		<?php dcBlogroll::linkList(); ?>
	</div>
	<div id="menuSeparateur2"></div>
	<div id="syndicate">
	
	<ul>
		<li><a href="<?php dcInfo('rss'); ?>">fil rss</a></li>
		<li><a href="<?php dcInfo('rss'); ?>?type=co">fil rss commentaires</a></li>
		<li><a href="<?php dcInfo('atom'); ?>">fil atom</a></li>
		<li><a href="<?php dcInfo('atom'); ?>?type=co">fil atom commentaires</a></li>
	</ul>
	
	</div>


et pour le style.css


#categories {
margin-left: 47px; 
width: 273px; 
background:#333333;


}
#categories ul {
margin: 0px; 
border-top: 2px solid #FFF; 
}

#categories li {
margin: 0px; 
padding-top:2px;
padding-bottom:2px;
border-top: 1px solid #FFF; 
font-size:14px;
}

#categories li a{
color:#FFF;
text-decoration:none ; /* supprime le soulignement des liens */ 
display:block ; /* Crée un retour à la ligne à la fin de chaque bouton */ 
margin-top:0px ; /* Crée un marge en haut des boutons */ 
padding-top:2px;
padding-bottom:2px;
text-align:right; /* aligne le texte de chaque bouton */ 
width:272px ; /* fixe la largeur de chaque bouton*/ 
border-style:ridge ; /* défini le style de l'encadrement des boutons */ 
border-width:0px ; /* fixe la largeur de l'encadrement des boutons*/ 
margin-left:-20px;} /* défini la marge intérieur des boutons */

#categories li a:hover {color:#FFFFFF ; /* change la couleur de la police lors du survol par la souris */ 
padding-top:2px;
padding-bottom:2px;
background-color:#000 ;
margin-left:0px } /* change la couleur du fonds lors du survol par la souris */ 

#links {

margin-left: 47px; 
width: 273px; 
background:#333333;
position:relative;
}

#links li {
margin: 0px; 
padding-top:2px;
padding-bottom:2px;
border-top: 1px solid #FFF; 
font-size:14px;
}

#links li a{
color:#FFF;
text-decoration:none ; /* supprime le soulignement des liens */ 
display:block ; /* Crée un retour à la ligne à la fin de chaque bouton */ 
margin-top:0px ; /* Crée un marge en haut des boutons */ 
padding-top:2px;
padding-bottom:2px;
text-align:right; /* aligne le texte de chaque bouton */ 
width:272px ; /* fixe la largeur de chaque bouton*/ 
border-style:ridge ; /* défini le style de l'encadrement des boutons */ 
border-width:0px ; /* fixe la largeur de l'encadrement des boutons*/ 
margin-left:-20px;} /* défini la marge intérieur des boutons */

#links li a:hover {color:#FFFFFF ; /* change la couleur de la police lors du survol par la souris */ 
padding-top:2px;
padding-bottom:2px;
background-color:#000 ;
margin-left:0px } /* change la couleur du fonds lors du survol par la souris */ 

#syndicate {

margin-left: 47px; 
width: 273px; 
background:#333333;
position:relative;
}

#syndicate li {
margin: 0px; 
padding-top:2px;
padding-bottom:2px;
border-top: 1px solid #FFF; 
font-size:14px;
}

#syndicate li a{
color:#FFF;
text-decoration:none ; /* supprime le soulignement des liens */ 
display:block ; /* Crée un retour à la ligne à la fin de chaque bouton */ 
margin-top:0px ; /* Crée un marge en haut des boutons */ 
padding-top:2px;
padding-bottom:2px;
text-align:right; /* aligne le texte de chaque bouton */ 
width:272px ; /* fixe la largeur de chaque bouton*/ 
border-style:ridge ; /* défini le style de l'encadrement des boutons */ 
border-width:0px ; /* fixe la largeur de l'encadrement des boutons*/ 
margin-left:-20px;} /* défini la marge intérieur des boutons */

#syndicate li a:hover {color:#FFFFFF ; /* change la couleur de la police lors du survol par la souris */ 
padding-top:2px;
padding-bottom:2px;
background-color:#000 ;
margin-left:0px } /* change la couleur du fonds lors du survol par la souris */ 
#menuSeparateur { 
border-top: 1px solid #FFF; 
border-bottom: 2px solid #FFF; 
margin-left: 47px; 
width: 273px; 
height:60px;
background: #000 url(img/members.jpg) no-repeat top; 
} 
#menuSeparateur2 { 
border-top: 1px solid #FFF; 
border-bottom: 2px solid #FFF; 
margin-left: 47px; 
width: 273px; 
height:60px;
background: #000 url(img/syndicate.jpg) no-repeat top; 
} 


Merci pour votre aide
++
Modifié par tom_sawyer (01 Feb 2006 - 17:22)
Je crois que tu devrais poster l'adresse de ton site, on pourrait comprendre le probleme plus "visuellement" Smiley cligne

AMHA tout est dans le choix de tes margin ou padding. Essaies de jouer avec ça et tu trouveras certainement la solution
Merci pour ta réponse Jules-

Je viens de résoudre le problème en essayant de mettre quelquechose en ligne Smiley smile

Le souci venait de position:relative; que j'ai supprimé, depuis tout marche nickel !
Résolu donc, merci Smiley cligne