28172 sujets

CSS et mise en forme, CSS3

[ résolu ] Souci sous IE

Salut à tous !

un problème classique, ça doit pas être grand chose mais j'arrive pas à mettre la main dessus et l'équivalent firebug chez IE est vraiment une...

une div englobe l'anime à gauche et ensuite l'ensemble du site, sous firefox et chrome pas de soucis mais sous IE le bloc se place direct dessous comme s'il avait pas la place de se mettre à droite en fait. j'ai élargé la div qui englobe l'ensemble mais ce n'est pas ce qui pose souci apparemment...

si quelqu'un voit le truc je le remercie d'avance Smiley cligne
Modifié par zepokpok (10 Nov 2010 - 10:18)
salut !

merci de ta réponse !

j'avais déjà essayé un float right ou left sur le global mais le problème est le même sous IE et du coup je me retrouve avec la mise en page qui fout le camp aussi sous firefox.

Pardon j'aurais du précisé les pistes que j'avais essayé

merci !
Salut,

J'ai regardé ton code un peu plus en profondeur et sans vouloir être méchant mais c'est un gros n'importe quoi hehe. Le positionnement de tes éléments, avec des positions relatives négatives, des floats qui servent à rien, des positions relatives positives et plus encore.

Je t'ai fait un exemple en 10 minute d'une structure un peu plus clean.


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <meta charset="UTF-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
	<style>
		* { margin:0; padding:0; border:none; }
		body { background:#D1DEDF; }
		ul { overflow:hidden; }
		ul li { float:left; display:block; height:30px; padding:0 10px; }
		#global { overflow:hidden; width:960px /* bannière + contenu */; margin:0 auto; }
		#container { width:707px; float:right; }
			#header img { display:block; border-bottom:1px solid #fff; }
			#menu { background:#648689; color:#fff; }
			#content { padding:20px; background:#ABC1C3; }
			#footer { height:50px; background:#BBCFD1; color:#336666; }
		#publicite { width:243px; float:right; }
		
	</style>
</head>

<body>
	<div id="global">
		<div id="container">
			<div id="header">
				<img src="en_tete.jpg" alt="Texte de l'image" />
				<ul id="menu">
					<li>Tapisserie</li>
					<li>Art</li>
					<li>Savoir-Faire</li>
					<li>Images</li>
				</ul>
			</div>
			<div id="content">
				contenu texte ici
			</div>
			
			<div id="footer">
				<ul>
					<li>Mentions légales</li>
					<li>Plan du site</li>
					<li>Communication: Comark</li>
					<li>Connexion</li>
				</ul>
			</div>
		</div>
		<div id="publicite">
		
		</div>
	</div>
</body>

</html>

Modifié par Sorano (10 Nov 2010 - 19:16)
Edit rapido, je n'avais pas jeté un oeil à ton code.

Le code du site peut te paraitre malfichu ou usine à gaz, ça tient au fait qu'il est construit sur du joomla et un yootheme, il faut donc faire avec les balises propriétaires. J'aimerais moi aussi faire quelque chose de plus propre (mes créations sont faites à la main en principe) mais je ne suis là que pour filer un coup de main sur ce projet, pas pour refondre le site.

Maintenant quelqu'un a t il une astuce pour la div global qui ne s'insère simplement pas au bon endroit sous IE ?

Je vais essayer de mon côté de refaire une structure de base en local pour voir comment elle réagit.

Merci !

fin du fin : le site s'affiche correctement sous IE8 mais pas sous IE7...
des pistes ?
Modifié par zepokpok (10 Nov 2010 - 10:11)
Bon, problème résolu, j'ai viré le margin auto et la largeur et tout est rentré dans l'ordre, merci pour les pistes en tout cas.
Sujet clos
Aller à