28173 sujets

CSS et mise en forme, CSS3

Problème de compatibilité IE / FF

Bonjour à tous !

Je me heurte actuellement à un gros problème dont je n'ai pas trouvé la moindre piste pour sa solution concernant l'apparence d'un site sous Internet Explorer. Il est probable que celui-ci ne gère pas correctement certaines CSS, mais j'ai eu beau faire des essais rien ne m'est apparu comme concluant.

Voici le site en question : http://www.limethick.org

Comme vous pouvez le constater, sous FireFox tout fonctionne parfaitement : le footer reste en bas de page, les menus chevauchent le cadre et les liens du menu sont disposés les uns en dessous des autres. Tout ceci se perd en parcourant la page avec Internet Explorer, et les éléments du menu se permettent même de déborder sur l'extérieur !
Et encore, c'était pire avant, mais j'ai déjà réussi à corriger un grand nombre de problème tout seul.


Merci pour l'aide que vous pourrez éventuellement m'apporter, il me suffirait d'une piste à suivre parce que là je suis réellement perdu !
Bonjour,

Bon pour le fun, je serais parti sur un code de ce type:
<!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">
  <head>	

<title>test3</title>

<style type="text/css">
*{margin: 0; padding: 0;}

body {
	font-size: 0.75em;
	font-family: Verdana;
	background: #fae450;	
}

#conteneur{
	width: 100%;/* pour IE */
	position: relative;
}

#main {
 	width: 750px;
	margin: 70px auto 30px;
	padding: 70px 0 70px 0;
	position: relative;
	border: 2px solid black;
 	background-color: #FFFFFF;
	min-height: 300px;
}

#main p{
	margin: 0 125px 0 25px;
	text-align: justify;
}

#droite{
	width: 200px;
	position: absolute;
	right: -100px;
	top: 0;
	border: 1px solid blue;
	z-index: 50;
}

 .menu {
 	width: 200px;
}

 .menu ul{
 	list-style-type: none;
}

 .menu li{
 	margin: 0 10px 0 10px;
}

.menu1{
	margin-top: 75px;
	height: 150px;/* pour la démo */
	background: lime;	
}

.menu2{
	margin-top: 20px;
	height: 150px;/* pour la démo */
	background: pink;
}

#top {
 	width: 750px;
	height: 100px;
	position: absolute;
	left: 0;
	top: -50px;
	border: 1px solid red;
	z-index: 100;
}

#footer {
 	width: 650px;
	height: 18px;
	position: absolute;
	left: 50%;
	margin-left: -325px;
	bottom: -9px;
	padding-left: 5px;
	padding-right: 5px;
	border: 1px solid green;
	z-index: 100;
}

</style>
</head>
<body>
<div id="conteneur">

	<div id="main">
		<div id="top">
		<img src="titre.gif" alt="" />
		</div>
		
		<div id="droite">
			<div class="menu">
				<ul class="menu1">
					<li><a href="#" title="">menu</a></li>
					<li><a href="#" title="">menu</a></li>
					<li><a href="#" title="">menu</a></li>
					<li><a href="#" title="">menu</a></li>
					<li><a href="#" title="">menu</a></li>
				</ul>
			</div>
			
			<div class="menu">
				<ul class="menu2">
					<li><a href="#" title="">menu</a></li>
					<li><a href="#" title="">menu</a></li>
					<li><a href="#" title="">menu</a></li>
					<li><a href="#" title="">menu</a></li>
					<li><a href="#" title="">menu</a></li>
				</ul>
			</div>
		</div>
		<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus pharetra blandit libero. Phasellus eros. In ultrices, turpis sit amet lacinia auctor, diam ante auctor mauris, non adipiscing risus ante sit amet mauris. Phasellus porttitor nulla eu risus. Vivamus lacus nunc, aliquet eget, accumsan sit amet, pretium tincidunt, dui. Etiam vestibulum pretium velit. Praesent lectus mi, tristique dapibus, egestas ac, commodo id, odio. Nunc ultrices, purus eu varius cursus, eros mi varius odio, ut semper enim massa ut pede. Ut felis est, euismod vel, blandit ac, venenatis ac, orci. Integer nonummy metus at neque. Nam rhoncus magna eget velit. Nulla odio nunc, vulputate tristique, venenatis sed, lacinia id, felis. Praesent orci nunc, ultricies ac, consequat a, accumsan ac, erat.
		</p>
		<p>	
Praesent vestibulum, lorem ut pharetra cursus, elit erat ullamcorper nunc, quis congue eros risus eget risus. Nunc imperdiet viverra mauris. Vestibulum nonummy egestas enim. Sed tempor tempor nibh. Aliquam erat volutpat. Vivamus id metus. Aenean lectus libero, bibendum vitae, lobortis non, posuere ut, enim. Integer non est nec eros pharetra egestas. Donec aliquam est et purus. Aenean in tellus eu felis fringilla pulvinar. Quisque rutrum elementum velit. Vestibulum ut mi. Vestibulum mattis eros a elit. Morbi placerat accumsan nisl. Nam sagittis vestibulum enim. In felis tortor, dapibus ut, lobortis quis, consectetuer nec, tortor. 
		</p>
		<div id="footer">
		</div>
	</div>

</div>
</body>
</html>


Il manquerait "juste" les cosmétiques et un commentaire conditionnel pour IE6 
<!--[if lte IE 6]>
   <style>
         #main {
	     height: 300px;
         }
  </style>
<![endif]-->


Ca t'éviterais aussi tous ces vilains hacks pas beau !!

Bon courage
S'il y a des hacks dans mes CSS c'est parfaitement involontaire en fait.
J'ai appris les CSS sur de multiples sites, et il est probable que j'ai récupéré un code quelque part qui soit un hack, mais je ne le sais pas ^^

Et si c'est le cas ca expliquerait la différence de fonctionnement entre IE et FF, et il faut que je retire les hack pour mettre un code normal !

Où sont-ils ?
Bon, et bien j'ai galéré un petit mois sur les problèmes de compatibilité, et rien n'y fait. J'ai déjà réussi à ce que les éléments de menu restent à peu près dans le menu, et les coins du cadre suivent généralement celui-ci, mais bon là j'en peux plus, je désespère complètement de faire marcher correctement LimeThick sous IE :s
Salut,

As tu tenter d'adapter le code de mon dernier post durant ce mois? Il me semblait bien de mémoire qu'il était compatible ie, ff et opéra.
Disons que je n'ai pas compris tout ton message, ni les changements que tu as effectué, et encore moins pourquoi ton code marche et pas le miens. Mais je vais essayer de faire une comparaison pour mieux comprendre ce que tu propose.


EDIT : alors j'ai essayé la majorité des modifications que tu propose à travers ton code, et ca ne fonctionne pas du tout. Chez moi le conteneur se retrouve décalé à gauche (et laisse un gros blanc à droite avant les menus). Si je fais en sorte que le conteneur ne le fasse pas (en retirant le width: 100%;), alors celui-ci se met en dessous des menus (allez comprendre).

Bref, mon plus gros problème ne semble pas trouver sa solution de cette façons, mais ca me donne au moins quelques pistes !

Par contre, le footer merde toujours autant avec ton code : il n'est pas toujours en bas de page mais remonte parfois au milieu des menus... enfin bref, je me demande pourquoi je ne laisse pas IE tomber finalement. C'est con pour un logiciel qui se veut ouvert justement, mais bon, là je craque :s
Modifié par Stabbquadd (06 May 2007 - 19:29)
Sujet clos
Aller à