28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de cadre arrondi sur IE.

Bonjour,

J'essai de combiner ces deux tuto :
Faire un cadre arrondi.
Modèle de mise en page.

Le résultat est ici : Ma page de test.
Sous firefox, nickel, mais sous IE, il y a un décalage avant l'arrondi en haut à gauche (Voir l'imprim ecran)

Je ne vois pas du tout d'où il peux venir, et comment m'en débarrasser...

Mon code html

<html>
	<head>
		<title>TITLE</title>
		<link rel="stylesheet" href="css/mystyle.css" type="text/css"> 
	</head>
	<body>
    	<div id="conteneur">
      		<div id="header">
        		Header (modèle utilisant les positionnement flottants)<a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS"> (voir tous les mod&egrave;les)</a>
      		</div>
      		<div id="gauche">
				<div class="cadre">
        			<div class="titlecadre">
        			Menu
        			</div>
					<div class="bloccadre">
						<p>Lorem ipsum dolor sit amet, bla bla bla....</p>
					</div>
				</div>
				
				<div class="cadre">
        			<div class="titlecadre">
        			Menu
        			</div>
					<div class="bloccadre">
						<p>Lorem ipsum dolor sit amet, bla bla bla....</p>
					</div>
				</div>
      		</div>
      		
      		<div id="droite">
		        <div class="cadre">
        			<div class="titlecadre">
        			Menu
        			</div>
					<div class="bloccadre">
						<p>Lorem ipsum dolor sit amet, bla bla bla....</p>
					</div>
				</div>
     		</div>
			
	      	<div id="centre">
				<div id="hautdroit"></div>
				<div id="hautgauche"></div>
				<div id="textecentre">
			        <p>Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété <code>clear:both;</code> sur le pied de page, permet à ce dernier de "pousser" le conteneur pour intégrer les éléments en float. Le pied de page est correctement positionné à la suite des parties en float les plus longues.</p>
					<p>Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.</p>
					<p>Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété <code>clear:both;</code> sur le pied de page, permet à ce dernier de "pousser" le conteneur pour intégrer les éléments en float. Le pied de page est correctement positionné à la suite des parties en float les plus longues.</p>
					<p>Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.</p>
					<p>Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété <code>clear:both;</code> sur le pied de page, permet à ce dernier de "pousser" le conteneur pour intégrer les éléments en float. Le pied de page est correctement positionné à la suite des parties en float les plus longues.</p>
					<p>Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.</p>
					<p>Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété <code>clear:both;</code> sur le pied de page, permet à ce dernier de "pousser" le conteneur pour intégrer les éléments en float. Le pied de page est correctement positionné à la suite des parties en float les plus longues.</p>
					<p>Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.</p>
				</div>
				<div id="basdroit"></div>
				<div id="basgauche"></div>
			</div>
			
      		<div id="pied">
        		&copy; 2005-2006 LagnyPontcarreCyclisme.com | Contact  Webmaster<br />
				Design par Frederique.br
      		</div>
    	</div>
	</body>
</html>


Mon css

body
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	margin: 0;
	padding: 0;
}

#header
{
	height: 50px;
	background-color: #99CCCC;
}
#conteneur
{
	position: absolute;
	background-color:#3366FF;
	width: 950px;
	left: 50%;
	margin-left: -475px;
}
#centre
{
	background-color:#FFFFFF;
	margin: 10px 150px 10px 150px;
}
#gauche
{
	float:left;
	width: 150px;
}

#droite
{
	float:right;
	width: 150px;
}
#pied
{
	clear:both;
	height: 30px;
	padding: 5px;
	background-color: #99CC99;
	text-align:center;
}

/* Les blocs gauches et droites */
.cadre {
	width: 145px;
	background: url(../img/haut.gif) top left no-repeat;
	margin: 10px auto auto 3px;
	background-color: white;
}
.titlecadre {
	padding: 2px 0 2px 5px;
	font-weight:bold;
	color: white;
}
.bloccadre {
	background: url(../img/bas.gif) bottom left no-repeat;
	padding-bottom: 5px;
}
.bloccadre p {
	margin: 0 30px 0 20px;
}

/* Centre de la page */
#textecentre
{
	margin: 10px;
}
#titleCentre
{
	color: white;
	font-size: 12px;
	font-weight:bold;
	padding-top: 10px;
}
#hautgauche, #hautdroit, #basgauche, #basdroit {
	background-repeat: no-repeat;
	font-size:1px; /* correction d'un bug IE */
}
#hautgauche {
	height: 20px; width: 400px;
}

#hautdroit, #basgauche, #basdroit {
	height: 20px; width: 19px;
}
/* propriétés spécifiques à chaque coin */
#hautgauche {
	background: url(../img/hautgauche.gif);
}
#hautdroit {
	float: right;
	background: url(../img/hautdroite.gif);
}
#basgauche {
	background: url(../img/basgauche.gif);
}
#basdroit {
	float: right;
	background: url(../img/basdroite.gif);
}


Merci de votre aide.

Mathieu
Modifié par mrkeyser (16 Feb 2008 - 23:25)
bonjour

il faut mettre un doctype à ta page.
il y a aussi un autre problème : ta barre verte s'arrête aux 2/3 et le coin supérieur droit n'apparait pas (IE7, firefox, opera)
Sujet clos
Aller à