28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème colonne droite avec IE

Bonjour,

je rencontre un problème avec ma mise en page à trois colonnes que j'ai tiré du site (ici).

Voici ce que ça me donne :

IE Sucks...
http://img291.imageshack.us/img291/5585/iesucksqf5.jpg

FF Rox !
http://img91.imageshack.us/img91/8757/firefoxroxkv9.jpg

Allez comprendre... Smiley fache Sous IE, le menu de droite s'obstine à vouloir sortir du conteneur j'ai l'impression Smiley ohwell

Voici le code...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<style>
/*********************/
/****** GENERAL *****/
/*******************/

@import url("printemps.css");

body {
font: 11px/1.2 Lucida Grande, Arial, Tahoma, sans-serif;
background-color:#000;
margin:0;
padding:0;
}

input {
padding-left:2px;
}

div#conteneur {
position: relative;
width:995px;
margin:10px auto;
background-color:#FFF;
}

div#conteneur-texte {
padding:25px;
}

div#centre {
margin-left: 155px;
margin-right: 155px;
background-color:#FFF;
padding:10px;
}

div#gauche {
position: absolute;
left:15px;
width: 140px;
background-color:#FFF;
padding:5px;
}

div#droite {
position:absolute;
right:15px;
width: 140px;
background-color:#FFF;
padding:5px;
}

ul.menu {
list-style-type:none;
font: 12px/1.2 Lucida Grande, Arial, Tahoma, sans-serif;
margin:0;
padding:0;
}

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

div#pied {
margin-top:20px;
height:30px;
background-color:#FFF;
}

div#copyright {
text-align:center;
}

#res.ajax-loading {
padding: 20px 0;
background:url(../img/site/ajax-loader.gif) top center no-repeat;
}

#res {
font: 16px/1.2 Lucida Grande, Arial, Tahoma, sans-serif;
width:995px;
text-align:center;
color:#006600;
}


div#form-admin-connexion {
text-align:center;
}

table.form {
text-align:left;
}

.admin {
margin: 20px auto;
width:240px;
}

</style>
<div id="conteneur">
	<div id="haut"></div>
	
	<div id="gauche">
	  
			<ul class="menu">
			<li><a href="">1</a></li>
			<li><a href="">2</a></li>
			<li><a href="">3</a></li>
			<li><a href="">4</a></li>
			</ul>
			<br />
			<ul class="menu">
			<li><a href="">5</a></li>
			<li><a href="">6</a></li>
			</ul>
		
	  </div>
	  
	  <div id="droite">Recherche<br />
	  	<input type="text" size="10" /> <input type="submit" value="OK" />

	  	
			<ul class="menudroit">
			<li><a href="">Menu 1</a></li>

			<li><a href="">Menu 2</a></li>
			<li><a href="">Menu 3</a></li>
			<li><a href="">Menu 4</a></li>
			</ul>

		

	  </div>
	
		<div id="centre">

			<div id="form-admin-connexion">
			<h2>Connexion</h2>
			
			<form method="post" name="admin-connexion" id="admin-connexion" action="validation/valid_connexion.php">
			
				<table class="form admin">
					<tr>
						<td><label for="login">Login</label></td><td><input type="text" name="login" id="login" maxlength="20" /></td>
					</tr>
					<tr>
						<td><label for="pass">Mot de passe</label></td><td><input type="password" name="pass" id="pass" maxlength="20" /><input type="hidden" name="type" value="admin" /></td>
					</tr>
					<tr height="50">
						<td></td><td><input type="submit" value="Connexion" /></td>
					</tr>
				</table>
				<div id="res"></div>
				
			
			</form>
			</div>

		</div>
		
		<div id="pied">
		<div id="copyright">&copy;2008 VTT Sud tous droits réservés - mentions légales</div>
	</div>	
</div>
</body>
</html>

</body>
</html>



Quelqu'un aurait-il une lumineuse idée ???
Merci !
Modifié par Api1000 (13 Mar 2008 - 20:34)
Hello

Pourquoi ne pas essayer quelque chose comme cela :
css :


body{
	margin: 0;
	padding: 0;
	font-family: tahoma, sans-serif;
	font-size: 0.7em;
	background-color: #ddd;
}
#container{
	width: 800px;
	margin: 10px auto;
	border: solid 1px #ccc;
	background-color: #fff;
}
#left, #right, #center{
	height: 300px;
}
#left{
	width: 150px;
	float: left;
	border-right: solid 1px #eee;
}
	/* --- HACK IE POUR LA MARGE SUR LES FLOATS --- */
	*html #left{ 	
		margin-right: -3px;
	}
#right{
	width: 150px;
	float: right;
	border-left: solid 1px #eee;
}
	/* --- HACK IE POUR LA MARGE SUR LES FLOATS --- */
	*html #right{ 	
		margin-left: -3px;
	}
#center{
	overflow: hidden; /* POUR EVITER DE METTRE MARGIN-LEFT || MARGIN-RIGHT SUR LES NAVS NO-IEs */
	text-align: center;
}
#connexion{
	width: 400px;
	margin: 20px auto;
	padding: 5px;
	border: solid 1px #ccc;
	background-color: #eee;
}
#connexion h2{
	margin: 0;
	padding: 0;
	font-family: arial;
	font-size: 20px;
	font-weight: normal;
}
#connexion ul{
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
	width: 80%;
}
#connexion ul li{
	text-align: left;
	padding: 2px 0 ;
}
#connexion ul li label{
	float: left;
	width: 30%;
	margin: 5px  0 0 0;
}
#connexion ul li .field{
	width: 66%;
}


html:


<body>
	<div id="container">
		<div id="left">
			<ol>
				<li>prout</li>
				<li>reprout</li>
				<li>rereprout</li>
				<li>rerereprout</li>
			</ol>
		</div>
		<div id="right">
			<ol>
				<li>prout</li>
				<li>reprout</li>
				<li>rereprout</li>
				<li>rerereprout</li>
			</ol>
		</div>
		<div id="center">
			<div id="connexion">
				<h2>CONNEXION</h2>
				<ul>
					<li><label>login</label><input class="field" type="text" /></li>
					<li><label>mot de passe</label><input class="field" type="text" /></li>
					<li><label></label><input  type="submit" value="connexion"/></li>
				</ul>
			</div>
		</div>
	</div>
</body>


Smiley smile
Modifié par ami (13 Mar 2008 - 18:27)
Oui, cette solution marche aussi : c'est à peu près ce que j'ai fait pour un autre site Smiley cligne
J'attendais plutôt qu'on me dise pourquoi ce bug sous IE... Afin que je ne refasse plus l'erreur Smiley biggrin

Merci quand même de t'être donné la peine d'osculter tout ça Smiley lol
Pas de problème.

En fait, j'étais justement en train de monter une page plus ou moins comme ça, j'en ai profité pour donner le source.

Smiley biggrin

Par contre, j'ai laissé tomber l'idée de comprendre le pourquoi des bugs d'IE. Trop de cheveux blancs pour rien Smiley lol
Oui, c'est malheureusement exact...

Et on est bien obligé de faire avec dans la plupart des cas Smiley biggol

Cela dit, le code de mon post précédent fonctionne sur IE6 autant que sur IE7, Firefox, Opera et Safari ( sur PC, évidemment : mon mac prend la poussière au bureau car j'ai horreur des Mac et d'OSX, mais on va pas commencer à troller maintenant Smiley lol ).
Enfin, disons que je l'ai testé sur "MultipleIEs" ( il parait qu'il contiendrait des bugs , mais je ne l'ai pas personnellement constaté ).
Sujet clos
Aller à