28212 sujets

CSS et mise en forme, CSS3

[Résolu] Bug Css sous IE uniquement

Bonsoir à tous,
Après avoir terminer le codage d'un de mes sites j'ai constaté un petit soucis.

- Sur Firefox tout passe bien
- Sur Safari tout passe bien aussi
- Sur IE j'ai un bug d'affichage qui se résout seulement si je réactualise la page : en faite mon background n'est même plus pris en compte et des soucis de positionnements apparaissent Smiley ohwell

Ouvrir avec Internet Explorer : http://grisha.be/folio/s-e/index.php


Voyez-vous d'ou ça pourrait venir ?
Merci d'avance en vous souhaitant une bonne soirée Smiley biggrin

PS: si vous avez besoin du code source html ou css, pas de soucis Smiley cligne
Modifié par Dr_G (27 Nov 2008 - 15:58)
Modérateur
Salut Dr_G et bienvenue sur le forum,

Je vois que tu as utilisé des png et que IE n'aime pas trop cela. Je te conseille d'utiliser le bon vieux gif Smiley cligne . Là, tu n'auras pas de soucis de transparence Smiley cligne .

Je pense que ton soucis de positionnement proviendrait d'un oubli de la propriété :

clear:both;

Cela permet d'annuler un float.

<<<EDIT
Peux tu mettre sur le forum le code source de ta page (html et CSS),SVP ?
EDIT;

++
Modifié par Nolem (26 Nov 2008 - 19:25)
Html :

<body>
		<div id="container">
			
			<div id="header"></div>
			
			<div id="menu">
				<div id="menu_haut"></div>
				
				<div id="menu_milieu">
					<a href="index.php?page=accueil"><img src="./img/button/bt-accueil.png" width="113px" height="79px" alt="Accueil"></img></a>
					<br/>
					<a href="index.php?page=cv" title="Curriculum vitae"><img src="./img/button/bt-cv.png" width="113px" height="79px" alt="C.V"></img></a>
					<br/>
					<a href="index.php?page=tarifs"><img src="./img/button/bt-tarifs.png" width="113px" height="79px" alt="Tarifs"></img></a>
					<br/>
					<a href="index.php?page=contact"><img src="./img/button/bt-contact.png" width="113px" height="79px" alt="Contact"></img></a>
					<br/>
				</div>				
				<div id="menu_bas"></div>
			</div>
			
			<div id="contenu">
				<div id="contenu_haut"></div>
				<div id="contenu_milieu">
					<div id="contenu_texte">%contenu%</div>
				</div>
				<div id="contenu_bas"></div>
			</div>
			
			<div id="footer">
				<span>Secretariat-express &copy; 2008 | Tous droits réservés | Design :
					<a href="http://grisha.be" target="_blank">Grisha.be</a>
				</span>
			</div>
			
		</div>
		<br/><br/>
	</body>



Css :

body {
	background:url(./img/squelette/fond.gif) #2a1d15;
	background-repeat:repeat-x repeat-y;
	color: #000000;
	font-size:16px;
	font-family:Times new roman, Helvetica, Arial, Verdana, Courier;
	text-align:center;
	margin: 0;
	padding : 0;
	}
	
#container { 
	width: 999px;
	height:auto;
	margin: 0 auto;
	padding : 0;
	}
	

#header {
	background: url(./img/squelette/header.jpg) no-repeat;
	width:887px;
	height:136px;
	margin: 0 auto 0 auto;
}


img {
border:0px;
}


#menu{
	float:left;
	position:relative;
	top:15px;
	margin-left:55px;
}


#menu_haut{
	background: url(./img/squelette/menu_haut.png);
	width: 169px;
	height:25px;
}


#menu_milieu{
	background: url(./img/squelette/menu_milieu.png);
	width: 169px;
	height:565px;
}


#menu_bas{
	background: url(./img/squelette/menu_bas.png);
	width: 169px;
	height:20px;
}


a:link{
	color:#b25c06;
	text-decoration:underline;
}


a:visited{
	color:#073C58;
	text-decoration:underline;
}


a:hover{
	color:#617cbd;
	text-decoration:underline;
}


a:active{
	color:#617cbd;
	text-decoration:underline;
}


#contenu {
	float:left;
	position:relative;
	top:15px;
	margin-left:30px;
	height:auto;
}


#contenu_haut{
	background: url(./img/squelette/contenu_haut.png);
	width: 687px;
	height:27px;
}


#contenu_milieu{
	background: url(./img/squelette/contenu_milieu.png);
	width: 687px;
	height:560px;
}


#contenu_bas{
	background: url(./img/squelette/contenu_bas.png);
	width: 687px;
	height:23px;
}


#contenu_texte{
	margin-left:50px;
	text-align:justify;
	width:600px;
}


#footer{
	background: url(./img/squelette/footer.png) no-repeat;
	width: 535px;
	height:40px;
	position:relative;
	top:30px;
	float:left;
	margin-left:330px;
}


#footer span{
	position:relative;
	top:9px;
	font-size:13px;
	margin-left:25px;
}


span a:link{
	color:#af1f24;
	text-decoration:none;
}


span a:visited{
	color:#af1f24;
	text-decoration:none;
}


span a:hover{
	color:#051d43;
	text-decoration:underline;
}


span a:active{
	color:#051d43;
	text-decoration:underline;
}


/* formulaire de contact */
#contact{
	text-align:center;
}


#champ_message {
	width:250px;
	height:150px;
}

.champs_contact {
	width:250px;
}

.contact_texte {
	color:#2c5789;
}
/* //Formulaire de contact */


#button{
	background: url(./img/button.png) no-repeat;
	width:113px;
	height:79px;
}


#hierarchie{
	color:#d36300;
}


#flag{
	position:relative;
	top:115px;
	margin-left:830px;
}



Pour les images en PNG il n'y a pas de soucis de ce coté car le fond n'est pas transparent donc si je ne me gourre pas dans ce cas si c'est pareil que le JPG
Bon bah après une journée de bataille : j'ai trouvé ... c'était manifestement mon code php
le layout en lui meme passait bien après quelques réglages

J'ai fini par virer les floats =D et tout fonctionne bien sous FF, IE6 & IE7

Merci les zamis Smiley smile
Sujet clos
Aller à