28173 sujets

CSS et mise en forme, CSS3

[résolu] Pb de fond sous IE

C'est un problème de forme en vérité !
Je découvre pas à pas les css et ceci est ma première tentative de réalisation (cf plus bas). Sous FF ça marche tout à fait bien mais sous IE mon ombré, qui est en background dans un div, fait qqchose de moche et je n'arrive pas à identifier le problème.
Vous pouvez voir la chose ici : test
Merci d'avance à ceux qui auront la patience de m'aider.

Voici mon Html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>NewsMedia</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="newstyle.css" rel="stylesheet" type="text/css">
</head>
<body>

		  
<div id="global"> 
  <div id="ombreht"> 
    <div id="coinhg"></div>
    <div id="coinhd"></div>
  </div>
  <div id="ombregche"></div>
  <div id="menu"> 
    <dl id="menu">
      <dt><a href="../NewsMedia/Institucional.htm">Institucional&nbsp;</a></dt>
      <dt><a href="../NewsMedia/Productos.htm">Productos&nbsp;</a></dt>
      <dt><a href="#" class="clique">Compras online&nbsp;</a></dt>
      <dt><a href="../NewsMedia/Contacto.htm">Contacto&nbsp;</a></dt>
    </dl>
  </div>
  <div id="ombredte"></div>
  <div id="ombrebas"> 
    <div id="coinbg"></div>
    <div id="coinbd"></div>
  </div>
</div>
			
</body>
</html>


... et mon Css



#global {
	height: 500px;
	width: 700px;
	background-color: 6D0019;
	background-image:  url(Images/images/fond-de-page_13.png);
	background-repeat: repeat-x;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -250px;
	margin-left: -350px;




}
#ombreht {
	position: absolute;
	height: 16px;
	width: 730px;
	left: -15px;
	top: -15px;
	background-image:  url(Images/images/ombre_08.png);
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
	background-position: center bottom;
	

}
#coinhg, #coinhd, #coinbg, #coinbd {
	width: 15px;
	height: 15px;
	margin: 0px;
	padding: 0px;
	
	
}
#coinhg {
	background-image:  url(Images/images/ombre_07.png);
	float: left;
	background-position: left bottom;
}
#coinhd {
	background-image:  url(Images/images/ombre_09.png);
	float: right;
	background-position: right bottom;
}
#coinbg {
	background-image:  url(Images/images/ombre_17.png);
	float: left;
	background-position: right top;
}
#coinbd {
	background-image:  url(Images/images/ombre_19.png);
	float: right;
	background-position: left top;
}
#ombrebas {
	position: absolute;
	height: 16px;
	width: 730px;
	left: -15px;
	top: 500px;
	background-image:  url(Images/images/ombre_18.png);
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
	background-position: center top;

}
#ombregche {
	position: absolute;
	height: 500px;
	width: 15px;
	left: -15px;
	top: 0px;
	background-image:  url(Images/images/ombre_12.png);
	background-repeat: no-repeat;
	background-position: center;

}
#ombredte {
	position: absolute;
	height: 500px;
	width: 15px;
	left: 700px;
	top: 0px;
	background-image:  url(Images/images/ombre_14.png);
	background-repeat: no-repeat;
	background-position: center;
	

}

#menu {
	left: 0px;
	top: 100px;
	position: absolute;
	height: 300px;
	width: 150px;



}

Modifié par SaluCseb (16 Aug 2006 - 11:28)
Salut !

Je sais pas si c'est ca, mais je sais que IE ne gère pas les PNG. Et puis, j'ai l'impression que l'image de ton ombre se répète, tu as tenté un "no-repeat" ? Pour tes coins aussi ? et background-attachement ? En meme temps IE ne gère que partiellement cette fonction... Smiley ohwell
C_may a écrit :
Salut !

Je sais pas si c'est ca, mais je sais que IE ne gère pas les PNG.


si, il les gère très bien. Mais il faut lui expliquer certains PNG à sa manière (propriété filter, faire une recherche dans ce forum).
Merci C_may !
En effet il suffisait juste d'un petit no-repeat sur les angles ...
Des fois on cherche, on cherche, et on passe à coté des trucs les plus évidents !
Sujet clos
Aller à