[Résolu] Différence entre les navigateurs

Question

renato

9 Dec 2008 à 08:13

Bonjour, je souhaite décaler la boite SOMMAIRE et donc celle qui est englobée dedans de 25 px vers le bas.
Si je mets : margin-top: 25px cela fonctionne pour IE et pas pour Opera et Firefox.
Je ne vois pas comment m'en sortir.
Merci pour vos conseils.

Smiley html

<body>
<div id="colonne">
<div id="sommaire">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
</ul>
</div>
</div>
</body>
[/html]

Smiley css

body {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#colonne {
width: 300px;
height: 300px;
background-color: #000066;
}
#sommaire {
width: 250px;
background-color: #11397B;
margin-left: 25px;
margin-top: 25px;
}
#sommaire ul {
margin: 0px;
padding: 0px;
border: 1px solid #8497c2;
list-style-image: none;
list-style-type: square;
}
#sommaire li {
list-style: none;
border: 1px solid #4e698f;
background: #01285f url(images/puce.gif) no-repeat left center;
padding: 0px 0px 0px 20px;
margin: 3px;
}
#sommaire ul a {
color: #B3D7FF;
text-decoration: none;
display: block;
padding: 3px 12px 3px 0px;
}
#sommaire ul a:hover {
color: #FFFFFF;
}

[/css]
Modifié par renato (12 Dec 2008 - 10:38)

koala64

Modérateur

9 Dec 2008 à 08:39

Bonjour renato,

Pourrais-tu éditer ton message précédent afin de mettre les balises [code ]...[/code] (sans espace) en vue d'améliorer la lisibilité du code fourni ?

Merci d'avance. Smiley jap

renato

9 Dec 2008 à 08:43

Euh excuse moi mais je vois pas ce que tu veux dire, car quand je regarde le code du message pour moi il a l'air lisible.

Igor

9 Dec 2008 à 09:46

Bonjour,

renato a écrit :
Euh excuse moi mais je vois pas ce que tu veux dire, car quand je regarde le code du message pour moi il a l'air lisible.

Comment présenter du code sur le forum ?

renato

9 Dec 2008 à 10:13

Bonjour, j'ai résolu mon problème cité plus haut mais j'ai encore un souci.
Pour faire mon menu j'ai transformé mes lignes <li> en block, ça baigne mais j'ai une différence de hauteur pour ces blocks entre IE et les 2 autres (Opera et Firefox).
J'espère que cette fois ci je vais copier le code comme vous le souhaitez.


<body>
<div id="conteneur">

	<!-- Debut COLONNE GAUCHE -->
	<div id="colonne">
    	<div><img src="images/la_goutte.jpg"></div><!-- Imgae de la GOUTTE -->
             <div id="sommaire">
              <ul> 
                <li><a href="#">Item 1</a></li> 
                <li><a href="#">Item 1</a></li> 
                <li><a href="#">Item 1</a></li> 
                <li><a href="#">Item 1</a></li> 
                <li><a href="#">Item 1</a></li> 
                <li><a href="#">Item 1</a></li> 
                <li><a href="#">Item 1</a></li> 
                 <li><a href="#">Item 1</a></li>
                   <li><a href="#">Contact</a></li>
      		  </ul> 
         </div><!-- Fin SOMMAIRE -->
	</div><!-- Fin NAVIGATION GAUCHE -->
</div><!-- Fin du CONTENEUR -->
</body>


body {
	background-image: url(images/fond_gris.gif);
	background-repeat: repeat;
	margin: 0px;
	padding: 0px;
}
#conteneur {
	width: 900px;
	height: 600px;
	background: #FFFFFF;
	position: absolute;
	left: 50%;/*pour l'alignement horizontal*/
    margin-left: -450px;/*Centrer en horizontal la moitie de la LARGEUR du bloc*/
}
#colonne {
	width: 235px;
	background: #11397B;
	position: absolute;
	left: 0px;
	top: 0px;
	margin-top: 20px;
}
#sommaire {
	background-color: #11397B;
	margin-left: 15px;
	margin-right: 15px;
	margin-top: 15px;
	margin-bottom: 15px;
}
#sommaire ul {
	margin: 0px;
	padding: 0px;
	border: 1px solid #8497c2;
	list-style-image: none;
	list-style-type: square;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
}
#sommaire li {
    list-style: none;/*On supprime la puce pour pouvoir la remplacer par une puce/image*/
    border: 1px solid #4e698f;
    background: #01285f url(images/puce.gif) no-repeat left center;
    padding: 0px 0px 0px 20px;
    margin: 3px;
}
#sommaire ul a {
	color: #B3D7FF;
	text-decoration: none;
	display: block;
	padding: 3px 0px 3px 0px;
}
#sommaire ul a:hover {
	color: #FFFFFF;
}

renato

9 Dec 2008 à 10:38

Bonjour, je pense avoir trouvé... Le fait de déclarer les attributs de caractères pour mon menu, non pas au niveau du menu mais directement au niveau de body règle mes soucis de différences de hauteur entre les navigateurs, au niveau des blocks (pour le menu).

J'aimerais savoir pour quelles raisons cela fonctionne comme ça, SVP.

Renato.


<body>
<div id="conteneur">

	<!-- Debut COLONNE GAUCHE -->
	<div id="colonne">
    	<div><img src="images/la_goutte.jpg"></div><!-- Imgae de la GOUTTE -->
             <div id="sommaire">
              <ul> 
                <li><a href="#">Item 1</a></li> 
                <li><a href="#">Item 1</a></li> 
                <li><a href="#">Item 1</a></li> 
                <li><a href="#">Item 1</a></li> 
                <li><a href="#">Item 1</a></li> 
                <li><a href="#">Item 1</a></li> 
                <li><a href="#">Item 1</a></li> 
                 <li><a href="#">Item 1</a></li>
                   <li><a href="#">Contact</a></li>
      		  </ul> 
         </div><!-- Fin SOMMAIRE -->
	</div>
  <!-- Fin NAVIGATION GAUCHE -->
</div><!-- Fin du CONTENEUR -->
</body>


body {
	background-image: url(images/fond_gris.gif);
	background-repeat: repeat;
	margin: 0px;
	padding: 0px;
	/*Le fait de declarer les attributs texte ici, empeche davoir des problemes de differences de hauteurs daplats au niveau des liens du menu gauche entre IE - Oper - Firefox*/ 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
}
#conteneur {
	width: 900px;
	height: 700px;
	background: #FFFFFF;
	position: absolute;
	left: 50%;/*pour l'alignement horizontal*/
    margin-left: -450px;/*Centrer en horizontal la moitie de la LARGEUR du bloc*/
}
#colonne {
	width: 235px;
	background: #11397B;
	position: absolute;
	left: 25px;
	top: 0px;
	margin-top: 20px;
}
#sommaire {
	background-color: #11397B;
	margin-left: 15px;
	margin-right: 15px;
	margin-top: 15px;
	margin-bottom: 15px;
}
#sommaire ul {
	border: 1px solid #8497c2;
    margin: 0px;
    padding: 0px;

}
#sommaire li {
    list-style: none;/*On supprime la puce pour pouvoir la remplacer par une puce/image*/
    border: 1px solid #4e698f;
    background: #01285f url(images/puce.gif) no-repeat left center;
    padding: 0px 0px 0px 20px;
    margin: 3px;
}
#sommaire ul a {
	color: #B3D7FF;
	text-decoration: none;
	display: block;
	padding: 3px 0px 3px 0px;
}
#sommaire ul a:hover {
	color: #FFFFFF;
}

Sujet clos

Questions générales et questions de débutants

[Résolu] Différence entre les navigateurs